A full-stack web app for drilling Japanese grammar, vocabulary, and phrases from locally stored Instagram posts. The server indexes every `*.mp4` + matching `*.json` pair under `data/` and exposes them to a React/Vite frontend with a quiz wizard.
## Quick start
1. Install dependencies (root workspace):
```bash
npm install
```
2. Run both servers (frontend on 5173, backend on 5174):
```bash
npm run dev
```
- Vite proxies `/api` and `/data` to the Express server, so the client can use relative URLs.
3. Open the app at http://localhost:5173.
### Scripts
-`npm run dev`– concurrently runs `server` (Express + ts-node-dev) and `client` (Vite dev server).
-`npm run build`– builds the server TypeScript and Vite client.
-`npm run dev --workspace server` / `npm run dev --workspace client`– run either side individually.
## Data layout
Files live under `data/` (scanned recursively):
```
data/<POST_ID>/<FILENAME>.mp4
\_ <FILENAME>.json # quiz payload for that video
```
- Base filenames must match. Extra sidecars (`.raw.txt`, `.mp4.json`, images) are ignored.
- The JSON structure is tolerant but expects keys: `meta`, `items`, `quiz`, `ui_hints` (additional fields are ignored).
-`entry_id` is the path from `data/` to the mp4 **without** the `.mp4` extension (e.g., `C1abc/12345`). It is URL-encoded in routes/query params.
- Videos are served statically at `/data/...` by the backend by default; JSON is only accessible through the API.
- To host media elsewhere (e.g., a CDN), set `MEDIA_BASE_URL` to the base URL of your `data` directory (e.g., `https://www.victorgiers.com/japanischvideos/data`). Video links will point there; JSON files still need to be present locally for scanning.
