Le Doux
Artisanal cookie ordering platform with a public order form and comprehensive admin dashboard for managing orders, products, payments, and analytics
Problem
A cookie seller relied on Instagram for discovery and Google Forms for order intake. Manual payment screenshot review, no order tracking, no CRM data, and no analytics made operations slow and error-prone.
Solution
Le Doux is a full-stack cookie ordering platform built for an artisanal cookie business in Davao. It replaces a Google Forms-based workflow with a branded, multi-step order wizard and a comprehensive admin dashboard. The system handles structured product ordering across multiple template types (cookies, boxes, tubs, bento cakes), GCash payment verification with client-side OCR, confirmation emails via Brevo, and a full admin suite covering orders, menu management, form building, customer CRM, and analytics.
Client
Le Doux
* Shared with client permission.
Role
Sole Full Stack Developer
Stack
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Supabase
- Zod
- Lucide React
- Recharts
- Tesseract.js
- Brevo
Integrations & Services
- Supabase
- Brevo
- Vercel
Key Features
- 01
Multi-step order wizard with admin-configurable form blocks
- 02
Structured product catalog with template-based UIs (cookie, box, tub, bento cake)
- 03
Exact-quantity flavor distribution for cookie boxes
- 04
Customizable tub selector (3 flavors + 1 sauce)
- 05
GCash payment with QR display and client-side OCR for reference extraction
- 06
Server-side price recalculation to prevent tampering
- 07
Order snapshot strategy for historical accuracy
- 08
Admin dashboard with at-a-glance stats
- 09
Orders management with status filters, CSV export, and activity logs
- 10
Payment verification with screenshot lightbox review
- 11
Email workflow with branded confirmation templates and preview
- 12
Full menu CRUD with template types and sold-out toggles
- 13
Dynamic form builder with draft/publish workflow
- 14
Content management for welcome messages, reminders, and email templates
- 15
Pickup slot management with capacity controls
- 16
Customer CRM with auto-created records and order history
- 17
Analytics with revenue charts, top products, and customer insights
03 / Technical Decisions
- 01 /
Next.js full-stack App Router: Server Components, Server Actions, Route Handlers, and Middleware in a single deployment — no separate backend needed for this scope.
- 02 /
Supabase for database, auth, and storage: PostgreSQL with RLS handles multi-tenant data isolation, Supabase Auth manages admin sessions, and Storage handles payment proofs and menu images without custom upload logic.
- 03 /
Order snapshot strategy with JSONB: all customer, payment, and form response data is denormalized into snapshots at creation time. Historical orders render from snapshots only, ensuring accuracy as products, prices, or settings change.
- 04 /
Server-side price recalculation: the client submits line items but the server re-fetches product prices from the database and recalculates all totals. Client-submitted totals are never trusted, preventing price tampering.
- 05 /
Tesseract.js for client-side OCR: payment screenshots are processed in the browser to auto-extract GCash reference numbers, reducing manual entry errors without a server-side OCR pipeline.
- 06 /
Dynamic form builder with draft/publish workflow: admins configure the public order form through a visual block editor stored as JSONB, with publish validation ensuring no orphaned categories or empty product lists.
Screenshots
