Frontend code repo
To see the backend code, please click here
a) a seasoned drummer
b) a new drummer
c) a drumming enthusiast
d) all of the above
and you just don't know what to practice or where to get new ideas, or "how is that part in that song actually played?"
Fear not - drumRecords is here
I had the idea while scrolling through my Instagram feed where tons and tons of drum videos came up. I wanted to play a specific section of a song, and by pure coincidence, came across a "how to" video by a drummer. I saved the video, and went back to it a lot. Opening the Instagram App and getting to my saved videos and then finding it was a bit much, I felt. So I wrote this.
Essentially, I'm embedding Instagram URLs - that's the whole magic. Sadly, saved posts and such don't belong to the data you can fetch with the Insta API (or else this would have been even more convenient). That's why this app provides:
- An Admin dashboard (which is essentially for me):
- here I can add new videos with a simple form
- or delete them if the URL is not working anymore or I don't like the video, or...
- A random video right on the landing page - if you feel like you just wanna do anything new, spin up the page and play what's there!
- A collection of all videos - and you can sort them by category!
The app is deployed using Render for the React frontend as well as the Node backend (using a webservice)
Aside from the usual stuff (as a Vite app I used Vite) there are a few things I really liked and relied on:
-
- making embedding social media links incredibly convenient
-
- a fun gimmick to show the currently used browser with version
-
- very helpful to keep loading screens interesting
This project was realized by me, with many thanks to Meta (for Instagram and making React and such) as well as to all those artists who put their skills into the cloud for all to share!