Coffee shop website: plan the site with AI

In this project you will build a real website for Brew & Bean, a small coffee shop in Indiranagar, Bengaluru, using a free AI assistant as your pair programmer. Over six lessons you will plan the site, set up a React project, build the home and menu pages, add a cart and an order form, make it work well on phones, and put it on the internet.

This first lesson has no code. It is the most important one. Developers who get good results from AI do not start by typing "build me a coffee shop website". They start by deciding what the site is, and they write that down. You will finish with a one-page spec and a build plan that you will use in every later lesson.

Before you start: finish *Set up your machine: Node.js, VS Code, Git and a free AI assistant*, and read *Write a project spec an AI can build from* for the general method. Here we apply it to one real project. If React is new to you, take the *Web Development with React* track alongside; you can still follow this project by reading the code carefully and asking your AI to explain what you don't understand.

A working website with four pages, deployed on a free host:

- Home: a hero section, three customer favourites, opening hours and the shop location. - Menu: all eight items with a category filter. - Cart: quantity buttons, a total in rupees and an order form that ends in a confirmation message. - It works on a small phone screen, can be used with the keyboard, and is live at a public link you can share.

Later lessons in this track build the order API in FastAPI and connect it to this website, so we plan the website to make that easy.

AI assistants are fast but they guess. If you ask for "a coffee shop website", the AI chooses everything for you: the framework, the pages, whether there is a login, whether it uses a payment gateway, which libraries to install. You then spend hours reading and untangling code you did not choose.

A short plan fixes this. It is also how professional teams work: decide, write it down, build in small steps, review each step. The plan is cheap to change. Code is expensive to change.

The plan has four parts. We will produce each with the AI's help, but you make the decisions:

1. Goal and users: who is this for and what must they be able to do? 2. Pages and flow: which screens exist and how does a customer move between them? 3. Components and data: what are the building blocks and what information do they show? 4. Build order: small steps, each one testable on its own.

Start by letting the AI interview you. This is better than writing a long prompt from scratch because it finds the questions you forgot to ask. Paste the prompt below into any free assistant (Gemini, ChatGPT, Claude or Copilot all work).

I want to build a website for a small coffee shop and I want you to help me plan it before any code is written.

Shop details:
- Name: Brew & Bean
- Place: Indiranagar, Bengaluru
- Open 8 am to 10 pm
- Pickup orders only (no delivery)
- Menu: 8 items across coffee, tea, bakery and food

About me: I know a little HTML and JavaScript and I am a beginner with React. I will build this with your help over a few days.

Ask me up to 8 short questions that would change the design of the site (for example who the users are, what they must be able to do, what is out of scope). Ask them one group at a time, and wait for my answers. Do not suggest a design or write code yet.

What to expect: A good answer asks about users and devices (phones?), what an order needs (name, phone, pickup time?), payments, accounts, photos, and what is out of scope. If the AI jumps straight to code, reply: "Questions only, please."

Answer in short sentences. For this project, use these answers: customers are mostly on phones; an order needs a name, a mobile number and a pickup time; no online payment (customers pay at the counter); no accounts; no real photos yet; no admin page. Having firm answers is what keeps the plan small.

A page is one screen with its own address (URL). A flow is the path a customer takes. For Brew & Bean the main flow is short: arrive on Home, look at the Menu, add items, open the Cart, fill in the form, see the confirmation.

In a React app, each page is a component and a library called react-router-dom shows the right one for the current URL.

A component is a reusable piece of the screen. Splitting the site into components before you build helps you ask the AI for one small thing at a time. Here is the component tree for the whole project. Keep it: the names will be the file names in later lessons.

App
├── Header          (logo, 3 links, cart count)
├── Routes
│   ├── Home        (hero, 3 MenuCard, info cards)
│   ├── Menu        (category buttons, 8 MenuCard)
│   ├── Cart        (cart lines, OrderForm or OrderConfirmation)
│   └── NotFound
└── Footer

Read it as: App contains Header, the page routes and Footer. Each page is built from smaller components.

Next, the data. The menu is a list of items. We keep it in one file, src/data/menu.js, so that later (when the API exists) we only change where the list comes from and nothing else.

One menu item looks like this:

{
  id: 'cappuccino',
  name: 'Cappuccino',
  category: 'coffee',
  price: 180,
  description: 'Espresso with steamed milk and a thick layer of foam.',
}

id is a short unique text used in the cart and later in the API. price is in whole rupees.

The cart needs to be available on every page: the Header shows the item count, the Menu adds items, and the Cart page edits them. In React, data shared by many components is often kept in a context. We will make a CartContext and store only { id, qty } for each line. Names and prices are looked up from the menu. That way the price can never be out of date or edited by mistake.

Now you have decisions. Ask the AI to turn them into a one-page spec. Give it your decisions as input and tell it to add nothing.

Write a one-page project spec in Markdown for the website below. Use only the decisions I give you. Do not add features, libraries or pages. If something is missing, list it under "Open questions" at the end instead of guessing.

Decisions:
- Site: Brew & Bean, coffee shop in Indiranagar, Bengaluru, open 8 am to 10 pm, pickup only.
- Users: customers on phones.
- Pages: Home (/), Menu (/menu), Cart (/cart), Not found.
- Menu has 8 items in 4 categories (coffee, tea, bakery, food), filter on the Menu page.
- Cart: add items, change quantity (1 to 20), remove, total in rupees. Saved in localStorage.
- Order form: name, 10-digit Indian mobile number, pickup time. Only shows a confirmation; nothing is sent.
- Tech: React with Vite, JavaScript (JSX), react-router-dom, plain CSS, no UI library, no backend.
- Data: menu in src/data/menu.js; cart in src/context/CartContext.jsx as a list of { id, qty }.
- Out of scope: payments, accounts, delivery, admin page, photos.

Sections: Goal, Users, Pages, Tech, Data, Rules, Out of scope, Done when, Open questions.

What to expect: Check that each section matches your decisions and that nothing new has crept in (no Tailwind, no Redux, no login). Check that "Done when" can be tested by a person.

Your AI's wording will differ from ours. That is fine. Here is a reference spec that you can use as your own if you prefer. Save it as SPEC.md in the project folder in the next lesson.

# Brew & Bean website: spec

## Goal
A website for Brew & Bean, a small coffee shop in Indiranagar, Bengaluru
(open 8 am to 10 pm, pickup orders only). Customers can read the menu, add
items to a cart and fill in an order form saying who is collecting and when.

## Users
- Regular customers on their phones, ordering on the way to the shop.
- First-time visitors who want to know what we sell, where we are and when
  we are open.

## Pages
1. Home (/): hero with two buttons, three popular items, opening hours,
   location and a pickup note.
2. Menu (/menu): all 8 items, filter by category (all, coffee, tea, bakery, food).
3. Cart (/cart): items with quantity buttons, total, order form, then a
   confirmation message.
4. Not found (any other path): short message and a link home.

## Tech
- React with Vite, plain JavaScript (JSX), no TypeScript.
- react-router-dom for pages.
- Plain CSS in src/index.css. No UI library, no Tailwind.
- No backend yet. The menu is a JavaScript file: src/data/menu.js.

## Data
- Menu item: id, name, category, price (whole rupees), description.
- Cart: a list of { id, qty }, kept in a CartContext
  (src/context/CartContext.jsx) and saved in localStorage.
- Names and prices always come from the menu, never from the cart.

## Rules
- Show prices in rupees with Indian grouping (for example Rs 1,20,000).
- Quantity per item is between 1 and 20.
- Phone must be a 10-digit Indian mobile number (starts with 6, 7, 8 or 9).
- The order form only shows a confirmation. It sends nothing anywhere yet.

## Out of scope
Online payment, user accounts, delivery, an admin page, real photos.

## Done when
- All 4 pages work and the site works on a 360 px wide phone screen.
- The cart survives a page refresh.
- Everything can be used with the keyboard only.
- The site is live on a public URL.

About 50 lines. Short enough for the AI to read every time you ask for code.

Before you build, ask the AI to attack its own plan, then read it yourself. A plan is the cheapest place to find a mistake.

Here is my project spec:

<spec>
[paste SPEC.md here]
</spec>

Act as a senior developer reviewing this for a beginner. List:
1. Anything ambiguous that two developers would build differently.
2. Anything missing that will block the build (for example a state or a page).
3. Anything that is too big for a beginner's first project and should be cut.

Keep it to a numbered list, max 10 items, most important first. Do not rewrite the spec.

What to expect: Pick only the points that are really problems. Ignore advice that adds features. Good finds here include: what happens when the cart is empty, what happens if localStorage has bad data, and what the 404 page does.

The last part of the plan is the build order. Each step should end with something you can see working. Never ask the AI for the whole site at once: the answer will be large, hard to review and hard to debug. Our build order is the list of lessons in this project. If you want the AI to produce your own version, use this prompt.

Using the spec below, split the build into 6 to 8 small steps for a beginner. Each step must:
- produce something visible in the browser,
- touch at most 4 files,
- end with one thing I can click or type to check that it works.

Give each step a name, the files involved and the "check it works" line. Do not write code.

<spec>
[paste SPEC.md here]
</spec>

What to expect: The first step should be project setup and an empty page, not the cart. The cart should come after the menu exists, because it depends on it.

Interviewers for junior roles often ask "How would you build X?" They are listening for steps, not libraries: clarify the requirements, decide the pages and data, build the smallest working version, then improve it. What you did in this lesson is exactly that answer, and now you have a real project to point to. If you use AI tools, be ready to say how you checked their output.