Playroom: Real-time Synchronized Music Player App 🎵👯🌏

Playroom is a real-time synchronized collaborative music player app. Multiple people can tune into the same virtual music room and play tunes at the same time in different places! Playroom was speed-built using Next.js, Express.js, MongoDB, and YJS in 2.5-days.

Stack Details

Frontend

• Next.js (React)
• Tailwind
• shadcn/ui
• Lucide
• Heroicons
• Framer Motion
• NextAuth.js

Backend

• Node.js
• Express.js
• Mongoose (MongoDB)
• Yjs

Develop

To develop locally, open two editor tabs, one for each subfolder.

In each editor terminal, run:

npm install

npm run dev

Build

In each editor terminal, run:

npm run build

Deploy

Frontend

The frontend can be easily deployed on Vercel by connecting to it through GitHub integration.

Backend

The backend can be deployed on a Cloud server or using Docker using the Dockerfile within the folder. I love using Cloudflare Tunnels for self-hosting ❤️.

YJS

To start a YJS server:

HOST=localhost PORT=1234 npx y-websocket

For more details, check out the y-websocket documentation.