Just finished Drum Machine, my first React project

I recently came back to freeCodeCamp after taking quite a while off. My CSS and HTML are a bit rusty (I’m particularly struggling with sizing and centering), but React in particular was brand new to me. I just finished the Drum Kit project and really enjoyed building it! I found React to be very logical and am looking forward to building the rest of the React projects in the coming days. However, I want to be sure that I’m following “best practices” before I continue on.

Any feedback is welcomed! Thank you so much.

https://codepen.io/texdiego/pen/dEMKJB?editors=0010

Edit: In particular, I’m curious if my React code is written well, or if there are ways it should be refactored. For example, I feel like I ended up passing in a LOT of props into the nested components like the display panel and the drum kit pads. I’m not sure if there’s a more elegant way of handling 6+ props or if I’m doing it right.

1 Like

Congrats! It looks great. I think you created a retro aesthetic really well.

One small bug: I think the “Heavy Hit” (key A) and “Side Snare” (key C) use the same audio clip. (Looking at your code, I think you need to change the URL for Heavy Hit).

If you want to add to the project you could resize or change the layout for smaller screens.

Thank you for the feedback!

Yes, somehow I did insert the same sound clip twice without noticing. I’ll definitely swap that out!

Resizing for smaller/larger screens is something that I tried to implement already, but had a lot of problems with. I’m going to give it another shot, though, because I know it’s important.