venus-music

byShashank Parmar

Build a full-stack music streaming web app similar to Spotify. 🎯 Goal: Create a production-ready app with modern UI, backend APIs, authentication, and music player. ----------------------------------- 🖥️ FRONTEND ----------------------------------- Tech: - React.js (Vite) - Tailwind CSS - Axios - React Router Features: - Dark UI (Spotify-style: black + green accent) - Sidebar: Home, Search, Library - Top Navbar with profile - Homepage with playlists, albums, trending songs - Search page (search songs, artists) - Library page (liked songs, playlists) - Fully responsive (mobile + desktop) Components: - Sidebar - Navbar - SongCard - PlaylistCard - Player (bottom fixed) ----------------------------------- 🎵 MUSIC PLAYER ----------------------------------- - Play / Pause - Next / Previous - Seek bar (progress) - Volume control - Show song image, title, artist - Use HTML5 Audio API ----------------------------------- 🧠 BACKEND ----------------------------------- Tech: - Node.js + Express - MongoDB (Mongoose) Features: - JWT Authentication (signup/login) - User profile - Song upload (admin) - Store songs (title, artist, URL, thumbnail) - Create playlist - Like/unlike songs - Recently played API: - Auth APIs - Songs APIs - Playlist APIs - User APIs ----------------------------------- 📦 DATABASE SCHEMA ----------------------------------- User: - name - email - password - likedSongs[] - playlists[] Song: - title - artist - audioUrl - thumbnail - duration Playlist: - name - userId - songs[] ----------------------------------- ⚡ ADVANCED FEATURES ----------------------------------- - Search functionality - Basic recommendation (based on liked songs) - Recently played tracking - Loading skeletons - Error handling ----------------------------------- 🔐 SECURITY ----------------------------------- - Password hashing (bcrypt) - JWT middleware - Protected routes ----------------------------------- 🚀 DEPLOYMENT ----------------------------------- Frontend: Vercel Backend: Render / Railway Database: MongoDB Atlas Include: - Environment variables setup - Deployment steps ----------------------------------- 📁 OUTPUT FORMAT ----------------------------------- 1. Full folder structure (frontend + backend) 2. Step-by-step setup guide 3. All important code files 4. Commands to run project 5. Sample dummy data ----------------------------------- 🎨 UI QUALITY ----------------------------------- - Clean modern UI like Spotify - Smooth animations - Good spacing & typography ----------------------------------- Make sure the code is clean, modular, and beginner-friendly with comments.