🎵 RhythmX — Premium Audio Visualizer App

RhythmX is a high-performance, real-time music visualizer built with Next.js 16, MongoDB, Pusher, and Cloudinary. It features ultra-low latency synchronization and high-fidelity neon visuals.

🚀 Key Features

• Real-Time Party Sync: Zero-latency playback alignment (<50ms) using Pusher Client Events.
• High-Capacity Storage: Bypasses Vercel's 4.5MB limit using direct Cloudinary binary uploads.
• Dynamic Neon Visualizer: Real-time HSL frequency mapping for immersive, glowing waves.
• Social Interaction: Instant floating emoji reactions that sync across all connected devices.
• Progressive Web App (PWA): Installable on iOS, Android, and Desktop with full-screen support.

---

⚡ Technical Code Snippets

1. Zero-Latency Party Sync (Pusher)

We use Pusher's client-events to bypass the server entirely for sub-50ms synchronization across devices.

// Unified sync beam for play, pause, and seek eventsconstsendSyncEvent=(action: string,time: number)=>{if(partyChannelRef.current&&isHost){partyChannelRef.current.trigger('client-sync',{
action,
time,senderId: myUserId});}};

2. High-Capacity Cloudinary Upload

To bypass the 4.5MB Vercel Serverless limit, we stream binary files directly from the browser to Cloudinary.

constuploadToCloud=async(file: File)=>{constformData=newFormData();formData.append('file',file);formData.append('upload_preset','rhythmx_unsigned');constresponse=awaitfetch(`https://api.cloudinary.com/v1_1/${cloudName}/upload`,{method: 'POST',body: formData});constdata=awaitresponse.json();returndata.secure_url;// Returns the permanent cloud link};

3. Dynamic Neon Visualizer Logic

Maps raw audio frequency data to a smooth color-blended gradient with organic glowing blooms.

constgetBarColors=(index: number,total: number,height: number,isPlaying: boolean)=>{// Map frequency position to vibrant HSL color wheelconsthue=(index/total)*360;constintensity=height/100;// 0 to 1return{bg: isPlaying ? `hsla(${hue}, 80%, 65%, ${0.3+intensity*0.7})` : 'rgba(255,255,255,0.1)',glow: isPlaying ? `0 0 ${15*intensity}px hsla(${hue}, 80%, 65%, 0.5)` : 'none'};};

---

🏗️ System Architecture

... [Keep existing mermaid diagram] ...

graph TD
User((User))
Guest((Guest User))
subgraph "Frontend (PWA & Next.js)"
UI["Responsive React UI"]
Visualizer["Web Audio API Engine"]
PusherClient["Pusher JS (Websocket)"]
CloudinarySDK["Cloudinary Upload"]
end
subgraph "Backend (Next.js Edge API)"
MetaAPI["GET/POST /api/party & /api/songs"]
MongoClient["MongoDB Native Driver"]
PusherServer["Pusher Node Server"]
end
subgraph "Cloud Infrastructure"
Atlas[("MongoDB Atlas")]
PusherCloud(("Pusher Channels"))
Cloudinary[("Cloudinary Media")]
end
User --> UI
UI --> Visualizer
UI --> CloudinarySDK --> Cloudinary
UI --> MetaAPI
UI --> PusherClient
PusherClient -- "Client Event Sync" --> PusherCloud
PusherCloud -- "Zero-Latency Ping" --> Guest
MetaAPI --> MongoClient --> Atlas
MetaAPI --> PusherServer --> PusherCloud

Loading

---

🛠️ Tech Stack

• Framework: Next.js 16 (App Router + Turbopack)
• Styling: Vanilla CSS, Tailwind & Framer Motion
• Database: MongoDB Atlas
• Storage: Cloudinary (Large Media)
• Real-Time: Pusher (Pub/Sub)
• Deployment: Vercel

---

📦 Getting Started

Quick Start

1. npm install
2. Set up your .env (MongoDB, Pusher, Cloudinary).
3. npm run dev

---

📄 License

MIT License. Developed with ❤️ by CodeWithBasu