Bro. Nungu

04 · Restaurant ordering platform

Empire Food Point

In production

Online ordering for a Dar es Salaam restaurant, from menu to delivery tracking.

Category
Restaurant ordering platform
Role
Product design & full-stack engineering
Built by
Empire Pro Dev
Empire Food Point home page on desktop in the dark theme: the “Fired Daily. Served Hot.” hero over charcoal-grilled meat, Explore menu and Order now buttons, guest rating, kitchen time and free-delivery threshold.
Empire Food Point home page on a phone in the light theme: a spread of Tanzanian dishes, the “Great Food. Great Moments.” headline, Explore menu and Order now buttons, and a bottom navigation bar.

Screens

Empire Food Point interface

  • Empire Food Point home page on desktop in the dark theme: the “Fired Daily. Served Hot.” hero over charcoal-grilled meat, Explore menu and Order now buttons, guest rating, kitchen time and free-delivery threshold.
  • Empire Food Point home page on a phone in the light theme: a spread of Tanzanian dishes, the “Great Food. Great Moments.” headline, Explore menu and Order now buttons, and a bottom navigation bar.
  • Empire Food Point home page on a phone in the dark theme: a spread of Tanzanian dishes, the “Great Food. Great Moments.” headline, Explore menu and Order now buttons, and a bottom navigation bar.
  • Empire Food Point home page on a tablet in the dark theme: a spread of Tanzanian dishes, the “Great Food. Great Moments.” headline, Explore menu and Order now buttons, guest rating, kitchen time and free-delivery threshold.
  • Empire Food Point “Popular dishes this week” on the desktop home page in the dark theme: dish cards for Beef Samosa, Chapati, Chips Mayai and Mandazi with photo strips, spicy and veg tags, prep times, ratings, prices and Add buttons.
  • Empire Food Point dish page on desktop in the light theme for Beef Mishkaki: photo gallery, rating, prep time and calories, price, and customisation options for spice level and extras.
  • Empire Food Point menu on desktop in the dark theme: a sticky bar of menu sections with Fast Food selected, a list of burgers and pasta with prices, discounts, prep times, favourite and Add buttons, and a Fast Food feature photo.
  • Empire Food Point menu on a phone in the dark theme: a sticky row of menu sections, the Main Meals heading, and dishes with prices, prep times, spicy and discount tags, favourite and add buttons.
  • Empire Food Point menu on a tablet in the light theme: the Our Menu header with dish and section counts, a row of menu sections from Main Meals to Combos, and the Main Meals feature image.
  • Empire Food Point shopping cart on a tablet in the light theme: Beef Mishkaki, Chicken Biryani and Mango Juice with their options and quantity controls, a promo code field and a free-delivery progress bar.
  • Empire Food Point checkout on a tablet in the dark theme: a five-step progress bar, the customer information form for guest ordering, and the order summary.
  • Empire Food Point order tracking on a phone in the dark theme for order EFP-7412: a Preparing status, a 22-minute estimated arrival and a timestamped order progress timeline.
  • Empire Food Point staff dashboard on desktop in the dark theme: today's orders, revenue, pending orders and customers, a 14-day revenue chart, a delivery versus pickup split, and orders by hour.
  • Empire Food Point staff order management on desktop in the light theme: orders filtered by kitchen status, with customer, items, total, a status selector and Accept, Reject and next-step actions.

Overview

A full-stack ordering platform for Empire Food Point, a restaurant in Dar es Salaam. Customers browse the full menu section by section, customise dishes, check out in five steps and track their order live, while staff run orders, the menu, promotions and analytics from an admin dashboard.

Product areas

  • Menu & search
  • Dish customisation
  • Cart
  • Checkout
  • Order tracking
  • Promotions
  • Favourites
  • Staff dashboard
  • Analytics

Technologies

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Zustand
  • Zod

Case study

From problem to product

The complete engineering lifecycle behind Empire Food Point.

  1. 01

    Problem

    A restaurant's customers want to order, pay and follow their food without phoning in, and its staff need one place to run orders, the menu and promotions.

    • Orders taken by phone are easy to mishear and hard to track
    • Customers can't see where their food is
    • Staff need to update the menu and offers themselves
  2. 02

    Idea

    Empire Food Point: the whole customer journey online, from browsing the menu to live order tracking, with a staff dashboard behind it.

    • Browse, customise, pay and track in one flow
    • Guest checkout and promo codes
    • A staff dashboard for orders, menu, categories, customers and promotions
  3. 03

    Approach

    I built Empire Food Point as a complete, working prototype first: every customer and staff screen runs end to end on typed data, so the product can be judged before any infrastructure is paid for.

    • Data behind a repository layer that a real database can replace
    • Mock sign-in with exactly the same shape as a real provider
    • Payments planned around a hosted provider, so card details never touch the server
  4. 04

    Architecture

    All data sits behind one repository layer, so connecting a database, real authentication and a payment provider changes those modules and nothing else. The server recalculates every order line, discount and delivery fee from the menu, so a tampered basket cannot change what an order costs.

    • Route groups for the public site, sign-in, customer pages and admin
    • Zod schemas shared by forms and API routes
    • Zustand stores for cart, favourites, session and orders, kept across refreshes

    System architecture

    3 layers · 8 modules

    1. L01Experiences

      2 modules
      • Customer ordering
      • Staff dashboard

    2. L02Application

      4 modules
      • Menu & categories
      • Cart & checkout
      • Orders & tracking
      • Promotions

    3. L03Data

      2 modules
      • Repository layer
      • Typed menu & order data
    Conceptual architecture: layers and their responsibilities.
  5. 05

    Design

    A dark theme of warm ivory type, deep red calls to action and gold detail, with a daylight theme alongside it. The layout was checked on small phones, tablets and wide desktops with no horizontal scrolling.

    • Bottom navigation, a floating cart bar and bottom-sheet dish options on phones
    • A cart drawer, sidebar filters and up to four columns on desktop
    • The theme choice remembered and applied before the first paint, with no flash
  6. 06

    Development

    The storefront is TypeScript on Next.js, with every price recalculated on the server and every dish option validated against the dish it belongs to.

    • Search, filters and sorting across the whole menu
    • A five-step checkout with promo codes and guest ordering
    • Live order tracking with a status timeline
    • A sourcing pipeline that collected and credited every dish photograph
  7. 07

    Data

    Staff analytics are hand-built charts, each with a table view, so nothing depends on colour alone.

    • Charts drawn in plain SVG, with no charting library
    • The one two-colour chart pairing checked for colour-blind separation
    • Orders, customers and promotions all reported from the same records
  8. 08

    Testing

    Every route was checked in a headless browser at phone, tablet, laptop and wide-desktop sizes for horizontal scrolling, broken images and console errors.

    • Type-checking and linting on every change
    • Tampered baskets rejected by the server's recalculation
    • Both themes checked for contrast over photography
  9. 09

    Deployment

    The prototype is mostly pre-rendered and ready for any Next.js host. Connecting a database, real sign-in and a payment provider touches only the modules built for them.

    • Installable, with an offline page
    • A sitemap and search metadata in place
    • The admin area kept out of search indexes
  10. 10

    Result & current state

    Empire Food Point is a working prototype: the whole customer journey and the staff dashboard run end to end, with sign-in, payments and admin changes mocked behind their own modules, ready to connect.

    • Complete: menu, customisation, cart, checkout, tracking, favourites, offers and the staff dashboard
    • Next: a real database, sign-in and a payment provider

What building it taught.

Challenges

  • Making a prototype feel real without writing throwaway code
  • Keeping prices trustworthy when the basket lives in the browser
  • Saved state that differs between the server and the browser on first render

Solutions

  • A repository layer and mock providers shaped exactly like the real ones
  • The server rebuilds every order from item ids and quantities alone
  • A hydration flag, so the server and the browser render the same markup first

Lessons

  • A good prototype is a real app with its edges mocked, not a mock-up
  • The browser should only ever send intent, never totals
  • Colour tokens named by role make a second theme almost free