# SignSync

SignSync is a web application designed for sign language interpreters to practice, record, and compare their interpretations against YouTube videos. It allows users to record themselves interpreting a source video and share their work with peers for collaborative feedback and comparison.

## Features

- **YouTube Integration**: seamless playback of YouTube videos as source material.
- **Webcam Recording**: Record your interpretation while watching the source video in real-time.
- **Synchronized Playback**: Watch your recorded interpretation synced perfectly with the original YouTube video.
- **Collaborative Comparison**:
  - Generate unique share links for your recordings.
  - A second interpreter can record their version alongside yours.
  - View two interpretations side-by-side for direct comparison.
- **Video Controls**:
  - Play/Pause all videos simultaneously.
  - Seek through the timeline to review specific sections.
  - Swap video positions for better viewing preference.
- **Headstart Offset**: Automatic 2-second headstart for the first recording to align interpretation flow.

## Tech Stack

- **Frontend**: React, Vite
- **Backend**: Node.js, Express
- **Database**: SQLite (for storing recording metadata)
- **File Storage**: Local filesystem (video uploads)

## Getting Started

### Prerequisites

- Node.js (v18+ recommended)
- npm

### Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd SignSync
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

### Running the Application

To run both the frontend and backend servers concurrently (recommended for development):

```bash
npm run dev:all
```

Alternatively, you can run them separately:

**Frontend (Vite):**
```bash
npm run dev
```

**Backend (Express):**
```bash
npm run server
```

The application will be available at `http://localhost:5173` (or the port shown in your terminal).
The backend server runs on `http://localhost:3001`.

## Project Structure

- `src/`: React frontend source code.
  - `components/`: Reusable UI components (`YouTubePlayer`, `WebcamRecorder`, `UserForm`).
- `server/`: Express backend source code.
  - `index.js`: Server entry point and API routes.
  - `signsync.db`: SQLite database file.
- `public/media/`: Directory where recorded videos are stored locally.

## License

[MIT](LICENSE)