A Spotify clone built with Next.js, FastAPI, and PostgreSQL.
- 🎨 Spotify-themed dark UI with Tailwind CSS
- 🔐 JWT Authentication (register, login, protected routes)
- 🎵 Audio Player with play/pause, skip, volume controls
- 📚 Browse songs, albums, and artists
- 🔍 Search with live results
- ❤️ Liked Songs and playlists
- 📱 Responsive design
| Layer | Technology |
|---|---|
| Frontend | Next.js 14, TypeScript, Tailwind CSS, Zustand |
| Backend | FastAPI, SQLAlchemy (async), Pydantic v2 |
| Database | PostgreSQL 16 (Docker) |
| Auth | JWT (python-jose), bcrypt |
- Docker Desktop
- Python 3.10+
- Node.js 18+
cd backend
docker-compose up -dcd backend
python -m venv venv
.\venv\Scripts\activate # Windows
pip install -r requirements.txt
uvicorn app.main:app --reloadThe API will be at http://localhost:8000 (Swagger docs at /docs)
cd frontend
npm install
npm run devmusic247/
├── backend/
│ ├── app/
│ │ ├── main.py # FastAPI app
│ │ ├── database.py # SQLAlchemy async
│ │ ├── seed.py # Sample data
│ │ ├── models/ # Database models
│ │ ├── schemas/ # Pydantic schemas
│ │ ├── routers/ # API endpoints
│ │ └── auth/ # JWT utilities
│ ├── docker-compose.yml
│ └── requirements.txt
│
└── frontend/
├── src/
│ ├── app/ # Next.js pages
│ ├── components/ # React components
│ ├── store/ # Zustand stores
│ └── utils/ # API client, types
├── package.json
└── tailwind.config.js
| Endpoint | Method | Description |
|---|---|---|
/api/auth/register |
POST | Create account |
/api/auth/login |
POST | Login (returns JWT) |
/api/songs |
GET | List songs |
/api/songs/featured |
GET | Popular tracks |
/api/albums/{id} |
GET | Album with tracks |
/api/artists/{id} |
GET | Artist discography |
/api/playlists |
GET/POST | User playlists |
/api/library/liked |
GET/POST | Liked songs |
The database is seeded with demo content:
| Artist | Album |
|---|---|
| The Midnight | Endless Summer |
| ODESZA | A Moment Apart |
| Tycho | Dive |
| Bonobo | Migration |
| Flume | Hi This Is Flume |
MIT