A full-stack Spotify-inspired music streaming platform built with React, Node.js, Express, MongoDB, Socket.IO, Clerk Authentication, and Cloudinary. The application provides real-time messaging, online user presence, live listening activity, music streaming, and an admin dashboard for managing songs and albums.
https://real-time-audio-streaming-application.onrender.com
This project demonstrates how a modern music streaming platform is built using a scalable full-stack architecture.
The application combines:
- Secure Authentication using Clerk
- REST APIs with Express.js
- Real-time communication using Socket.IO
- MongoDB for persistent storage
- Cloudinary for audio and image hosting
- React + TypeScript frontend
- Zustand state management
- Responsive UI built with Tailwind CSS
Unlike traditional CRUD projects, this application implements real-time features similar to Spotify and Discord, including live chat, online user tracking, activity updates, and media streaming.
- Browse albums
- Browse songs
- Featured songs
- Trending songs
- Made For You playlists
- Audio player
- Previous / Next controls
- Volume control
- Queue management
- One-to-one messaging
- Instant message delivery
- Persistent chat history
- Online user detection
- Socket.IO powered communication
- Online users
- Offline users
- Live activity updates
- Current listening status
- Upload songs
- Upload albums
- Manage music library
- Dashboard analytics
- Clerk Authentication
- JWT based authorization
- Protected routes
- Admin authorization
- Session management
- Upload MP3 files
- Upload album artwork
- Cloudinary integration
- Temporary file cleanup using Cron Jobs
- Total songs
- Total albums
- Total registered users
- React
- TypeScript
- Vite
- Tailwind CSS
- Zustand
- Axios
- Clerk React SDK
- Socket.IO Client
- React Router DOM
- Node.js
- Express.js
- MongoDB
- Mongoose
- Socket.IO
- Clerk Express SDK
- Express File Upload
- Node Cron
- MongoDB Atlas
- Cloudinary
- Clerk
- Render
Browser
│
▼
React + TypeScript Frontend
│
Axios + Socket.IO Client
│
┌──────────────┴──────────────┐
│ │
▼ ▼
REST API WebSocket
│ │
└──────────────┬──────────────┘
▼
Express.js Backend
│
┌─────────────────┼─────────────────┐
│ │ │
Authentication Cloudinary Upload Socket.IO
│ │ │
└─────────────────┼─────────────────┘
▼
MongoDB Atlas
Real-time_audio_streaming_application
│
├── backend
│ ├── src
│ │ ├── controllers
│ │ ├── middleware
│ │ ├── models
│ │ ├── routes
│ │ ├── lib
│ │ ├── utils
│ │ └── index.js
│ │
│ └── package.json
│
├── frontend
│ ├── src
│ │ ├── components
│ │ ├── pages
│ │ ├── stores
│ │ ├── hooks
│ │ ├── providers
│ │ └── lib
│ │
│ └── package.json
│
├── package.json
│
└── README.md
git clone https://github.com/thvvamshi/Real-time_audio_streaming_application.git
cd Real-time_audio_streaming_applicationnpm install
cd backend
npm install
cd ../frontend
npm installPORT=5000
NODE_ENV=development
MONGODB_URI=
ADMIN_EMAIL=
CLIENT_URL=http://localhost:5173
CLERK_SECRET_KEY=
CLERK_PUBLISHABLE_KEY=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=VITE_CLERK_PUBLISHABLE_KEY=
VITE_API_URL=http://localhost:5000cd backend
npm run devcd frontend
npm run devThis application is deployed as a single Render Web Service, where the Express backend serves the built React frontend.
- No CORS issues
- Same-origin authentication
- Socket.IO works seamlessly
- Easier deployment and maintenance
- Single production URL
| Setting | Value |
|---|---|
| Environment | Node |
| Branch | master |
| Root Directory | Leave Blank |
| Build Command | npm run build |
| Start Command | npm start |
{
"scripts": {
"build": "npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend",
"start": "npm start --prefix backend"
}
}app.use(express.static("../frontend/dist"));
app.get("*", (req, res) => {
res.sendFile("../frontend/dist/index.html");
});- Push code to GitHub
- Render clones repository
- Backend dependencies install
- Frontend dependencies install
- React production build generated
- Express serves frontend build
- MongoDB Atlas connects
- Cloudinary uploads enabled
- Socket.IO initialized
- Application becomes live
The backend exposes a RESTful API secured using Clerk Authentication. All protected endpoints require a valid Clerk JWT in the Authorization header.
http://localhost:5000/api
https://real-time-audio-streaming-application.onrender.com/api
Returns the server status.
{
"status": "OK",
"message": "Server is running"
}Creates or updates the authenticated user after Clerk login.
Required
{
"_id": "...",
"clerkId": "...",
"fullName": "Vamshi Kumar",
"email": "example@gmail.com",
"imageUrl": "..."
}Returns all registered users except the current user.
Required
[
{
"_id": "...",
"fullName": "John Doe",
"imageUrl": "...",
"clerkId": "..."
}
]Returns complete chat history between the logged-in user and another user.
Required
[
{
"_id": "...",
"senderId": "...",
"receiverId": "...",
"content": "Hello",
"createdAt": "2026-06-25T10:30:00Z"
}
]Returns all songs.
Returns featured songs displayed on the home page.
[
{
"_id": "...",
"title": "Believer",
"artist": "Imagine Dragons",
"imageUrl": "...",
"audioUrl": "...",
"duration": 204
}
]Returns personalized recommendations.
Returns currently trending songs.
Returns a specific song.
Returns all albums.
[
{
"_id": "...",
"title": "Evolve",
"artist": "Imagine Dragons",
"imageUrl": "...",
"releaseYear": 2017
}
]Returns album details with associated songs.
{
"_id": "...",
"title": "Evolve",
"artist": "Imagine Dragons",
"songs": []
}All endpoints require the logged-in user to match the configured
ADMIN_EMAIL.
Checks whether the authenticated user is an administrator.
{
"admin": true
}or
{
"admin": false
}Creates a new album.
| Field | Type |
|---|---|
| title | Text |
| artist | Text |
| releaseYear | Number |
| imageFile | Image |
{
"success": true,
"album": {}
}Uploads a new song.
| Field | Type |
|---|---|
| title | Text |
| artist | Text |
| duration | Number |
| albumId | String |
| imageFile | Image |
| audioFile | MP3 |
{
"success": true,
"song": {}
}Returns dashboard statistics.
{
"totalUsers": 18,
"totalSongs": 72,
"totalAlbums": 12
}The application uses Socket.IO for all real-time functionality.
socket.emit("user_connected", userId);Registers a user as online.
socket.emit("send_message", {
senderId,
receiverId,
content
});Sends a private message.
socket.emit("update_activity", {
userId,
activity
});Updates the user's listening status.
Returns all online users.
[
"user1",
"user2",
"user3"
]Broadcast when a new user connects.
Broadcast when a user disconnects.
{
"_id":"...",
"senderId":"...",
"receiverId":"...",
"content":"Hello",
"createdAt":"..."
}Confirms successful message delivery.
Returns all user listening activities.
[
["user1","Listening to Believer"],
["user2","Idle"]
]Broadcasts activity changes.
User
↓
Clerk Login
↓
JWT Token
↓
Axios Authorization Header
↓
Express Middleware
↓
Protected Route
↓
Controller
↓
MongoDB
| Field | Type |
|---|---|
| _id | ObjectId |
| clerkId | String |
| fullName | String |
| String | |
| imageUrl | String |
| Field | Type |
|---|---|
| title | String |
| artist | String |
| imageUrl | String |
| audioUrl | String |
| duration | Number |
| albumId | ObjectId |
| Field | Type |
|---|---|
| title | String |
| artist | String |
| imageUrl | String |
| releaseYear | Number |
| Field | Type |
|---|---|
| senderId | String |
| receiverId | String |
| content | String |
| createdAt | Date |
{
"message":"Invalid request"
}{
"message":"Unauthorized"
}{
"message":"Access denied"
}{
"message":"Resource not found"
}{
"message":"Internal server error"
}- RESTful API Design
- Socket.IO WebSockets
- Cloudinary Media Storage
- MongoDB Atlas Cloud Database
- Real-time Online Presence
- JWT Authentication
- Responsive Design
- Protected Admin Dashboard
- Automatic Temporary File Cleanup
- Scalable Express Architecture
- Playlist Management
- Search Functionality
- Music Recommendations
- Recently Played
- Song Likes
- User Profiles
- Friend Requests
- Push Notifications
- Lyrics Integration
- Collaborative Listening Rooms
- Progressive Web App (PWA)
- Mobile Application
Verify:
MONGODB_URI- IP Whitelist
- Atlas Cluster Status
Verify:
- Publishable Key
- Secret Key
- Authorized Redirect URLs
Verify:
- Cloud Name
- API Key
- API Secret
Check:
- Backend is running
- Same origin in production
- Correct WebSocket URL
- CORS configuration
This project is licensed under the MIT License.
Vamshi Kumar
GitHub
https://www.linkedin.com/in/bodavamshikumar/
⭐ If you found this project helpful, consider giving it a star on GitHub.