Inspiration

The theme “Blast from the Past” made us think about cassette tapes — how they represented a very personal and emotional way to experience music. We wanted to bring that back, but with a modern, digital twist. Our idea was to let users build their own Side A and Side B mixtapes, based on their current mood.

What it does

Our web app asks users to select their mood (e.g., happy, sad, nostalgic, energetic). Based on their selection, we suggest songs that fit that vibe and split them into two sides — just like a cassette tape. The songs are displayed along with a virtual cassette UI. Users can preview clips of the songs and visually experience the feel of an old mixtape.

How we built it

We used React and JavaScript for the frontend, building a simple interface where users select a mood and get suggestions. Song metadata and mood mapping are stored in an SQL database, and we fetch relevant results using basic queries. For song previews and images, we used Cloudinary to host and serve media efficiently. The cassette UI was built using CSS and SVG to simulate the look and feel of old tapes.

Challenges we ran into

The biggest challenge was balancing retro design with modern usability. It was tricky to simulate cassette reels and UI interactions using CSS while keeping performance smooth. Another challenge was tagging songs properly in the SQL database so that mood suggestions felt accurate and meaningful. Managing audio files in Cloudinary and ensuring fast delivery also took some optimization.

Accomplishments we're proud of

We were able to create a working web app that feels nostalgic but functions like a clean, modern site. The mood-based recommendation logic is simple but effective, and the cassette UI adds a fun, visual element. We also managed to integrate audio previews and store everything cleanly in SQL and Cloudinary.

What we learned

We learned how to tie design inspiration (cassette tapes) into real user interaction. We also gained experience integrating Cloudinary for media hosting, working with SQL from a frontend, and building a single-page app in React that feels cohesive. It also pushed us to think about how mood-based recommendations can be implemented without heavy AI.

What's next for EchoTape

We want to expand the database with more songs and allow users to save their mixtapes. We’re also planning to let users customize tape labels and maybe even “share” their tape via a public link. In the future, we could integrate a simple login system, use AI for more intelligent mood tagging, and even add a way to create voice-based cassette intros, like old-school mixtapes.

Built With

Share this project:

Updates