Records and physical media have made a massive comeback in the past decade and are more popular than ever. I learned to love records from my father and since then have been a little too obsessed with the satisfaction of listening to an album front to back, the physical charm, and a plethora of extra art. As such, for my project, I wanted to make a web app that would allow me to access and play my collection on the go. discJockey is a web app that uses Discogs, a platform for maintaining your music collection, in order to pull a user's collection data and display it with sleek CSS and JavaScript animations.
I started the building process by learning about using Flask in Python, a web app backend, in order to support the frontend UI. I wrote a simple python script that uses Flask routes to render html, and also run the appropriate scripts. Outside of Flask, I also made Python scripts to both web scrape a user's collection data, and generate a master JSON file for my future HTML pages to use for accessing graphics and text data. From here, I relearned HTML and CSS and learned JavaScript for the first time in order to animate and display user content. The biggest challenge for me was learning JavaScript from the ground up. I had this idea about a week before the Hackathon started and did not know what I was getting myself into beforehand. I really struggled specifically with the animations of the record player arm/needle, and using audio data to determine it's movement speed.
Overall, I'm most proud of the fact that I was able to learn multiple different frameworks within a short time span, and create a polished product I'm satisfied with. Although this is true, discJockey is far from being finished. In the future I plan to add more audio data (outside of the two files I have in my repository for demos sake), create record images dynamically based off of track lengths, and scan my personal record collection in order to create accurate and consistent graphics independent of Discogs.
Log in or sign up for Devpost to join the conversation.