Food ordering

Build with Vlak
Langestraat 12Alkmaar · Sample address
Made in the neighbourhood

Something good, nearby

Demo collection
Kitchen type
Price range
4 kitchens match
Real restaurants · Local ordering exampleLocal example

Filter kitchens → choose a dish → review the bag

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Checkout creates a local demonstration receipt, not an order or payment. Restaurant references provide sample context. Food images are generated illustrations, not photographs of those businesses or their dishes. Replace the sample content for your own service.

Restaurant and menu source links open their public websites. Browsing and the order bag do not call an ordering service.

Installation and base examples

Inside the interface

A food-ordering interface that moves from kitchen discovery to a filled bag. Search and filters narrow the restaurants, large photographs lead into their menus, and dish details stay close to the order summary.

Filter the kitchens, open a menu, and add dishes to the bag. Orders stay in the demo; checkout creates a local receipt and does not place a real order or take payment.

Watch the 20-second walkthrough

A short walkthrough of the working food ordering study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the Food ordering starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Input searches kitchens, Select and Toggle group narrow the menu, and Card organizes the result and order regions.
  • Number field edits item quantities. Buttons add and remove dishes while Checkbox acknowledges the local demonstration before checkout.
  • Kitchen discovery, menu, item, bag and receipt share one responsive flow. Flush dividers separate sections while photography keeps its useful visual role.
  • On mobile, browsing, filters, the restaurant menu, dish details, and the bag use focused screens. A bottom bag action keeps the order within reach, while Back navigation preserves the current restaurant and filters.