benjamin-matapo/pharmquest

# PharmQuest An interactive educational web game that teaches pharmacology and the history of germ theory to secondary school students (ages 11–16). Built by **teachers, for classrooms**. ## Tech Stack - **Next.js 14** (App Router, TypeScript) - **Tailwind CSS** for styling - **Zustand** for state management - **FastAPI** (Python) microservice for dose-response curve calculations - **SVG** for all visuals (no raster images or external game engine) ## Local Development ### Prerequisites - Node.js 18+ - Python 3.12+ - `pip` (Python package manager) ### Setup ```bash # Install Node.js dependencies npm install # Install Python dependencies pip install -r requirements.txt # Start the FastAPI server (in a separate terminal) uvicorn api.index:app --reload --port 8000 # Start the Next.js dev server (in another terminal) npm run dev ``` The Next.js dev server runs on `localhost` and proxies `/api/py/*` requests to the FastAPI server at `localhost`. ### Build ```bash npm run build ``` ## Vercel Deploy ```bash # Install Vercel CLI if you haven't already npm install -g vercel # Deploy vercel --prod ``` The `vercel.json` and `api/index.py` are configured so that: - The Next.js app uses the `@vercel/python@4.1.0` runtime for the FastAPI server - Rewrites route `/api/py/*` requests to the Python serverless function ## Game Walkthrough ### Home Screen (`/`) - Title page with a pill icon and glowing "Start Adventure" button - Brief intro: you're a junior pharmacologist in 1870s London - Lists all 3 levels with icons and descriptions ### Level 1 — The Great Debate (Germ Theory Timeline) - **Goal:** Place 6 historical germ theory discoveries in chronological order - **Mechanic:** Drag and drop cards using HTML5 drag-and-drop - **Cards:** Semmelweis (1847), John Snow (1854), Pasteur (1859), Lister (1867), Koch (1884), Fleming (1928) - **Scoring:** 10 pts per correct position, 5 pts for ±1 position off - **Visual:** Parchment-textured cards …