Mystery Snack Crate

An immersive snack checkout experience where a FastAPI + LangGraph backend pairs with a Vite/React frontend to let shoppers curate a mystery basket guided by an LLM narrator. Each round pits "Mystery A" against "Mystery B" with short, mode-aware descriptions so the real product names stay hidden until you lock in your selections.

Features

FastAPI /run-snack-box endpoint backed by LangGraph and Ollama for orchestrated snack comparisons and summaries.
React checkout flow that saves progress locally, enforces a five-round limit, and lets shoppers apply their chosen snacks straight to the cart.
Halloween-ready “Haunted” narrator mode with a UI aura toggle so you can see the spooky descriptors exactly as the LLM generated them.

Getting started

1. Backend service

pip install -r backend/requirements.txt
uvicorn backend.main:app --reload

The API runs on http://localhost:8000 by default.

2. Frontend app

npm install
npm run dev

Create a .env.local file so the frontend knows how to reach the backend:

echo "VITE_SNACKBOX_API=http://localhost:8000" > .env.local

Then open the Vite dev server URL (usually http://localhost:5173).

Building for production

npm run build

The command validates the TypeScript code and generates the production build in dist/.

Project structure

backend/main.py – FastAPI app, LangGraph workflow, and LLM prompt logic.
src/pages/Checkout.tsx – Mystery snack picker UI, cart logic, and Halloween aura toggle.
src/types/snackBox.ts – Shared TypeScript contracts for backend responses.
src/components/MysteryBoxModal.tsx – Entry modal for picking a budget and narrator tone.

Feel free to tailor the prompts, product catalogue, or styling to fit your own mystery snack adventure.