← Back to resources
Day 1 · Module

Coffee Shop Crawl

You've just learned the layers of a tech stack — the dining room, the kitchen, the pantry, the building. Now we'll build one. In this module you'll use Lovable to create a personal café tracker, watching each layer come to life as you prompt.

In this module
  1. 1Sketch the restaurant
  2. 2Design the dining room
  3. 3Stock the pantry
  4. 4Open for business
Step 1 · The spec

Sketch the restaurant

Before AI builds anything, it needs a spec — the kind you learned to write in the previous session. Here's the one we'll use. Read it, then paste it into a fresh Lovable project.

A note on this module

We're starting everyone with the same spec so you can follow along and compare notes. After the workshop, you can run this whole module again with your own app idea.

Paste into Lovable
**Product scope** Coffee Shop Crawl — a personal web app for logging cafés I've visited, with photos, ratings, and notes. **Who it's for** Me. I visit a lot of cafés for work and travel, and I can never remember which ones were good when a friend asks for a recommendation. **The core flow** When I open the app, I see a list of every café I've added, most recent first. I tap an "Add a café" button to open a form where I enter a name, a neighborhood, upload a photo, give it a rating from 1 to 5 stars, and write a few sentences of notes. When I save, the new café appears at the top of the list. I can see all my cafés at a glance and scroll back through them. **Pages and sections** A single page. Top: page title ("Coffee Shop Crawl") and an "Add a café" button. Below: the list of café cards. When "Add a café" is tapped, a form appears (modal or inline — your pick) with fields for name, neighborhood, photo upload, rating, and notes, plus save and cancel buttons. **Starting state** If I haven't added any cafés yet, the list area should tell me what to do — something warm, like "Your café collection starts here. Tap 'Add a café' to log your first one." The "Add a café" button should be emphasized so it's the obvious next action. **Data the app remembers** Each café has: name, neighborhood, photo, rating (1-5), notes, and created_at timestamp. **Out of scope for V1** Persistence across sessions (I'll add this next). Filtering and sorting (also next). Login or user accounts. Custom domain. Any AI features. **Risks — where this could go wrong** If the rating UI isn't tappable on mobile, the whole flow is broken. If the photo doesn't show a preview after upload, the form feels unfinished — I should know my upload worked before I save. The "Add a café" button needs to be unmistakably the primary action on the page — not competing with something else for attention. **Open questions** None for V1.
Do this
  1. 1Open Lovable and start a new project.
  2. 2Paste the spec above and hit generate.
  3. 3When it's done, click through the app. Don't touch anything yet — just look.
  4. 4Write down 3–5 observations about what's working and what's missing.

Right now, you have the building (Lovable is hosting it) and the dining room (the interface users see). In the next three lessons, we'll furnish the dining room, stock the pantry, and open for business.

Checkpoint

Your V1 is in live preview

You have a working V1 of Coffee Shop Crawl — the dining room exists, even if it forgets everyone who visits. Now we'll make it feel more intentional.

Step 2 · The frontend

Design the dining room

Your V1 works, but it probably looks like a prototype. This lesson is about teaching AI to make targeted, outcome-driven changes to the frontend — the dining room your users actually see. The move here is specificity. Watch what happens when we go from vague direction to precise direction.

Don't do this
This is the mistake — vague direction lets AI fill in the blanks with averages.
Paste into Lovable
Make the form and the café list look nicer.
Do this instead
Describe what you want the user to experience, and let Lovable pick how to build it.
Paste into Lovable
I want to make the add café form and the café list feel more intentional. Here's what I want the user to experience — you pick the implementation. On the form: - Rating should be the first decision I make, because it shapes how I think about the rest. The form flow should feel like "how did this café make you feel?" first, then the details. - After I upload a photo, I should immediately see the photo I uploaded, not just a filename. Right now it's unclear whether the upload worked. - The notes field should invite me to write something honest — a longer text area with a prompt like "What did you order? What was the vibe? Would you go back?" rather than a generic "Notes" label. - The submit button should say what it actually does — "Add this café" — not "Submit." On the list: - Each café card should feel like a small postcard, not a database row. The photo should be prominent and the rating should be instantly readable at a glance (stars, not a number). - The notes on the card should be a preview — two lines, with a fade or ellipsis if cut — so the list stays scannable when I have lots of cafés. - On desktop, cards can be horizontal (photo on one side, text on the other). On mobile, vertical is fine. Make these changes in sequence, not all at once. Show me the form changes first. After I confirm, make the list changes.
What to notice

The second prompt doesn't tell Lovable how to build anything — it describes what the user should feel and experience. This is the outcome-driven spec pattern applied to an iteration, not just a V1. Use it every time you want to change something.

Going further — what we're skipping, and how you'd add it later

We're keeping this to a single frontend layer on purpose. If you want to go deeper after the workshop, here's how each kitchen-metaphor layer would show up in Coffee Shop Crawl:

The waiters (APIs) — If you wanted each café to autofill its real neighborhood and address when you type the name, Lovable can wire up the Google Places API. You bring the API key; Lovable handles the rest.

The bouncer (authentication) — We're keeping this as a single-user app, but if you wanted private collections per person: "Add Supabase auth with email login, and scope the cafés table so each user only sees their own entries." Lovable sets up both the auth flow and the database rules.

Checkpoint

The dining room is set

Your dining room is set. The form and the list feel like they belong together. Next: teach the app to remember what you put into it.

Step 3 · The database

Stock the pantry

Right now, everything you add to Coffee Shop Crawl disappears when you refresh. That's because the app has no pantry — nowhere to store ingredients between services. In this lesson we'll set up the database, then add the logic (filter and sort) that makes the data useful.

3A — Teach it to remember
Paste into Lovable
Right now my cafés disappear when I refresh the page. I want them to stick around between sessions. Set up persistence so every café I add is saved and loads back when I return to the app. Use Supabase — store the café data (name, neighborhood, photo, rating, notes, timestamp) and put the photo in Supabase storage. The list view should read from the database and continue to show the most recently added cafés first. This is still a single-user app — no login, no accounts. Anyone who opens the app sees the same collection of cafés. When you're done, tell me what I need to do on my end to connect Supabase — I've never set it up before.
You'll need to connect Supabase

Lovable will likely ask you to connect a Supabase account when you run this prompt. Follow its prompts — it takes about 2 minutes. If you don't have a Supabase account, it'll walk you through signing up (it's free).

3B — Make the data useful
Paste into Lovable
Now I want to add filter and sort controls to the café list so I can find specific ones faster. At the top of the café list, add two controls side by side: Filter — a "Neighborhood" dropdown that's populated dynamically from the neighborhoods I've actually entered (not a fixed list). Selecting one shows only cafés in that neighborhood. Include a default "All neighborhoods" option that clears the filter. Sort — a "Sort by" dropdown with three options: "Newest first" (the default), "Highest rated," and "Lowest rated." The filter and sort should work together. If I filter to "Mission" and sort by "Highest rated," I see only Mission cafés, ordered by rating. If I have no cafés added yet, both dropdowns should be hidden — they're meaningless when the list is empty.
What to notice

You just asked Lovable to do two things: read from the pantry (filter and sort query the database) and show different results in the dining room (the list updates). Both layers talking to each other — that's your app working as a system, not just a collection of parts.

Going further

The backend logic — In a traditional app, the filtering and sorting logic would live in backend code. Lovable abstracts this: it writes the database queries for you based on your plain-English description. If you wanted more sophisticated logic (like "show me cafés I haven't visited in more than 3 months"), you'd describe the outcome and Lovable handles the query.

Checkpoint

The kitchen is running

Your pantry is stocked and the kitchen is running. The app remembers every café, and you can slice the collection any way you want. One step left.

Step 4 · Publishing

Open for business

Your app exists, but only you can see it. Coffee Shop Crawl isn't really open for business until someone else can walk in. Let's publish it — which in Lovable is a single click — and send the link to one real person.

Do this
  1. 1In Lovable, click the Publish button (top right of the editor).
  2. 2Lovable will generate a live URL — something like coffee-shop-crawl-abc123.lovable.app. Copy it.
  3. 3Text or message the URL to one real person with: "Try this and tell me one café to add."
  4. 4When they respond with a café, add it to your list. Your app just had its first real user.
Why this step matters

You can iterate on an app forever in preview mode and never know if it works. The moment you send a friend a link, you find out three things at once: whether the app loads for someone who isn't you, whether they can figure out what it does without a tutorial, and whether it makes them want to use it.

Going further

Custom domains (the building's street address) — Lovable deploys to an auto-generated URL by default. If you want to use your own domain (like coffeecrawl.me), Lovable supports it: just add your domain in project settings and it walks you through the DNS setup.

The kitchen metaphor, complete — You've now touched every layer we talked about. The dining room (frontend) was Lesson 2. The pantry (database) and the kitchen's logic were Lesson 3. The building (hosting) was this lesson. The two layers we skipped deliberately — the waiters (APIs to external services) and the bouncer (authentication) — are the natural next steps when you want to make this app more connected or more private.

Checkpoint

You've shipped it

You've built and deployed a real app. Not a tutorial example — your actual café collection, live on the internet. Keep the URL. Add to it every time you find a café worth remembering.