After many hours (days, really), I’ve completed the Drum Machine project for the Front End Development curriculum.
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