# Just finished Drum Machine, my first React project

**URL:** <https://forum.freecodecamp.org/t/just-finished-drum-machine-my-first-react-project/278174>\
**Category:** I Built This\
**Created:** [May 18, 2019, 3:42pm UTC](https://forum.freecodecamp.org/t/just-finished-drum-machine-my-first-react-project/278174 "2019-05-18T15:42:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![texdiego](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@texdiego](https://forum.freecodecamp.org/u/texdiego)\
**Post date:** [May 18, 2019, 3:42pm UTC](https://forum.freecodecamp.org/t/just-finished-drum-machine-my-first-react-project/278174/1 "2019-05-18T15:42:50Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![BlueAlps](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bluealps/32/23020_2.png) [@BlueAlps](https://forum.freecodecamp.org/u/BlueAlps)\
**Post date:** [May 19, 2019, 8:22am UTC](https://forum.freecodecamp.org/t/just-finished-drum-machine-my-first-react-project/278174/2 "2019-05-19T08:22:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![texdiego](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@texdiego](https://forum.freecodecamp.org/u/texdiego)\
**Post date:** [May 19, 2019, 3:01pm UTC](https://forum.freecodecamp.org/t/just-finished-drum-machine-my-first-react-project/278174/3 "2019-05-19T15:01:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 6, 2021, 1:37pm UTC](https://forum.freecodecamp.org/t/just-finished-drum-machine-my-first-react-project/278174/4 "2021-02-06T13:37:01Z")

</div>

Closed on February 6, 2021, 1:37pm UTC