From 82d21f9a2c1fe1d30ecb4ec5df5079137eb051ad Mon Sep 17 00:00:00 2001 From: jared Date: Wed, 4 Feb 2026 20:46:24 -0500 Subject: [PATCH] docs: recreate README.md with detailed app description and setup instructions --- README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 74 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 18bc70e..e3c6631 100644 --- a/README.md +++ b/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 + 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) \ No newline at end of file