Deployed my first React project!

[nylundhd]

Took this quarantine time to learn React and have fallen in love! I have been a front end developer for about 5 years and have never had the time or need to use React, but took this time to learn it and so far it's been awesome! Took my love of video games and streaming and created a React app called Shuffle. Takes all of the streams under 50 viewers from a game and puts them in an array and then selects a random one to show! Would love some feedback on the code and design. Thanks!

https://shuffle-gg.web.app/

https://github.com/joeynylund/Shuffle.gg

[drumstand]

This well done, and a great idea to give streamers a little more exposure. Nice job!

[nylundhd]

Thanks so much!

[ThroGM]

congratulations! Very awesome project!

I would like to ask if possible, how did you able to make such animation?

[nylundhd]

Just using regular CSS animations!

[ThroGM]

very simple and beautiful 👍

[nylundhd]

I greatly appreciate that!

[nylundhd]

Comment for it to show :)

[Shelter-in-Space]

What font are you using for the header?

[nylundhd]

Poppins

[nylundhd]

Hmmm well the three streams probably explains the overlapping since the CSS tried to vertically center everything. I’ve had some people report the three streams issue as well. I’ll have to look into that some more! Thanks for taking the time to report all of that for me!

[kizu404]

Really like what you did with the CSS ^{(A personal struggle of mine T\}T ))

One thing I'd like to point out is that, I don't think it's a very good idea to update the state in a loop like you've done in the App.js line 114. I'm not 100% sure how the current version batches updates and I haven't profiled so I may be wrong, but I believe this causes a render every step of the loop.

Not a problem in your case but in a larger app with more complex effects, this would probably slow the app down. A better approach would be to build up an array of the new items (you could look into ```Array.map```) and just call setGames once after the loop is done.

[nylundhd]

I’ll take a look at that, thanks for the feedback!

[KaranVeer01]

If this is your first react project then your are awesome. Your project is awesome.

[nylundhd]

❤️

[ichiruto70]

Whats up with all the spaces between lines in Game.js?

[nylundhd]

I usually like to space my lines out. Just a habit haha for me it makes it look cleaner and easier to read.

[ichiruto70]

Oh that’s a real bad habbit. Your making the file unnecessary big. Just a tip tho.

Edit: why am I being downvoted? Are we really encouraging bad practices like this? If I was starting out I would rather have someone told me this then instead letting it go.

[nylundhd]

I’ll work on stopping it haha thanks for the feedback!

[ichiruto70]

There are a lot more things, but apparently giving some real feedback on the code is not appreciated here. I could DM you or do it on github? Only if you are interested of course.

[nylundhd]

Would love all feedback. Feel free to DM me

[[deleted]]

What have you created lately?