docs: recreate README.md with detailed app description and setup instructions

README.md

@@ -1,16 +1,81 @@
-# React + Vite
+# SignSync
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+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.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- **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.
 
-## React Compiler
+## Tech Stack
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+- **Frontend**: React, Vite
+- **Backend**: Node.js, Express
+- **Database**: SQLite (for storing recording metadata)
+- **File Storage**: Local filesystem (video uploads)
 
-## Expanding the ESLint configuration
+## Getting Started
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+### 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)