🎵 Streamify

Real-time audio streaming platform for music, messaging, and live listening activity.

Overview

Streamify is a full-stack, Spotify-inspired audio streaming application built to demonstrate modern web application architecture, real-time communication, secure authentication, cloud media management, and responsive UI development.

The platform supports music discovery and playback alongside real-time messaging, online presence, listening activity, and an admin dashboard for managing the music library.

Features

Music

Featured, trending, and Made For You sections
Album and song browsing
Audio playback with queue management
Previous / next controls
Volume control

Real-time

One-to-one messaging
Instant message delivery
Online/offline presence
Live listening activity
Socket.IO-based events

Administration

Protected admin dashboard
Manual album creation
Manual song uploads
Album artwork and audio management
Platform statistics

Platform

Clerk authentication
JWT-based API authorization
MongoDB persistence
Cloudinary media storage
Temporary upload cleanup
Responsive frontend

Architecture

                         ┌──────────────────┐
                         │     Browser      │
                         │ React + TS + UI  │
                         └────────┬─────────┘
                                  │
                    ┌─────────────┴─────────────┐
                    │                           │
                 REST API                  Socket.IO
                    │                           │
                    └─────────────┬─────────────┘
                                  │
                         ┌────────▼────────┐
                         │  Express.js API │
                         └───────┬─────────┘
                                 │
              ┌──────────────────┼──────────────────┐
              │                  │                  │
           Clerk              MongoDB           Cloudinary
       Authentication         Database          Media Storage

Tech Stack

Area	Technology
Frontend	React, TypeScript, Vite
Styling	Tailwind CSS
State	Zustand
API Client	Axios
Routing	React Router
Backend	Node.js, Express.js
Database	MongoDB, Mongoose
Real-time	Socket.IO
Authentication	Clerk
Media	Cloudinary
Deployment	Render

Project Structure

streamify/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── lib/
│   │   ├── utils/
│   │   └── index.js
│   └── package.json
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── features/
│   │   ├── layout/
│   │   ├── pages/
│   │   ├── providers/
│   │   ├── stores/
│   │   ├── lib/
│   │   └── types/
│   └── package.json
│
├── package.json
├── .gitignore
└── README.md

Requirements

Node.js 18+
npm
MongoDB Atlas
Clerk account
Cloudinary account

Getting Started

1. Clone

git clone https://github.com/thvvamshi/Real-time_audio_streaming_application.git
cd Real-time_audio_streaming_application

2. Install

npm install

cd backend
npm install

cd ../frontend
npm install

cd ..

3. Configure Environment

Create backend/.env:

PORT=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=

Create frontend/.env:

VITE_CLERK_PUBLISHABLE_KEY=
VITE_API_URL=http://localhost:5000

4. Start Development Servers

Backend:

cd backend
npm run dev

Frontend:

cd frontend
npm run dev

Application:

http://localhost:5173

API:

http://localhost:5000

Health check:

GET /health

API Reference

Base URL

Development: http://localhost:5000/api
Production:  /api

Authentication

Method	Endpoint	Access
POST	`/auth/callback`	Authenticated

Users

Method	Endpoint	Access
GET	`/users`	Authenticated
GET	`/users/messages/:userId`	Authenticated

Songs

Method	Endpoint	Access
GET	`/songs`	Public
GET	`/songs/featured`	Public
GET	`/songs/made-for-you`	Public
GET	`/songs/trending`	Public
GET	`/songs/:songId`	Public

Albums

Method	Endpoint	Access
GET	`/albums`	Public
GET	`/albums/:albumId`	Public

Admin

Method	Endpoint	Access
GET	`/admin/check`	Admin
POST	`/admin/albums`	Admin
POST	`/admin/songs`	Admin

Statistics

Method	Endpoint	Access
GET	`/stats`	Authenticated

Protected requests use a Clerk JWT:

Authorization: Bearer <clerk-jwt>

Socket.IO Events

Client → Server

user_connected
send_message
update_activity

Server → Client

users_online
user_connected
user_disconnected
receive_message
message_sent
activities
activity_updated

Authentication Flow

Clerk Login
     ↓
JWT
     ↓
Axios Authorization Header
     ↓
Clerk / Express Middleware
     ↓
Protected Route
     ↓
Controller
     ↓
MongoDB

Media & Data Flow

Streamify does not require a database seed script. Music and albums are managed manually through the protected Admin Dashboard.

Admin Dashboard
      ↓
Upload Song / Album
      ↓
Express API
      ↓
Cloudinary
      ↓
Media URL
      ↓
MongoDB
      ↓
Frontend

Production Deployment

Streamify can be deployed as a single Render Web Service. The backend serves the compiled React application from frontend/dist.

Root package.json:

{
  "scripts": {
    "build": "npm ci --prefix backend && npm install --prefix frontend && npm run build --prefix frontend",
    "start": "npm start --prefix backend"
  }
}

Render Configuration

Setting	Value
Environment	Node
Branch	`master`
Root Directory	Leave blank
Build Command	`npm run build`
Start Command	`npm start`

Deployment Flow

GitHub
  ↓
Render
  ↓
Install dependencies
  ↓
Build React frontend
  ↓
Express serves frontend/dist
  ↓
MongoDB + Cloudinary + Clerk
  ↓
Streamify

Security

Authentication handled by Clerk
JWT authorization for protected APIs
Server-side admin authorization
Secrets stored in environment variables
CORS configured for application origins
Temporary upload files cleaned automatically
Production frontend served through the backend

Development Notes

Music data is intentionally managed through the Admin Dashboard rather than a seed script.

For local development, make sure MongoDB, Clerk, and Cloudinary credentials are configured before starting the backend.

Roadmap

License

This project is licensed under the MIT License.

Author

Vamshi Kumar

GitHub: https://github.com/thvvamshi
LinkedIn: https://www.linkedin.com/in/bodavamshikumar/

Built with React, Node.js, MongoDB, Socket.IO, Clerk, and Cloudinary.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
backend		backend
frontend		frontend
README.md		README.md
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation