Food Delivery — Modern Online Ordering Platform

Overview

Food Delivery (BotoFood) is a modern online food ordering platform — a fast, app-like storefront where users browse a curated menu, filter by cuisine and category, inspect each dish in detail, and check out in a few taps. Inspired by services like Uber Eats, it focuses on speed, clarity and a joyful ordering experience rather than a heavy marketplace.

The project is live at https://food-gamma-sage.vercel.app/ and open-source at https://github.com/ArashDevArt/food.

Client & Challenge

The brief was straightforward: build a food delivery front-end that feels like a real product — not a template. The UI had to handle a real-world menu (15+ dishes across British, Chinese, Middle Eastern, Malaysian and other cuisines), per-dish pricing with discounts, and a persistent cart — while staying fast as a statically-exported Next.js site on Vercel.

The challenge: keep the architecture simple (no heavy backend) yet deliver e-commerce essentials — category navigation, dish detail pages with full recipes, cart state that survives navigation, and a clear checkout flow — all with polished responsive design.

Goals

• Let users discover food quickly via Menu and Categories
• Present each dish with rich detail: price, discount, cuisine, ingredients and step-by-step recipe
• Provide a frictionless cart: add, remove, change quantity, see totals instantly
• Keep the experience fast and mobile-first — static export, no loading spinners
• Ship a clean, maintainable Next.js + TypeScript codebase deployable to Vercel

Solution

I built a Next.js (Pages Router) application with static generation (nextExport: true) — every menu and detail page is pre-rendered for instant loads. The UI is structured around three pillars: Home (hero + why-us + how-to-order), Menu (filterable dish grid) and Categories (cuisine-based browsing). A lightweight React Context powers the cart globally, so the badge, cart page and checkout stay in sync without prop drilling or an external store.

Styling uses CSS Modules per component — scoped, predictable and free of runtime CSS-in-JS cost — with a purple/orange accent palette that keeps food imagery front and center.

Key Features

• Full menu with 15+ dishes: Beef Wellington, Peking Duck, Shakshuka, Laksa, Ramen, Biryani, Tacos and more
• Per-dish detail: introduction, cuisine and recipe type, difficulty, prep/cook time, servings, ingredients and step-by-step instructions
• Price display with discount badges and calculated final price
• Category and cuisine filtering (/categories and query-based filters on /menu)
• Global cart via Context API: add to cart, increment/decrement quantity, remove item, view cart totals
• Checkout summary with item count and total price
• Responsive layout with sticky header, card grids and accessible navigation
• Static export for Vercel — zero server cost, instant CDN delivery

Design

The visual language is warm and approachable: white cards on soft backgrounds, rounded-2xl corners, generous whitespace and purple as the primary action color. The homepage hero pairs a bold "BotoFood — Food Delivery and Takeout!" headline with a floating food image and a "See All" CTA. Feature blocks ("Why us?": Fast, Best Restaurants, Your Choice, 24/7) use simple duotone icons so the food stays the hero. On mobile, the card grid collapses gracefully and the cart remains thumb-reachable.

Development

Stack: Next.js (Pages Router) + TypeScript + React + CSS Modules. Data lives as a typed local dataset (menu JSON) consumed at build time — no external API, no hydration mismatch. Cart state is a typed CartContext with reducer-style updates, persisted in-memory across route transitions. Images are served from /public/images with native lazy loading. The build outputs a fully static export (_next/static + HTML) deployed to Vercel — next build && next export in practice.

Key technical choices:

• Pages Router with getStaticProps / getStaticPaths for menu and [id] detail routes — SEO-friendly and fast
• CSS Modules (*.module.css) for component-scoped styling — no Tailwind runtime, no global leaks
• TypeScript interfaces for Food, CartItem and Category — strict props across Card, Layout, Banner and Cart
• Context API over Redux/Zustand — minimal bundle for a single-domain cart
• next/image-ready asset structure and responsive breakpoints without a framework dependency

Outcome

The result is a production-ready food ordering front-end that behaves like a real delivery app: users can browse, filter, inspect recipes and manage their cart without ever feeling the "static site" underneath. It demonstrates e-commerce fundamentals — catalog, detail, cart, checkout — in a clean Next.js codebase that is easy to extend with a real API, auth or payment provider when needed. A solid portfolio piece for any restaurant, cloud kitchen or marketplace MVP.