Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/alex-pizza-assistant/llms.txt

Use this file to discover all available pages before exploring further.

Alex Pizza Assistant has no build step, no package manager, and no server requirement. You can go from zero to a running chatbot in the time it takes to clone a repository and open a single HTML file. This page walks you through the setup, a sample order conversation, and the optional local server commands for when you want a localhost URL instead of a file:// path.

​
Prerequisites

  • Any modern web browser (Chrome, Firefox, Safari, or Edge)
  • Git (to clone the repository)
  • Optional: Python 3 or Node.js if you prefer serving over localhost

​
Steps

1

Clone the repository

Open a terminal and clone the project from GitHub.
git clone https://github.com/apursley2012/alex-pizza-assistant.git
cd alex-pizza-assistant
The repository contains only static files — there is nothing to install.
2

Open the app in your browser

You have two options. The simplest is to open index.html directly; the file:// protocol works without any server.Option A — open the file directly (no server needed):
# macOS
open index.html

# Linux
xdg-open index.html

# Windows (PowerShell)
Start-Process index.html
Option B — serve over localhost:If you prefer a localhost URL, start a local static server in the project folder.
# Python 3 (built-in)
python3 -m http.server 8080
# Then visit http://localhost:8080

# Node.js — npx serve (no global install required)
npx serve .
# Then visit the URL printed in your terminal
The app is also fully compatible with GitHub Pages. Push the repository to GitHub, enable Pages from the repository settings (source: the main branch, root folder), and your chatbot is live on the web at https://<your-username>.github.io/alex-pizza-assistant/ — no configuration needed.
3

Walk through a sample order

Once the page loads you will see the Order Chat panel on the left and the Current Receipt panel on the right. Alex opens the conversation automatically. Follow the prompts below to complete a full test order.
PromptExample input
Enter your nameTaylor
Pizza sizesmall
Toppingscheese
Crust typethin
Quantity1
Add another pizza?no
Carry out or delivery?delivery
Cash or card?card
Card number4111111111111111
Expiration date (MM/YY)12/29
Security code (CVV)123
Tip for driver2
After each answer, press Continue. Your reply appears as a yellow chat bubble; Alex’s responses appear as white bubbles. The receipt panel updates with every step — watch the subtotal, tax, delivery fee, and tip fill in as you go.
All card fields are for demonstration purposes only. No data is transmitted or stored anywhere. Enter any syntactically valid values — a 13–19 digit card number, an MM/YY expiration, and a 3–4 digit CVV — to complete the simulated payment.
4

See the receipt panel and ETA countdown

When you submit your tip, Alex displays the order total and triggers a short ETA countdown in the chat feed:
Order received. ETA 3 minutes!
3 minutes remaining...
2 minutes remaining...
1 minute remaining...
Your driver is on the way!
The receipt panel on the right shows the finalised order: customer name, delivery method, payment (masked to the last four card digits), an itemised pizza list with per-item totals, subtotal, sales tax (10%), delivery fee ($5.00), driver tip, and the grand total.If your order total reached 50ormore,Alexalsoannouncesa50 or more, Alex also announces a 10-off coupon for your next order.To start a fresh order, click Start over at the bottom of the receipt panel. The chat feed clears, all state resets, and Alex greets you again from the beginning.

​
Project Structure

All of the app’s files are in a single flat folder — no build output, no node_modules, no config files. 
alex-pizza-assistant/
├── index.html          # chatbot UI and receipt panel
├── css/
│   └── styles.css      # layout and component styles
├── js/
│   └── app.js          # ordering logic, validation, state
├── data/
│   └── menu.json       # prices, tax rate, delivery fee
└── docs/               # case study, article, source map
  • index.html — the entire UI: header, chat window with feed and form, receipt panel, footer, and a single <script> tag that loads app.js.
  • css/styles.css — a single stylesheet using CSS custom properties (no frameworks). Includes responsive breakpoints for tablet and mobile.
  • js/app.js — all application logic: the steps array that drives the conversation, handleSubmit for form processing, per-step inline validate functions, calculateTotals, updateReceipt, and runFastEta. Pricing calculations use the constants defined at the top of this file: prices (small: 8.99,‘medium‘:8.99, `medium`: 14.99, large: $17.99), TAX_RATE (0.1), and DELIVERY_FEE (5).
  • data/menu.json — stores display values (prices, salesTaxMultiplier, deliveryFee, couponThreshold) that populate the static Menu Logic card in the UI sidebar. This file is not loaded by app.js — the actual pricing calculations use the constants in app.js. To change any price, tax rate, or delivery fee, update both app.js and data/menu.json to keep the sidebar display in sync with the live calculations.

Build docs developers (and LLMs) love

Get started for freeTalk to us