Skip to content

adelelawady/reelwatch

BranchesTags

Repository files navigation

🎬 ReelWatch

ReelWatch Logo

Watch Instagram Reels together, in sync, in real time.

⚠️ Important Note: You'll need a new Instagram account to use ReelWatch. This ensures optimal performance and avoids conflicts with your main Instagram account.

ReelWatch brings people together through shared entertainment. Open Instagram together in real-time with live comments - watch funny reels, romantic moments, and viral content with your loved ones, no matter the distance.

🌐 Try it now: reelwatch.adelelawady.org | 🌐 Server: reelwatch-server

GitHub stars GitHub forks GitHub license GitHub repo size Last commit Issues React Native Expo TypeScript

🧠 How It Works

ReelWatch creates virtual rooms where users can watch Instagram Reels together in perfect synchronization. The app uses WebSocket connections to ensure everyone sees the same content at the same time, with features like remote control, live chat, and user management.

  1. Authentication - Connect your Instagram account (optional)
  2. Room Creation - Create a private room or join an existing one
  3. Real-time Sync - All users see the same reel simultaneously
  4. Interactive Features - Chat, control playback, and manage participants

� Screenshots

CHAT
 CHAT
 SIGN NAME
ROOMS
 BUILD IN KEYBOARD
 SHOW USER DATA [DEV]
SHOW LIKES COMMENTS[DEV]
 DEV TOOLS PANEL
 BUILD IN KEYBOARD
🎬 REELWATCH IN ACTION
WhatsApp.Video.2026-03-23.at.7.09.40.AM.mp4

✨ Features

  • 🔄 Real-time Synchronization - Watch Instagram Reels together with perfect sync
  • 💬 Live Chat - Chat with friends while watching reels
  • 🎮 Remote Control - Take control of playback for the entire room
  • 👥 Multi-user Rooms - Create and join virtual watch parties
  • 📱 Cross-platform - Works on iOS, Android, and Web
  • 🔐 Instagram Integration - Seamless authentication with Instagram
  • 🎯 Smooth UI - Beautiful, responsive interface with animations
  • ⚡ WebSocket Powered - Low-latency real-time communication

� Tech Stack

Frontend

  • React Native - Cross-platform mobile development
  • Expo - Development platform and toolchain
  • TypeScript - Type-safe JavaScript
  • Expo Router - File-based routing
  • React Native WebView - Instagram integration
  • React Native Reanimated - Smooth animations
  • React Native Gesture Handler - Touch interactions

Backend & Communication

  • WebSocket - Real-time bidirectional communication
  • Node.js Server - Room management and synchronization
  • 🖥 Server Repo: reelwatch-server

Development Tools

  • ESLint - Code linting and formatting
  • TypeScript Compiler - Type checking and compilation
  • Metro - JavaScript bundling

� Tech Stack

Frontend

  • React Native - Cross-platform mobile development
  • Expo - Development platform and toolchain
  • TypeScript - Type-safe JavaScript
  • Expo Router - File-based routing
  • React Native WebView - Instagram integration
  • React Native Reanimated - Smooth animations
  • React Native Gesture Handler - Touch interactions

Backend & Communication

  • WebSocket - Real-time bidirectional communication
  • Node.js Server - Room management and synchronization
  • 🖥 Server Repo: reelwatch-server

Development Tools

  • ESLint - Code linting and formatting
  • TypeScript Compiler - Type checking and compilation
  • Metro - JavaScript bundling

📦 Installation

Prerequisites

  • Node.js 18+
  • Node.js 18+
  • npm or yarn
  • Expo CLI (npm install -g @expo/cli)
  • Expo Go app on your device (for testing)
  • Expo CLI (npm install -g @expo/cli)
  • Expo Go app on your device (for testing)

Clone and Setup

Clone and Setup

# Clone the repository
# Clone the repository
git clone https://github.com/adelelawady/reelwatch.git
cd reelwatch

# Install dependencies

# Install dependencies
npm install

# Start the development server
npm start

Running the App

# Start with Expo CLI
npm start

# Run on specific platforms
npm run android     # Android
npm run ios         # iOS  
npm run web         # Web browser

Start the development server

npm start


### Running the App

```bash
# Start with Expo CLI
npm start

# Run on specific platforms
npm run android     # Android
npm run ios         # iOS  
npm run web         # Web browser

⚙️ Configuration

Server Configuration

Edit constants/config.ts to customize your deployment:

Server Configuration

Edit constants/config.ts to customize your deployment:

export const CONFIG = {
  SERVER_IP: "reelwatch.adelelawady.org",  // Your server domain
  SERVER_PORT: 443,                        // WebSocket port
  
  START_URL: "https://www.instagram.com/reels/DWEzH45guQJ/",
  SERVER_IP: "reelwatch.adelelawady.org",  // Your server domain
  SERVER_PORT: 443,                        // WebSocket port
  
  START_URL: "https://www.instagram.com/reels/DWEzH45guQJ/",
  LOGIN_URL: "https://www.instagram.com/accounts/login/",
  REQUIRE_LOGIN: false,                    // Force Instagram login
  
  REQUIRE_LOGIN: false,                    // Force Instagram login
  
  // Development flags
  DEV_MODE: false,
  DEV_DEFAULT_ROOM: "room1",
  DEV_MODE: false,
  DEV_DEFAULT_ROOM: "room1",
  DEV_USERNAME: "devuser",
} as const;

Environment Variables

Create a .env.local file for sensitive configuration:

# Server configuration
REACT_APP_SERVER_URL=wss://your-server.com
REACT_APP_SERVER_PORT=443

# Instagram integration (optional)
INSTAGRAM_CLIENT_ID=your_client_id
INSTAGRAM_CLIENT_SECRET=your_client_secret

Environment Variables

Create a .env.local file for sensitive configuration:

# Server configuration
REACT_APP_SERVER_URL=wss://your-server.com
REACT_APP_SERVER_PORT=443

# Instagram integration (optional)
INSTAGRAM_CLIENT_ID=your_client_id
INSTAGRAM_CLIENT_SECRET=your_client_secret

🚀 Usage

Basic Usage

  1. Launch the App - Start ReelWatch on your device
  2. Enter Your Name - Choose a display name for the session
  3. Create or Join Room - Either create a new room or join an existing one
  4. Start Watching - Browse and play Instagram Reels together

Room Management

  • Create Room: Generate a unique room ID and become the host
  • Join Room: Enter an existing room ID to join a watch party
  • Remote Control: Transfer playback control between participants
  • Chat: Send real-time messages to everyone in the room

Instagram Integration

  • Optional Login: Connect your Instagram account for enhanced features
  • Browse Reels: Access your Instagram feed and explore reels
  • Share Content: Easily share reels with the room

📡 API Reference

WebSocket Events

Client → Server

// Register user
{ type: "register", name: string }

// Room operations
{ type: "create_room", room: string, remote_control: boolean }
{ type: "join", room: string }
{ type: "leave" }
{ type: "delete_room", room: string }

// Control operations
{ type: "transfer_remote", to: string }
{ type: "list_rooms" }

Server → Client

// Registration
{ type: "registered" }

// Room information
{ type: "rooms_list", rooms: RoomInfo[] }
{ type: "room_state", room: RoomInfo }

// Room events
{ type: "room_created", room: string }
{ type: "joined", room: string }
{ type: "room_deleted", reason: string }
{ type: "remote_transferred", from: string, to: string }

// Error handling
{ type: "error", msg: string }

Room Interface

interface RoomInfo {
  id: string;
  owner: string;
  remote_control: boolean;
  controller: string | null;
  users: string[];
  user_count: number;
  current_reel: string;
}

Basic Usage

  1. Launch the App - Start ReelWatch on your device
  2. Enter Your Name - Choose a display name for the session
  3. Create or Join Room - Either create a new room or join an existing one
  4. Start Watching - Browse and play Instagram Reels together

Room Management

  • Create Room: Generate a unique room ID and become the host
  • Join Room: Enter an existing room ID to join a watch party
  • Remote Control: Transfer playback control between participants
  • Chat: Send real-time messages to everyone in the room

Instagram Integration

  • Optional Login: Connect your Instagram account for enhanced features
  • Browse Reels: Access your Instagram feed and explore reels
  • Share Content: Easily share reels with the room

📡 API Reference

WebSocket Events

Client → Server

// Register user
{ type: "register", name: string }

// Room operations
{ type: "create_room", room: string, remote_control: boolean }
{ type: "join", room: string }
{ type: "leave" }
{ type: "delete_room", room: string }

// Control operations
{ type: "transfer_remote", to: string }
{ type: "list_rooms" }

Server → Client

// Registration
{ type: "registered" }

// Room information
{ type: "rooms_list", rooms: RoomInfo[] }
{ type: "room_state", room: RoomInfo }

// Room events
{ type: "room_created", room: string }
{ type: "joined", room: string }
{ type: "room_deleted", reason: string }
{ type: "remote_transferred", from: string, to: string }

// Error handling
{ type: "error", msg: string }

Room Interface

interface RoomInfo {
  id: string;
  owner: string;
  remote_control: boolean;
  controller: string | null;
  users: string[];
  user_count: number;
  current_reel: string;
}

📂 Project Structure

reelwatch/
├── app/                    # Main application screens
│   ├── _layout.tsx        # Root layout configuration
│   ├── index.tsx          # Entry point (redirects to entrance)
│   ├── entrance.tsx       # Login and room selection
│   └── reel.tsx           # Main viewing experience
├── components/            # Reusable UI components
│   ├── reel/             # Reel-specific components
│   │   ├── KeyboardBar.tsx
│   │   ├── TopBar.tsx
│   │   └── UsersPanel.tsx
│   ├── ui/               # Base UI components
│   └── ...               # Other shared components
├── hooks/                # Custom React hooks
│   ├── useRooms.ts       # WebSocket room management
│   ├── useSync.ts        # Video synchronization
│   ├── useAuth.ts        # Instagram authentication
│   └── useToasts.ts      # Toast notifications
├── constants/            # Configuration constants
│   └── config.ts         # App configuration
├── utils/                # Utility functions
│   ├── authInjected.ts   # Instagram auth scripts
│   └── injected.js       # WebView injection scripts
├── assets/               # Static assets
└── scripts/              # Build and development scripts

├── app/ # Main application screens │ ├── _layout.tsx # Root layout configuration │ ├── index.tsx # Entry point (redirects to entrance) │ ├── entrance.tsx # Login and room selection │ └── reel.tsx # Main viewing experience ├── components/ # Reusable UI components │ ├── reel/ # Reel-specific components │ │ ├── KeyboardBar.tsx │ │ ├── TopBar.tsx │ │ └── UsersPanel.tsx │ ├── ui/ # Base UI components │ └── ... # Other shared components ├── hooks/ # Custom React hooks │ ├── useRooms.ts # WebSocket room management │ ├── useSync.ts # Video synchronization │ ├── useAuth.ts # Instagram authentication │ └── useToasts.ts # Toast notifications ├── constants/ # Configuration constants │ └── config.ts # App configuration ├── utils/ # Utility functions │ ├── authInjected.ts # Instagram auth scripts │ └── injected.js # WebView injection scripts ├── assets/ # Static assets └── scripts/ # Build and development scripts


## 🧪 Development

### Development Workflow

```bash
# Install dependencies
npm install

# Start development server
npm start

# Run linter
npm run lint

# Reset project (clean slate)
npm run reset-project

Code Quality

  • TypeScript: Full type safety throughout the codebase
  • ESLint: Consistent code style and error prevention
  • Component Architecture: Modular, reusable components
  • Custom Hooks: Encapsulated business logic

Testing

# Run type checking
npx tsc --noEmit

# Run linting
npm run lint

Development Workflow

# Install dependencies
npm install

# Start development server
npm start

# Run linter
npm run lint

# Reset project (clean slate)
npm run reset-project

Code Quality

  • TypeScript: Full type safety throughout the codebase
  • ESLint: Consistent code style and error prevention
  • Component Architecture: Modular, reusable components
  • Custom Hooks: Encapsulated business logic

Testing

# Run type checking
npx tsc --noEmit

# Run linting
npm run lint

🤝 Contributing

We welcome contributions! Please follow these guidelines: We welcome contributions! Please follow these guidelines:

  1. Fork the Repository

    git clone https://github.com/your-username/reelwatch.git

  2. Create a Feature Branch

    git checkout -b feature/amazing-feature

  3. Make Your Changes

    • Follow the existing code style
    • Add TypeScript types for new code
    • Update documentation if needed

  4. Test Your Changes

    npm run lint
npm start

  5. Submit a Pull Request

    • Describe your changes clearly
    • Include screenshots if applicable
    • Ensure all tests pass

Contribution Guidelines

  • 🎯 Focus: Bug fixes, features, and documentation
  • 📝 Style: Follow existing TypeScript patterns
  • 🧪 Testing: Ensure functionality works across platforms
  • 📖 Docs: Update README for API changes

  1. Fork the Repository

    git clone https://github.com/your-username/reelwatch.git

  2. Create a Feature Branch

    git checkout -b feature/amazing-feature

  3. Make Your Changes

    • Follow the existing code style
    • Add TypeScript types for new code
    • Update documentation if needed

  4. Test Your Changes

    npm run lint
npm start

  5. Submit a Pull Request

    • Describe your changes clearly
    • Include screenshots if applicable
    • Ensure all tests pass

Contribution Guidelines

  • 🎯 Focus: Bug fixes, features, and documentation
  • 📝 Style: Follow existing TypeScript patterns
  • 🧪 Testing: Ensure functionality works across platforms
  • 📖 Docs: Update README for API changes

📜 License

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

⭐ Support

If you find ReelWatch useful, please consider:

  • ⭐ Starring the repository - Show your support
  • 🐛 Reporting issues - Help us improve
  • 💡 Suggesting features - Share your ideas
  • 🔄 Forking and contributing - Make it even better

Get Help

Made with ❤️ by Adele Lawady

GitHub followers Twitter

About

ReelWatch brings people together through shared entertainment. Open Instagram together in real-time with live comments - watch funny reels, romantic moments, and viral content with your loved ones, no matter the distance.

reelwatch.adelelawady.org

Topics

react javascript python api instagram mobile react-native mobile-app live connect comments andoird expo instgram instgram-hacking instgram-bot instgram-web

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Contributors

Languages