Magic Box

A real-time media sharing platform. Create channels, share links, and watch YouTube videos together with synchronized playback.

Demo

https://themagicbox.onrender.com/

Features

• Real-time Sharing - Share links instantly with everyone in your channel
• YouTube Sync - Watch YouTube videos together with synchronized play/pause
• Public & Private Channels - Create public channels or private ones shared only via link
• Multiple Media Types - Support for YouTube, Spotify embeds, images, PDFs, and more

Tech Stack

• Framework: Next.js with App Router
• Language: TypeScript
• Styling: Tailwind CSS + shadcn/ui
• Database: MongoDB Atlas with Prisma
• Real-time: Socket.IO
• Linting/Formatting: Biome
• Spam Protection: Google reCAPTCHA v3

Getting Started

Prerequisites

• Node.js >= 20
• A MongoDB database, for example the MongoDB Atlas free tier

Installation

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Set up your environment variables:

   cp .env.example .env
   

   Configure the following in your .env file:

   • DATABASE_URL - MongoDB connection string (e.g., mongodb+srv://user:pass@cluster.mongodb.net/xyz)
   • NEXT_PUBLIC_RECAPTCHA_SITE_KEY - reCAPTCHA site key (optional)
   • RECAPTCHA_SECRET_KEY - reCAPTCHA secret key (optional)

4. Set up the database:

   npx prisma db push
   

5. Start the development server:

   npm run dev
   

   The app will be available at http://localhost:3000

Running Tests

npm test

Deployment

This project is ready to deploy to platforms like Render, Vercel, or Railway. Make sure to:

1. Set up a MongoDB database like Atlas cluster and get your connection string
2. Configure environment variables
3. Run npx prisma db push to initialize the database schema

License

This project is licensed under the MIT License - see the LICENSE file for details.