Handcrafted global desserts — Jacksonville, FL
Full-stack production website and admin dashboard for a food trailer business serving desserts inspired by Africa, the Middle East, Asia, Europe & the Americas.
A production-grade marketing website, custom order platform, and admin dashboard for Cleopatra Delights. Built from scratch with two distinct design systems: an Egyptian-inspired dark theme for the public site, and a minimal Frost theme for the admin panel.
- 58-item menu with category filtering, search, and animated card grid
- Custom order form with client + server validation, honeypot spam protection, and email delivery via Resend
- Dual-row auto-scrolling gallery with CSS marquee animations
- Dark obsidian design system with Egyptian-inspired visual identity
- SEO-optimized with JSON-LD schema, Open Graph metadata, sitemap, and robots.txt
- Protected admin panel with Google OAuth (NextAuth v5) and role-based access
- Real-time KPI cards: new orders, in-progress count, revenue, customer metrics
- Revenue analytics with weekly trend charts (Recharts)
- Order management: filtering, search, pagination, status workflows, timeline tracking
- Customer CRM: profiles, order history, notes, lifetime value stats
- Responsive sidebar with icon rail (64px) expanding to full nav (200px) on hover
- Frost design system: dark
#0a0a0abackground, blue#3b82f6accents, Geist typography
- 6-layer anti-spam system built after surviving a 43,000-entry bot attack in production
- Cloudflare Turnstile CAPTCHA, per-IP rate limiting, honeypot fields, timing analysis, content-based detection, disposable email blocking
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Language | TypeScript (strict) |
| Styling | Tailwind CSS v4, CSS custom properties |
| Animation | Framer Motion 12 |
| Database | Supabase (PostgreSQL 17) via connection pooler |
| ORM | Prisma 7.5 with @prisma/adapter-pg driver |
| Auth | NextAuth v5 (Auth.js) with Google OAuth |
| Resend API | |
| Charts | Recharts |
| Tables | TanStack Table |
| Validation | Zod + React Hook Form |
| Deployment | Vercel (auto-deploy from main) |
| Domain | cleopatradelights.com |
app/
├── layout.tsx # Root layout, metadata, JSON-LD schema
├── page.tsx # Homepage (7 sections)
├── globals.css # Design tokens, both theme systems
├── menu/ # 58-item menu with category tabs
├── location/ # Events schedule, Google Maps
├── order/ # Custom order form
├── api/
│ ├── order/route.ts # POST — validates + sends via Resend
│ └── auth/[...nextauth]/ # NextAuth API routes
└── dashboard/
├── layout.tsx # Geist font loader
├── (auth)/login/ # Google OAuth login (no sidebar)
└── (main)/ # Authenticated routes (with sidebar)
├── page.tsx # Overview: KPIs, charts, recent orders
├── orders/ # Order list + detail pages
├── customers/ # Customer list + detail pages
└── settings/ # Account settings
- Palette: Obsidian
#08070A, Gold#D4AF37, Crimson#8B1A1A, Teal#1B7878, Papyrus#F2E4C8 - Typography: Playfair Display (headings), Inter (body)
- Animation: Blur-in stagger entrance, spring-based transitions, CSS marquee gallery
- Palette: Near-black
#0a0a0a, surfaces#0f0f0f-#1a1a1a, blue accent#3b82f6 - Typography: Geist Sans (UI), Geist Mono (data/numbers)
git clone https://github.com/loki128/cleopatra-delights.git
cd cleopatra-delights
npm installCreate .env.local:
DATABASE_URL=postgresql://postgres.PROJECT_REF:PASSWORD@pooler.supabase.com:6543/postgres
RESEND_API_KEY=your_resend_api_key
AUTH_SECRET=generate-with-openssl-rand-base64-32
AUTH_GOOGLE_ID=your-google-oauth-client-id
AUTH_GOOGLE_SECRET=your-google-oauth-client-secret
ADMIN_EMAILS=admin@example.comnpx prisma db push
npm run devKarim Lukita — One-person product studio. I build full products solo — SaaS platforms, e-commerce, AI tools, trading bots, games. Design to deployment, shipped fast.
MIT © 2026 Cleopatra Delights