Melodia is a full-stack cloud music streaming web app built as part of the Xebia Vibecoding Internship. It streams real licensed music via the Jamendo API, generates AI-curated playlists using Gemini 2.5 Flash, and features a DAW-style audio player with waveform visualization.
Built entirely through AI-assisted development — every prompt logged in Notion.
- Smart Playlist — type any vibe ("3am can't sleep", "gym motivation") and Gemini curates a perfect playlist from the catalog
- Song Radio — start a radio from any song, AI picks 10 songs with matching energy
- Mood of the Day — auto-filters your feed based on a daily mood
- Stream 200+ real licensed tracks via Jamendo API
- Full player with play/pause, seek, next/prev, shuffle, repeat
- Crossfade between songs (adjustable 1-8s)
- Queue management with Play Next
- Full-screen immersive mode
- CSS waveform visualization with seek
- Loop A→B markers
- Playback speed control (0.5x to 1.5x)
- Like songs, create playlists, manage library
- Dynamic playlist cover collages (1, 2, or 4-grid)
- AI Generated playlist badge
- Follow artists
- Browse by genre, mood, trending, new releases
- Live search with Artist/Genre/Duration filters
- Artist pages with bio and discography
- Album pages
- Time Machine — chronological listening history with heatmap
- Stats — top songs, artists, genre breakdown, listening streak
- All data is real and user-specific
Cmd+Kcommand palette — navigate, play, generate playlists by typing- Keyboard shortcuts (
Space,N,L,S,Rand more) - Mini floating player
- Toast notifications throughout
- No scrollbars anywhere
| Layer | Tech |
|---|---|
| Frontend | Next.js 14 (App Router), Tailwind CSS |
| State | Zustand (player), Context API (auth) |
| Backend | Node.js, Express.js |
| Database | MongoDB Atlas |
| Auth | JWT, Bcrypt, Google OAuth (Passport.js) |
| Audio | Howler.js + Jamendo API |
| AI | Google Gemini 2.5 Flash |
| Storage | Firebase Storage |
| Deployment | Vercel |
- Node.js 18+
- MongoDB Atlas account
- Jamendo API key
- Google Gemini API key
- Google OAuth credentials
- Firebase project
# Clone frontend
git clone https://github.com/SathvikaSingoti/melodia-client.git
# Clone backend
git clone https://github.com/SathvikaSingoti/melodia-server.git
# Install server dependencies
cd server
npm install
cp .env.example .env
# Fill in your env variables
# Install client dependencies
cd ../client
npm install
cp .env.local.example .env.local
# Fill in your env variables
# Seed the database
cd ../server
node scripts/seedJamendo.js
# Start development servers
# Terminal 1 - Backend
cd server && npm run dev
# Terminal 2 - Frontend
cd client && npm run devserver/.env PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
GEMINI_API_KEY=your_gemini_key
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
JAMENDO_CLIENT_ID=your_jamendo_client_id
CLIENT_URL=http://localhost:3000
client/.env.local NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_CLIENT_URL=http://localhost:3000
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_key
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_bucket
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
melodia-client/
src/
├── app/ # App Router pages
├── components/
├── store/ # Zustand player store
└── context/ # Auth context
melodia-server/
├── routes/
├── controllers/
├── models/
├── middleware/
└── scripts/ # DB seed scripts
Melodia uses a custom Autumn Fog color palette:
- Background:
#0e0d0d - Accent:
#c4a090(warm clay) - Secondary:
#a88070(deeper copper) - Text:
#ede8e4
All documentation lives in Notion:
Melodia was developed using AI-assisted development as part of the Xebia Vibecoding Internship — where the focus shifts from writing every line to directing AI tools effectively through architecture decisions, prompt engineering, and output verification.
Tools: Antigravity · Stitch · GitHub Copilot · Claude · Notion MCP
Every prompt is logged in the Notion Prompt Log.
Sathvika Singoti — Xebia Internship 2026