A modern meal ordering platform with multi-language support (English, Dutch, French) for the Belgian market.
Status: ✅ Production Ready
- Next.js 16 (App Router)
- TailwindCSS with custom design system
- Shadcn UI (light usage)
- Supabase (Database + Authentication)
- Prisma ORM (with Supabase Postgres)
- Stripe (Payments)
- next-intl (Internationalization)
- Bun (Package manager)
- Pure white backgrounds (
#FFFFFF) - Soft yellow accent color (
#F9D97F) - Rounded corners: 12-20px
- Ultra-light shadows:
rgba(0,0,0,0.04) - Generous spacing and airy layouts
- Food photos as main visual anchor
- Bun installed (getbun.sh)
- Supabase account
- Stripe account
- Clone the repository and install dependencies:
bun install- Set up environment variables:
Copy .env.example to .env and fill in your credentials:
cp .env.example .envRequired environment variables:
NEXT_PUBLIC_SUPABASE_URL- Your Supabase project URL- Supabase API Keys (new keys required):
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY- Publishable key (format:sb_publishable_...)SUPABASE_SECRET_KEY- Secret key (format:sb_secret_...)- Note: Legacy keys (
NEXT_PUBLIC_SUPABASE_ANON_KEYandSUPABASE_SERVICE_ROLE_KEY) are supported as fallback but deprecated
DATABASE_URL- Your Supabase Postgres connection stringNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY- Your Stripe publishable keySTRIPE_SECRET_KEY- Your Stripe secret keySTRIPE_WEBHOOK_SECRET- Your Stripe webhook secretNEXT_PUBLIC_APP_URL- Your app URL (e.g.,http://localhost:3000)
📌 Supabase API Keys: This project uses the new Supabase API keys (
sb_publishable_...andsb_secret_...). Legacy keys are supported as fallback but will be deprecated in November 2025. Learn more
- Set up the database:
# Generate Prisma client
bun run db:generate
# Push schema to database
bun run db:push
# Or run migrations
bun run db:migrate- Run the development server:
bun run devOpen http://localhost:3000 in your browser.
See PRODUCTION_CHECKLIST.md for a comprehensive production readiness checklist.
- ✅ SEO Optimized - Full metadata, sitemap, robots.txt, structured data
- ✅ Security Hardened - Security headers, input validation, error sanitization
- ✅ Performance Optimized - Image optimization, compression, code splitting
- ✅ Accessibility - ARIA labels, keyboard navigation, semantic HTML
- ✅ Error Handling - Comprehensive error boundaries and logging
- ✅ Multi-language - Full i18n support with locale-specific SEO
Ensure all environment variables are set in your deployment platform (Vercel):
# Required
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
# Supabase API Keys (REQUIRED - new keys)
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_...
SUPABASE_SECRET_KEY=sb_secret_...
# Legacy keys (optional fallback, deprecated Nov 2025)
# Only use if you haven't migrated yet
# NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
# SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
DATABASE_URL=your_database_url
NEXT_PUBLIC_APP_URL=https://yourdomain.com
# Stripe (for payments)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_webhook_secret
# Optional - Pickup Address Configuration
PICKUP_ADDRESS_STREET=Your Street Address
PICKUP_ADDRESS_CITY=Brussels
PICKUP_ADDRESS_POSTAL_CODE=1000
PICKUP_ADDRESS_COUNTRY=Belgium
PICKUP_ADDRESS_PHONE=+32 12 34 56 789- Connect your GitHub repository to Vercel
- Configure all environment variables in Vercel dashboard
- Deploy - Vercel will automatically build and deploy
The project is configured for optimal Vercel deployment with:
- Automatic Prisma client generation
- Serverless function optimization
- Database connection pooling
- Image optimization
├── app/
│ ├── [locale]/ # Internationalized routes
│ │ ├── admin/ # Admin panel
│ │ └── page.tsx # Home page
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/
│ └── ui/ # Shadcn UI components
├── lib/
│ ├── prisma.ts # Prisma client
│ ├── stripe.ts # Stripe client
│ ├── supabase/ # Supabase clients (client/server)
│ └── utils.ts # Utility functions
├── messages/ # Translation files
│ ├── en.json
│ ├── nl.json
│ └── fr.json
├── prisma/
│ └── schema.prisma # Database schema
├── i18n.ts # i18n configuration
└── middleware.ts # Next.js middleware for i18n
bun run dev- Start development serverbun run build- Build for productionbun run start- Start production serverbun run lint- Run ESLintbun run db:generate- Generate Prisma clientbun run db:push- Push schema changes to databasebun run db:migrate- Run database migrationsbun run db:studio- Open Prisma Studio
The app supports three languages:
- English (
/en) - Dutch (
/nl) - French (
/fr)
Translation files are located in the messages/ directory. Add new translations by updating the JSON files.
The Prisma schema includes:
User- User accountsDish- Meal productsOrder- Customer ordersOrderItem- Items in each order
The codebase follows a production-standard organization:
app/- Next.js App Router pages and API routescomponents/- React components organized by featurefeatures/- Feature-specific components (menu, cart, admin)layout/- Layout components (navbar, footer, etc.)shared/- Shared/common componentsui/- Reusable UI primitives
config/- Configuration files (i18n, middleware)database/- Database migrations and scriptslib/- Core libraries and utilitiesscripts/- Utility scripts organized by purposetypes/- TypeScript type definitions organized by domain
See ARCHITECTURE.md for detailed documentation.
- ✅ Multi-language support (EN, NL, FR)
- ✅ Supabase authentication
- ✅ Stripe payment integration
- ✅ Admin panel structure
- ✅ Image optimization
- ✅ Responsive design
- ✅ Clean, scalable architecture
- ✅ Production-standard code organization
Private project