Annie: Week 4: Catch Up and Start Your Coffee App

You have favs.py from Week 1, and you missed the v0 prototype weeks. That is OK. This week you will add the project notes your instructors need, then build a real 7 Brew drink finder in Flask -- a Python library that turns your code into a website you can open in a browser.

Important: If you had used v0, it could look very polished fast. Your first Flask version will be simpler on purpose. You are learning how pages, links, and routes work in Python. We keep improving the look week by week. This guide uses Tailwind CSS from a CDN so the app still looks clean without huge custom CSS blocks. See Tailwind CSS.

Check In: What Are You Working On?

Create TODO.md if you do not have it yet. Write one rough sentence about today -- for example: "Catch up on project files and start my 7 Brew Flask app." You will sharpen this at the end.

I have TODO.md open with a rough sentence for today

Part 1: Essential Project Catch-up

Your repo needs a few files so your project is documented for Demo Day planning. This is not busywork -- it tells your instructors what you are building.

Add `v0-prompt.md`

You did not use v0 yet. Write the prompt you would have used for a 7 Brew drink recommendation app (or copy and edit this):

Create a new file named v0-prompt.md
Fill in the bracket parts in plain language

You are my MVP build coach.

I am a high school student and a beginner programmer.
Use plain language. Define technical words in one sentence.

Project idea:
[An app that helps someone pick a 7 Brew drink based on their mood or taste]

Target user:
[Me and friends who visit 7 Brew]

Build me the smallest working MVP with only 3-5 must-have features. Make it look nice and work well.

Features:
1. [Home page that explains the app]
2. [A page with drink ideas grouped by vibe -- sweet, strong, fruity, etc.]

Do not add extra features yet.

I saved v0-prompt.md with my real project details (no leftover brackets)

Add `vibe-code-report.md`

Create vibe-code-report.md and use this outline:

# Vibe Code Report

## Prototype Link

**No v0 link yet** -- I am building my first version in Flask.

## What I Plan to Build First

- Project idea (1-2 sentences):
- Platform: Flask first
- MVP features (3-5 bullets):

## Reflection

- How do you feel about the direction so far?
- What would you change with more time?
- What would you keep the same?

## Known limitations

- [What is not built yet -- be honest]

I created vibe-code-report.md and filled every section

Commit Part 1

Save: Cmd+S (Mac) or Ctrl+S (Windows/Chromebook)
Source Control -- message: add v0 prompt and vibe code report for 7 brew app
Commit, then Sync Changes

I committed and synced

Optional practice (not required for Demo Day): Your favs.py has a small mix-up on the second print line (it says "artist" but prints song). You can fix it if you want. You can also add a warmup.py with variables and a formula -- skip this if you would rather spend your time on Flask.

Part 2: Build Your 7 Brew Drink Finder

Flask maps URLs to Python functions. Each function returns HTML as a string. Styling uses Tailwind utility classes. See Flask for how routes work.

Step 1: Create `app.py`

New File in the project root -- name it app.py
Paste:

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>7 Brew Drink Finder</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-amber-950 text-amber-50">
        <div class="mx-auto max-w-xl px-6 py-16">
            <h1 class="text-3xl font-bold text-amber-300">7 Brew Drink Finder</h1>
            <p class="mt-2 text-amber-200/80">By Annie H.</p>
            <p class="mt-6 text-amber-100">Not sure what to order? Pick a vibe below and we will help you find a drink.</p>
            <div class="mt-8 flex flex-wrap gap-3">
                <a class="rounded-xl bg-amber-400 px-5 py-3 font-semibold text-amber-950 shadow hover:bg-amber-300" href="/quiz">Take the Quiz</a>
            </div>
        </div>
    </body>
    </html>
    """


@app.route("/quiz")
def quiz():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>Drink Quiz -- 7 Brew Drink Finder</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-amber-950 text-amber-50">
        <div class="mx-auto max-w-xl px-6 py-12">
            <h1 class="text-2xl font-bold text-amber-300">What is Your Vibe?</h1>
            <p class="mt-2 text-amber-200/80">Find your category below, then try one of the drinks.</p>

            <h2 class="mt-10 text-lg font-semibold text-amber-200">Sweet and Creamy</h2>
            <ul class="mt-3 space-y-2">
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Caramel Latte</span> -- smooth espresso with rich caramel and cream</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">White Chocolate Mocha</span> -- sweet white chocolate with espresso and steamed milk</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Vanilla Dream</span> -- vanilla and cream blended with espresso</li>
            </ul>

            <h2 class="mt-8 text-lg font-semibold text-amber-200">Bold and Strong</h2>
            <ul class="mt-3 space-y-2">
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Double Shot Americano</span> -- two shots of espresso with water</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Cold Brew Black</span> -- smooth cold brew served straight</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Espresso Macchiato</span> -- espresso with a dash of foam</li>
            </ul>

            <h2 class="mt-8 text-lg font-semibold text-amber-200">Fruity and Refreshing</h2>
            <ul class="mt-3 space-y-2">
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Strawberry Energy Infusion</span> -- strawberry and citrus with a caffeine boost</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Peach Mango Smoothie</span> -- blended peach and mango</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Blue Raspberry Chiller</span> -- blue raspberry with lemonade over ice</li>
            </ul>

            <h2 class="mt-8 text-lg font-semibold text-amber-200">Chocolatey</h2>
            <ul class="mt-3 space-y-2">
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">Dark Chocolate Mocha</span> -- rich dark chocolate with espresso</li>
                <li class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3"><span class="font-semibold text-amber-300">S'mores Frappe</span> -- chocolate, graham, and marshmallow blended</li>
            </ul>

            <p class="mt-10"><a class="text-amber-300 underline hover:text-amber-200" href="/">&larr; Back to Home</a></p>
        </div>
    </body>
    </html>
    """


if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=5000)

What is new here:

@app.route("/") and @app.route("/quiz") -- each URL runs one Python function.
Tailwind: the <script src="https://cdn.tailwindcss.com"></script> line in <head> enables the class="..." styling.
I created app.py and pasted the code

Step 2: Install Flask

Open the terminal (View > Terminal) and run:

pip install flask

If that fails, try pip3 install flask.

Flask is installed

Step 3: Run your app

Open app.py, save (Cmd+S or Ctrl+S)
Click the play button (top-right triangle)
In the terminal you should see Running on http://0.0.0.0:5000
In your browser go to http://localhost:5000 (Codespaces: use the Ports tab or the port popup)

Click Take the Quiz and scroll the drink lists.

To stop: click the terminal, Ctrl+C.

My app runs and I see the home page
I can open /quiz and see drink ideas

Copy the pattern from /quiz:

In app.py, find if __name__ == "__main__":
Above that line, add @app.route("/menu") and def menu(): with return """ ... """ HTML
List drink categories (like Lattes, Cold Brew, Smoothies) with a few examples each
Use the same Tailwind look: min-h-screen bg-amber-950, headings with text-amber-300, cards with bg-amber-900/50
Add a link on the home page: <a href="/menu">Full Menu</a> next to Take the Quiz

If you get stuck, ask your AI agent to coach you (do not ask it to write the whole file). See the prompt at the bottom of this guide.

I added /menu and linked it from the home page

Step 5: Make it yours

Pick at least one:

Swap Tailwind colors (for example change amber to orange or rose in a few class names)
Add your real favorite 7 Brew drinks to the lists
Add another route when you are ready
I customized at least one thing

Part 3: Save to GitHub

Save all files
Source Control -- message: add 7 brew flask app with tailwind
Commit, then Sync Changes

I committed and synced my Flask app

Set Your Goal for Next Week

Open TODO.md again. Replace your rough line with one specific thing you will do before next class. Examples:

"Make the quiz interactive -- pick a vibe and show only those drinks."
"Add emoji or short descriptions for each drink."
"Polish the home page and add a footer."

Write one clear sentence -- not "work on my app."

I updated TODO.md with one specific goal for next week
I saved, committed, and synced

I'm building a 7 Brew drink finder Flask app for Demo Day. This week I'm working on: [e.g. first run / adding /menu / Tailwind classes / an error].

Here's my code (or the part that matters):
[paste app.py or one route]
What goes wrong (or what I am trying to figure out): [describe. Paste terminal errors if any].

Please do not rewrite my whole file. Tell me what to check first, then small steps. Explain new words in one sentence.

You can also highlight a line and ask: "What does this line do?"

Annie: Week 4: Catch Up and Start Your Coffee App

Check In: What Are You Working On?

Part 1: Essential Project Catch-up

Add `v0-prompt.md`

Add `vibe-code-report.md`

Commit Part 1

Part 2: Build Your 7 Brew Drink Finder

Step 1: Create `app.py`

Step 2: Install Flask

Step 3: Run your app

Step 4: Add a `/menu` page yourself

Step 5: Make it yours

Part 3: Save to GitHub

Set Your Goal for Next Week

Troubleshooting

"No module named flask"

The play button does not show

"Address already in use"

Page looks plain (no colors)

Route "Not Found"

Source Control shows no changes

Resources

Get Help From Your AI Agent