Drum Machine built with react

I Built This
1

Just finished my drum machine for the front end libararies certification. Check out the git (includes heroku link to test out the app): GitHub - sparksflyupwards/drummachine: Drum Pad for freecodecamp front end projects

2

Hey Saad,

congrats on your project, you did a great job so far! :clap:

My ideas:

All tests pass, awesome!

I either would remove the stuff you don’t use, e.g. the storybook stories or the tests, or add them for mostly all of your components.

There are some low-hanging fruits to refactor in App.js:

  • in handleKeyPress, you literally play the key you press
  • in playSound, you just map a key to a drum file
  • in render, you create multiple DrumPads with the same rules

You could start by creating an array of objects that stores all the keys and use this to iterate over it.

const keys = [
  { keystroke: "E", sound: "drum3", soundFile: drum3 },
  ...
]

Then you can simply iterate over keys and create everything with just that data instead of cluttering your file with the same stuff all over the place. If you think about it, you have each key (lowercase and uppercase) 5-times in your file.

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.