1. Tech Stack

| Layer | Technology | Reason | | Frontend | Next.js 14 App Router + Tailwind CSS | SSR, clean routing | | State | Zustand + Context API | Lightweight, no Redux | | Backend | Node.js + Express.js | Fast, familiar | | Database | MongoDB Atlas | Flexible schema | | Auth | JWT + Bcrypt + Passport.js (Google OAuth) | Secure, stateless | | Audio | Howler.js | Cross-browser audio control | | Music Data | Jamendo API | Free, legal, streamable audio | | AI | Gemini 2.5 Flash | Free tier, fast | | Deployment | Vercel (both frontend + backend) | Free, CI/CD |

2. System Architecture

Client (Next.js 14) → Axios with JWT headers → Express API (Node.js) → MongoDB Atlas (users, songs, playlists, likedSongs, playHistory, artists, albums) → Jamendo API (audio stream URLs) → Gemini 2.5 Flash (AI playlist + radio) → Firebase Storage (user avatar uploads)

3. Database Schema

users

{ _id, username, email, passwordHash, avatar, googleId, onboardingCompleted, preferredGenres: [String], followingArtists: [ObjectId], createdAt }

songs

{ _id, title, artist, artistId, album, albumId, genre, mood, duration, audioUrl, coverUrl, plays, createdAt }

playlists

{ _id, user, name, coverUrl, songs: [ObjectId], isAIGenerated, aiPrompt, createdAt }

likedSongs

{ _id, user, song, likedAt }

playHistory

{ _id, user, song, playedAt }

artists

{ _id, name, bio, genre, imageUrl, monthlyListeners, songs: [ObjectId] }

albums

{ _id, name, artist, artistId, coverUrl, songs: [ObjectId], releaseYear }

4. Folder Structure