Inspiration
I wanted music recommendations when I don't know what specific song I want to listen to at the moment, or when I get sick of all my playlists currently in my library.
What it does
Takes the text (natural language) that a user types into the prompt box, then generates a playlist that consists of 17 songs that best match what the user is looking for based on the text. The user can also click on the song titles to access YouTube, where they can view the music videos or listen to the audio. If the user does not like the music generated, then they can ask Gemini to curate another playlist for them.
How we built it
I built the web app by using HTML, CSS, and vanilla JavaScript for the frontend, and Node.js with Express for the backend. I used Google's Gemini API to handle playlist generation based on natural language input from the user. The app sends the user's prompt to the backend, which constructs a tailored prompt for Gemini and returns a structured playlist. I designed the interface with Figma and styled it manually to match the intended aesthetic.
Challenges we ran into
This was my first solo full-stack project, so I had to learn a lot about API integration, frontend-backend communication, and UX design. I kept getting confused with the API integration and getting the frontend and backend to do what they were intended to do. Eventually, through different videos and multiple sources online, I was able to figure things out.
Accomplishments that we're proud of
I am proud of being able to finish the project on time and learning something new on the spot, then applying it as I was learning. I am also proud of the fact that I was able to complete this on my own.
What we learned
This was my first time building a full-stack project completely on my own, and I learned how to connect a frontend with a backend using Express.js. I also learned how to work with APIs - specifically prompt engineering with the Gemini API, handling its response, and formatting that data in a user-friendly way. On the frontend, I gained experience with DOM manipulation and improving user experience with animations and loaders. Most importantly, I learned how to problem-solve and build something end-to-end even when I didn't have all the answers.
Log in or sign up for Devpost to join the conversation.