Drum Machine with Record Function - Feedback

After many hours (days, really), I’ve completed the Drum Machine project for the Front End Development curriculum.

You can view my project on Github Pages. The source code can be found on the repo’s master branch.

Inspired by RandellDawson’s iteration of the same app, I built a record/sequencing function into my app. This lets the user record his/her drum clicks and key presses, and plays it back once they’re done.

Let me know what you think!

I built the app entirely with React. I’m pretty proud of it, but there are some lessons I learned while building the app, and things about it that I’d like to improve at a later date:

  • I should have created separate files for each of the components, because right now App.js contains all the components and it can be difficult to navigate
  • Adding the record/sequencing functionality added a significant amount of complexity to the app and extended the project’s completion time by weeks (I can only code for an hour or so a day)
  • However!! Adding the recorder was a great learning experience for me, from the initial head-scratching conceptualizing phase to execution, complete with all the many bugs and roadblocks I had to figure out
  • Figuring out where to put event handlers and how far “up the chain” to declare variables in state was tricky, and I still don’t think I did an optimal job
  • Styling took up a huge amount of time as well, and I have great respect for designers and front-end developers who make excruciatingly precise and responsive apps and pages