Matcha Mini World — 3D Matcha Bar Landing Page
Bilingual landing page for a matcha bar, featuring a fully procedural Three.js 3D scene with five scroll-driven camera chapters.
Description
A bilingual (EN/ID) Next.js 16 landing page for a matcha bar. The 3D scene is fully procedural Three.js/React Three Fiber — no imported .glb/.gltf model files — with five scroll-driven camera chapters. Includes a small self-hosted backend for visit requests: Zod validation, an HMAC-signed admin session, in-memory rate limiting, and JSONL-file storage, plus Docker + Traefik deployment config.
What Already Works
- Fully procedural Three.js 3D scene — no imported .glb/.gltf model files
- Five scroll-driven camera chapters
- Zod-validated visit-request form with an HMAC-signed admin session
- In-memory rate limiting on form submissions
- Bilingual (EN/ID) content
- Docker + Traefik deployment config included
What's Included
- Full source code
- README and setup guide
- InMyDraft Commercial License
- AI-ready docs (PRD, technical spec, architecture, Three.js motion spec)
How to Run
- Unzip the source and run npm ci (or npm install).
- Copy .env.example to .env.
- Run npm run dev and open http://localhost:3000.
- See FIX_INSTALL_WINDOWS.md if npm ci fails on Windows.
Known Limitations
- JSONL file persistence, not a production database
- Rate limiter is in-memory and resets on restart — explicitly disclosed as fine for single-instance demo use
- Admin default credentials must be changed before any public deployment
- Production build not independently verified outside the local dev environment — spot-check npm run build before listing live
Related Drafts
Travel Umroh Website
Travel landing draft for Umroh packages, inquiry flow, itinerary content, and trust sections.
GoodWearpack Supplier Website
Global B2B supplier website draft for industrial wearpack, safety workwear, and RFQ-first procurement flows.
Bricket Export Website
Multi-language coconut charcoal export website draft for B2B quote requests, product specs, OEM/private-label positioning, and trust-heavy buyer flows.