Matcha Mini World — 3D Matcha Bar Landing Page

Name: Matcha Mini World — 3D Matcha Bar Landing Page
Brand: InMyDraft
Price: 14000 IDR
Availability: InStock

Bilingual landing page for a matcha bar, featuring a fully procedural Three.js 3D scene with five scroll-driven camera chapters.

Website DraftAvailableLanding PageRp 14.000BeginnerUpdated 2026-07-14Next.js 16, React 19, TypeScript, React Three Fiber / Three.js, Zod, JSON-file store

Demo

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