Platewise - Meal Delivery Website with Ordering

Platewise is a complete website for a healthy meal-delivery business: a cinematic, animated landing page plus a working ordering system with saved orders, customer order tracking and a kitchen dashboard for staff. Customers browse the menu, open a product page for each meal (photo, macros, ingredients, allergens, portion size, add-ons), build a basket, apply promo codes and check out in three steps: delivery details with a day and time-slot picker, payment method, and review. Orders are saved to a SQLite database, with every price recalculated on the server. Customers then follow their order live under "My orders", while the kitchen moves it from New to Cooking, Packed, On the way and Delivered. The landing page is built to impress: a 3D isometric city drawn in pure CSS, word-by-word headline reveals, mouse parallax, scroll-linked motion, a 3D lifestyle carousel, an ingredients showcase, count-up stats, a scrolling photo wall and a drop-and-bounce delivery bag. It is fully responsive and respects the visitor's reduced-motion setting. Everything you normally change (brand name, colours, copy, menu, prices, sizes, add-ons, delivery fee, time slots, payment methods, promo codes and order statuses) lives in one well-commented config file. No database server is needed; Node's built-in SQLite stores the orders. Payments: the checkout offers Card, M-Pesa and Cash on delivery and saves the chosen method on each order. No payment gateway is connected out of the box; the documentation explains where to connect Stripe Checkout or M-Pesa (Daraja). Demo photos are loaded from Unsplash for preview only and are not included in the download.

Features

• Animated landing page: CSS 3D isometric city hero, word-by-word headlines, mouse parallax, scroll-linked motion
• 9 landing sections: hero, local sourcing, goals, trust stats, lifestyle carousel, ingredients showcase, testimonials, menu, delivery
• Searchable, filterable menu with live category counts and a "/" keyboard shortcut
• Product page per meal: macros that scale with portion size, ingredients, allergens, sizes, add-ons, quantity, related meals
• Basket drawer with quantities, promo codes and a free-delivery progress bar; saved across page reloads
• 3-step checkout with validation, delivery day and time-slot picker (past slots disabled), Card / M-Pesa / Cash on delivery
• Orders saved in SQLite; server recalculates all prices and validates every field
• Order confirmation plus live order tracking with status timeline
• "My orders" for customers: no password, lookup by email + phone, cancel before cooking starts, order again
• Kitchen dashboard: status board (New, Cooking, Packed, On the way, Delivered), one-click status updates, today's orders and revenue, auto-refresh and new-order chime
• Kitchen dashboard protected by a key (auto-generated or set via environment variable)
• One config file for brand, copy, menu, prices, delivery rules, promo codes and statuses
• Fully responsive, keyboard accessible, respects reduced-motion settings
• React 19, Vite, Tailwind CSS 4, Framer Motion, Node.js; clean, readable, unminified source
• Detailed HTML documentation included

Requirements

• Node.js 22.13 or newer (Node 24 LTS recommended)
• npm
• For the ordering system in production: hosting that runs a Node.js process with persistent storage (VPS, Render, Railway, Fly.io or a cPanel host with Node.js support)
• Basic knowledge of JavaScript and React to customise beyond the config file

Instructions

1. Unzip the download and open a terminal in the project folder.
2. Run: npm install
3. Run: npm run dev, then open http://localhost:5173
4. Rebrand and edit the menu, prices and delivery settings in src/config.js.
5. For production: npm run build, then ADMIN_KEY=your-secret npm start (serves the site and the orders API on port 3000).
6. Full guide: open documentation/index.html in your browser.