Skip to content

README.md

Latest commit

 

History

History
160 lines (111 loc) · 4.23 KB

README.md

File metadata and controls

160 lines (111 loc) · 4.23 KB

SideRow 🍿

SideRow is a real-time video synchronization platform that allows friends to watch videos together in perfect sync. Built with a modern tech stack, it features instant room creation, synchronized playback controls, and real-time chat.

License Next.js React TypeScript Redis

✨ Features

  • Synchronized Playback: Play, pause, and seek videos in real-time across all connected clients.
  • Multi-Source Support: Powered by react-player, supporting YouTube, SoundCloud, Vimeo, and more.
  • Real-time Chat: Integrated chat system with emoji support to discuss the video as you watch.
  • Room System: Create unique rooms instantly or join via Room ID/Link.
  • User Presence: See who is currently in the room with visual avatars.
  • Drift Correction: Automatic server-side clock synchronization to ensure no user falls behind.
  • Modern UI: Built with Shadcn UI and Tailwind CSS v4 for a sleek, responsive experience.

🛠️ Tech Stack

Frontend

  • Framework: Next.js 15 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS v4
  • Components: Shadcn UI, Lucide React
  • Real-time: Socket.io Client
  • Media: React Player

Backend

  • Runtime: Node.js
  • Framework: Express.js
  • Language: TypeScript
  • Real-time: Socket.io
  • Database: Redis (for room state and chat history persistence)

🚀 Getting Started

Prerequisites

Ensure you have the following installed on your machine:

  • Node.js (v18 or newer)
  • pnpm (v10.18.3 recommended)
  • Docker (optional, for running Redis locally)

1. Clone the Repository

git clone [https://github.com/amitb0ra/siderow.git](https://github.com/amitb0ra/siderow.git)
cd siderow

2. Install Dependencies

This project uses a monorepo structure. Install dependencies for both frontend and backend from the root:

pnpm install

3. Infrastructure Setup (Redis)

The application requires a Redis instance to store room states and chat history.

Option A: Run via Docker (Recommended)

docker run -d -p 6379:6379 --name siderow-redis redis:latest

Option B: Local Installation Ensure your local Redis server is running on port 6379.

4. Environment Configuration

Set up the environment variables for both the backend and frontend.

Backend:

cp backend/.env.example backend/.env

Open backend/.env and update the REDIS_URL if your Redis setup differs from the default:

REDIS_URL="redis://default:your_redis_password@localhost:6379"
# If using the docker command above with no password:
# REDIS_URL="redis://localhost:6379"

Frontend:

cp frontend/.env.example frontend/.env

Default content:

NEXT_PUBLIC_SERVER_URL="http://localhost:8080"

5. Run the Application

You can start both the backend and frontend concurrently with a single command from the root directory:

pnpm start
  • Frontend will be available at: http://localhost:3000
  • Backend will run on: http://localhost:8080

📂 Project Structure

siderow/
├── backend/                # Express & Socket.io server
│   ├── src/
│   │   ├── index.ts        # Entry point & Socket logic
│   │   └── ...
│   └── ...
├── frontend/               # Next.js application
│   ├── src/
│   │   ├── app/            # App Router pages
│   │   ├── components/     # UI Components (Shadcn)
│   │   ├── lib/            # Utilities (Socket client, etc.)
│   │   └── ...
│   └── ...
└── package.json            # Root scripts

🤝 Development

To run services individually for debugging:

Terminal 1 (Backend):

pnpm --filter backend dev

Terminal 2 (Frontend):

pnpm --filter frontend dev

📜 License

This project is licensed under the ISC License.
⚡