Inspiration
Music has a unique ability to change our mood, help us focus, and bring back memories. We wanted to build something that makes music discovery feel more personal rather than simply relying on generic recommendations. This idea led to Mellow — a platform designed to understand a user's vibe and help them discover music that fits it.
What it does
Mellow is an AI-powered music discovery and recommendation platform. Users can explore music based on their preferences and mood, discover new songs and artists, and interact with an intuitive, personalized interface.
Mellow combines AI-powered recommendations, music APIs, and an interactive audio experience to make discovering music more engaging and personal.
How we built it
We built Mellow using a modern full-stack architecture:
- Frontend: React.js, TypeScript, Tailwind CSS, Framer Motion
- Backend: Node.js, Express.js
- Database: MongoDB
- Authentication: JWT
- State Management: Zustand
- AI: Gemini API
- Music APIs: Spotify API and iTunes API
- Audio: Web Audio API
The frontend communicates with our Node.js/Express backend, which handles authentication, API interactions, and application logic. MongoDB stores user-related data, while Gemini and music APIs power the recommendation and discovery experience.
Challenges we ran into
One of our biggest challenges was integrating multiple APIs while keeping the experience seamless. Different APIs have different response formats, limitations, and behaviors, so handling asynchronous requests and inconsistent data required careful error handling and debugging.
We also had to balance AI-generated recommendations with actual user preferences, ensuring that the recommendations felt useful rather than random.
Accomplishments that we're proud of
We're proud of turning a simple idea into a complete, functional music platform with AI, real-time API integration, authentication, database management, and an interactive audio experience.
We especially enjoyed bringing together technologies like Gemini, Spotify, and the Web Audio API into one cohesive application rather than building isolated features.
What we learned
Building Mellow taught us a lot about full-stack development and API integration, but more importantly, it taught us how to design around the user's experience.
We learned how to work with third-party APIs, manage asynchronous data flows, implement secure authentication, structure a scalable application, and integrate AI into a real-world product in a meaningful way.
What's next for Mellow
We want to make Mellow increasingly personalized and context-aware. Future plans include:
- 🎵 More advanced mood and context-based recommendations
- 🧠 Learning from user listening behavior to improve recommendations
- 🎙️ Voice-based music discovery
- 📊 Personalized listening insights and mood trends
- 🤝 Social playlists and collaborative music discovery
- 🎶 Smarter AI-generated playlists that adapt over time
Our goal is to make Mellow feel less like a music catalog and more like a personal music companion that understands your vibe.
Built With
- artificial-intelligence
- express.js
- framer-motion
- full-stack-development
- gemini-api
- html
- itunes-api
- javascript
- jwt-authentication
- mongodb
- music-recommendation
- node.js
- personalization
- react
- rest-api
- spotify
- tailwind-css
- typescript
- web-audio-api
- zustand