TuneTalk

Modern Music Streaming Platform

A full-stack, Spotify-inspired music streaming application that lets users sign up, explore a rich music library, curate personalized playlists, and enjoy seamless playback — with a sleek, responsive UI and comprehensive social features.

Overview

TuneTalk is a modern music streaming platform built with cutting-edge web technologies. It delivers an intuitive, responsive experience that empowers users to discover, organize, and enjoy music with features like personalized playlists, advanced search, and a full-featured music player.

The platform provides:

A secure authentication system with OAuth and session management
A comprehensive music library with browsing and discovery
Playlist management for creating and organizing music collections
A responsive, mobile-first design that works seamlessly across all devices
Real-time playback controls with shuffle, repeat, and queue management
Dark mode for comfortable viewing at any time

Screenshots

Product Preview

Full-width hero section with product preview.

Features

Music Discovery & Browsing

Feature	Description
Music Library	Browse an extensive collection of songs, albums, and artists
Advanced Search	Instantly find songs by title, artist, or album
Artist & Album Pages	Dedicated pages showcasing artist information and discographies
Trending & Recommendations	Personalized suggestions based on user activity

Playlist Management

Feature	Description
Create Playlists	Build custom music collections with an intuitive interface
Edit Playlists	Rename, reorder, and manage playlist content
Delete Playlists	Remove playlists and manage library cleanup
Share Playlists	Share collections with other users or via link

Playback & Controls

Feature	Description
Music Player	Full-featured player with play, pause, and skip controls
Shuffle & Repeat	Shuffle songs or repeat entire playlists/tracks
Volume Control	Adjust volume with a smooth slider interface
Progress Tracking	Real-time progress bar with seek functionality
Queue Management	View and manage upcoming tracks in the queue

User Experience

Feature	Description
User Authentication	Secure sign-up and login with OAuth support
User Profiles	Personalized user profiles with favorites and listening history
Responsive Design	Optimized for desktop, tablet, and mobile devices
Dark Mode	Eye-friendly dark theme with seamless toggle
Persistent Sessions	Remember user preferences and playback state

Tech Stack

Frontend

React 18 — UI library with hooks
Vite 5 — Next generation frontend build tool
TypeScript — Static type checking for type safety
Tailwind CSS 3 — Utility-first CSS framework
Radix UI — Unstyled, accessible components
Lucide React — Beautiful icon library
Zustand — Lightweight state management
Axios — HTTP client for API requests
React Router DOM v6 — Client-side routing
Socket.IO Client — Real-time communication
React Hot Toast — Toast notifications
Clerk React — Authentication & user management

Backend

Node.js — JavaScript runtime
Express.js 4 — Web application framework
MongoDB 8 — NoSQL database
Mongoose — MongoDB object modeling
Socket.IO — Real-time bidirectional communication
Clerk Express — Authentication middleware
Cloudinary — Image/media management service
Node Cron — Task scheduling
Express File Upload — File handling
CORS — Cross-Origin Resource Sharing

Architecture

┌──────────────────────────────────────────────────────────────┐
│               Frontend (React + Vite)                        │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ React Components (UI Layer)                            │ │
│  │ - Music Library                                        │ │
│  │ - Playlist Management                                 │ │
│  │ - Music Player                                        │ │
│  │ - User Profile                                        │ │
│  └────────────────────────────────────────────────────────┘ │
│  - State Management: Zustand                               │
│  - Routing: React Router v6                                │
│  - Styling: Tailwind CSS + Radix UI                        │
└──────────────────────┬───────────────────────────────────────┘
                       │ HTTP + WebSocket (Socket.IO)
                       ▼
┌──────────────────────────────────────────────────────────────┐
│             Backend (Express.js)                             │
│  ┌────────────────────────────────────────────────────────┐ │
│  │              API Routes & Services                     │ │
│  │  - /api/auth       (Clerk)                             │ │
│  │  - /api/songs      (Music library)                     │ │
│  │  - /api/albums     (Album management)                  │ │
│  │  - /api/playlists  (User playlists)                    │ │
│  │  - /api/admin      (Admin controls)                    │ │
│  │  - /api/stats      (Analytics)                         │ │
│  └────────────────────────────────────────────────────────┘ │
│  - Real-time: Socket.IO                                     │
│  - Media: Cloudinary integration                            │
│  - Scheduling: Node Cron                                    │
└──────────────────────┬───────────────────────────────────────┘
                       │ Database Query
                       ▼
┌──────────────────────────────────────────────────────────────┐
│          MongoDB (NoSQL Database)                            │
│  - Users & Authentication                                   │
│  - Songs & Albums                                           │
│  - Playlists                                                │
│  - User Activity & Statistics                               │
└──────────────────────────────────────────────────────────────┘

Data Flow

User Interaction
     │
     ▼
React Component (Frontend)
     │
     ├─ State Management (Zustand)
     ├─ API Call (Axios)
     └─ Real-time Events (Socket.IO)
             │
             ▼
        Express.js API
             │
             ├─ Route Handler
             ├─ Clerk Authentication
             ├─ Business Logic
             ├─ Cloudinary (Media)
             └─ Mongoose Query
                     │
                     ▼
                  MongoDB
                     │
                     ▼
              Response to Client
                     │
                     ▼
          UI Update (React)

Getting Started

Prerequisites

Node.js v18 or higher
npm v10 or higher
MongoDB (local or cloud via MongoDB Atlas)
A Clerk account for authentication
A Cloudinary account for media management
Git for version control

Installation

# 1. Clone the repository
git clone https://github.com/your-username/tunetalk.git
cd tunetalk

# 2. Install backend dependencies
cd backend
npm install

# 3. Install frontend dependencies
cd ../frontend
npm install

Environment Variables

Backend - Create `.env` in `/backend`:

# Server Configuration
PORT=3000
NODE_ENV=development

# MongoDB
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/tunetalk

# Clerk Authentication
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

# Cloudinary Media Management
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# CORS
CORS_ORIGIN=http://localhost:5173

Frontend - Create `.env.local` in `/frontend`:

# API Configuration
VITE_API_BASE_URL=http://localhost:3000/api

# Clerk Configuration
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

Running the App

Terminal 1 - Start Backend Server:

cd backend
npm run dev

Backend will run on http://localhost:3000

Terminal 2 - Start Frontend Dev Server:

cd frontend
npm run dev

Open http://localhost:5173 in your browser.

Production Build:

# Frontend
cd frontend
npm run build

# Backend
cd backend
npm start

Project Structure

TuneTalk/
│
├── frontend/                     # React + Vite Frontend
│   ├── src/
│   │   ├── pages/                # Route pages
│   │   │   ├── Home.tsx
│   │   │   ├── Library.tsx
│   │   │   ├── Playlists.tsx
│   │   │   └── Profile.tsx
│   │   │
│   │   ├── components/           # Reusable React components
│   │   │   ├── Player/           # Music player component
│   │   │   ├── Sidebar/          # Navigation sidebar
│   │   │   ├── Playlist/         # Playlist components
│   │   │   ├── Header/           # Header component
│   │   │   ├── MusicCard/        # Song/album cards
│   │   │   └── ui/               # Radix UI components
│   │   │
│   │   ├── hooks/                # Custom React hooks
│   │   │   ├── usePlayer.ts      # Player state management
│   │   │   ├── useAuth.ts        # Authentication hook
│   │   │   └── useMusicLibrary.ts# Music library hook
│   │   │
│   │   ├── lib/                  # Utility functions
│   │   │   ├── api.ts            # Axios API client
│   │   │   ├── socket.ts         # Socket.IO setup
│   │   │   └── utils.ts          # Helper functions
│   │   │
│   │   ├── store/                # Zustand state management
│   │   │   ├── playerStore.ts
│   │   │   ├── authStore.ts
│   │   │   └── musicStore.ts
│   │   │
│   │   ├── types/                # TypeScript definitions
│   │   │   └── index.ts
│   │   │
│   │   ├── App.tsx               # Main app component
│   │   └── main.tsx              # Entry point
│   │
│   ├── public/                   # Static assets
│   ├── .env.local                # Environment variables
│   ├── vite.config.ts            # Vite config
│   ├── tsconfig.json             # TypeScript config
│   ├── tailwind.config.js        # Tailwind config
│   └── package.json              # Dependencies
│
├── backend/                      # Express.js Backend
│   ├── src/
│   │   ├── routes/               # API route handlers
│   │   │   ├── song.route.js     # Song endpoints
│   │   │   ├── album.route.js    # Album endpoints
│   │   │   ├── user.route.js     # User endpoints
│   │   │   ├── admin.route.js    # Admin endpoints
│   │   │   ├── auth.route.js     # Auth endpoints
│   │   │   └── stat.route.js     # Statistics endpoints
│   │   │
│   │   ├── models/               # Mongoose schemas
│   │   │   ├── Song.js
│   │   │   ├── Album.js
│   │   │   ├── User.js
│   │   │   └── Stats.js
│   │   │
│   │   ├── lib/                  # Utility functions
│   │   │   ├── db.js             # MongoDB connection
│   │   │   ├── socket.js         # Socket.IO initialization
│   │   │   └── cloudinary.js     # Cloudinary helpers
│   │   │
│   │   ├── middleware/           # Express middleware
│   │   │   ├── auth.js           # Clerk authentication
│   │   │   └── errorHandler.js   # Error handling
│   │   │
│   │   ├── seeds/                # Database seed scripts
│   │   │   ├── songs.js
│   │   │   └── albums.js
│   │   │
│   │   ├── controllers/          # Business logic (optional)
│   │   │
│   │   └── index.js              # App entry point
│   │
│   ├── .env                      # Environment variables
│   ├── package.json              # Dependencies
│   └── nodemon.json              # Nodemon config

Key Components

Music Player

A fully-featured player component with:

Play/pause controls
Previous/next track navigation
Shuffle and repeat modes
Volume control
Progress bar with seek functionality
Real-time duration display

Sidebar Navigation

Quick access to home, music library, and playlists
User profile menu
Theme toggle (dark mode)
Create playlist button

Playlist Manager

Create new playlists
Add/remove songs from playlists
Rename and delete playlists
Drag-and-drop reordering

Deployment

Frontend - Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy from frontend directory
cd frontend
vercel --prod

Set VITE_API_BASE_URL environment variable in Vercel settings.

Backend - Railway / Render / Heroku

Environment Variables:

MONGODB_URI — MongoDB Atlas connection string
CLERK_SECRET_KEY — Clerk secret key
CLOUDINARY_* — Cloudinary credentials
PORT — Port number (default: 3000)
NODE_ENV — Set to production

# Start production server
cd backend
npm start

Docker Deployment

Backend Dockerfile:

FROM node:20-alpine
WORKDIR /app
COPY backend/package*.json ./
RUN npm ci --omit=dev
COPY backend/src ./src
EXPOSE 3000
CMD ["npm", "start"]

Frontend Dockerfile:

FROM node:20-alpine AS build
WORKDIR /app
COPY frontend/package*.json ./
RUN npm ci
COPY frontend/src ./src
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

NPM Scripts

Frontend Scripts (from `/frontend`)

Script	Description
`npm run dev`	Start Vite dev server (port 5173)
`npm run build`	Build optimized production bundle
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint checks

Backend Scripts (from `/backend`)

Script	Description
`npm run dev`	Start server with nodemon (hot reload)
`npm start`	Start production server
`npm run seed:songs`	Seed database with sample songs
`npm run seed:albums`	Seed database with sample albums

Built with React, Express.js, MongoDB, and Vite

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
.claude		.claude
backend		backend
frontend		frontend
README.md		README.md
thumbnail.png		thumbnail.png

Folders and files

Latest commit

History

Repository files navigation

TuneTalk

Modern Music Streaming Platform

Table of Contents

Overview

Screenshots

Product Preview

Features

Music Discovery & Browsing

Playlist Management

Playback & Controls

User Experience

Tech Stack

Frontend

Backend

Architecture

Data Flow

Getting Started

Prerequisites

Installation

Environment Variables

Backend - Create .env in /backend:

Frontend - Create .env.local in /frontend:

Running the App

Project Structure

Key Components

Music Player

Sidebar Navigation

Playlist Manager

Deployment

Frontend - Vercel

Backend - Railway / Render / Heroku

Docker Deployment

NPM Scripts

Frontend Scripts (from /frontend)

Backend Scripts (from /backend)

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Backend - Create `.env` in `/backend`:

Frontend - Create `.env.local` in `/frontend`:

Frontend Scripts (from `/frontend`)

Backend Scripts (from `/backend`)

Packages