Annie: Week 5: Add Real Drink Data

You have made serious progress. Your 7 Brew drink finder app has four routes (/, /vibes, /popular, /swipe), a shared layout in base.html with Tailwind, and Jinja templates for every page. That is more advanced than expected - you are ahead of the curve.

Right now your pages exist but the drink data is mostly placeholder. This week you will put real drink information into your app by storing drinks as a Python list and passing them to your templates so the pages fill themselves automatically.

Your app: run app.py with the play button to see it at the URL shown in the terminal.

v0 prototype for reference: 7 Brew Drink Picker

Check In: What Are You Working On?

Open TODO.md in your project (create it if you do not have one yet - right-click in the file explorer, New File, name it TODO.md).

Write a rough sentence about what you plan to do today. Something like:

Add real 7 Brew drinks to my vibes and popular pages.

You will sharpen this at the end.

Part 1: Essential Catch-up

Your vibe-code-report.md file has a prototype link, but the rest is still the template with brackets. Fill it in now so your instructors can see your progress.

Open vibe-code-report.md and replace any leftover [bracket] sections with your real answers. Here is what each section needs:

  • Prototype Link - you already have this, keep it
  • What I Plan to Build First - describe your 7 Brew drink picker in 1-2 sentences, list 3-5 features you want (vibe categories, popular drinks, swipe cards, etc.)
  • Reflection - how you feel about the project so far, what you would change, what you would keep
  • Known Limitations - what is not built yet (be honest - maybe prices, real drink names, interactivity)

This should take about 5 minutes. Write in your own words - short answers are fine.

Optional bonus: Your favs.py has a small bug - the second print line says "artist" but it is printing your song. You can fix this if you want, but it is not required.

Part 2: Python Practice

Try this on your own before working on your app. Create a new file called practice.py.

Challenge: Build a "drink menu receipt" that calculates the total cost of a coffee order.

Your program should:

  • Store the customer's name as a variable
  • Store at least 3 drink names and their prices as separate variables
  • Calculate the subtotal by adding the prices together
  • Calculate tax using a formula: tax = subtotal * 0.08
  • Calculate the grand total: total = subtotal + tax
  • Print a formatted receipt with borders, each drink with its price, and the totals

Example output (yours will have different drinks and prices):

╔══════════════════════════════════════╗
  7 Brew Order Receipt
──────────────────────────────────────
  Customer: Annie

  Caramel Latte           $5.25
  Strawberry Energy       $4.75
  S'mores Frappe          $5.50
──────────────────────────────────────
  Subtotal:              $15.50
  Tax (8%):               $1.24
  Total:                 $16.74
╚══════════════════════════════════════╝

Hints:

  • Start with your variables: customer = "Annie", drink_1 = "Caramel Latte", price_1 = 5.25
  • Add prices: subtotal = price_1 + price_2 + price_3
  • The tax formula: tax = subtotal * 0.08
  • Use f-strings to line things up: print(f" {drink_1:<24}${price_1:.2f}")
  • The :<24 part pads the drink name to 24 characters so the prices line up. The :.2f shows exactly 2 decimal places.
  • Use print("═" * 38) for the borders

Need a refresher?

  • Variables - how to store text and numbers

  • Print Statements - how to display output, use f-strings, and format cards

Part 3: Add Real Drink Data to Your App

Your templates are ready. Right now the drink information is probably hard-coded in the HTML. You are going to move it into Python so you can manage it in one place and let Jinja fill in the pages automatically.

Step 1: Add a drink list in app.py

Open app.py. Near the top of the file (after your imports and app = Flask(__name__) line), add a Python list of drink dictionaries:

drinks = [
    {"name": "Caramel Latte", "vibe": "sweet", "price": 5.25, "description": "Smooth espresso with rich caramel and cream"},
    {"name": "Double Shot Americano", "vibe": "bold", "price": 4.50, "description": "Two shots of espresso with water - strong and simple"},
    {"name": "Strawberry Energy Infusion", "vibe": "fruity", "price": 4.75, "description": "Strawberry and citrus with a caffeine boost"},
    {"name": "S'mores Frappe", "vibe": "sweet", "price": 5.50, "description": "Chocolate, graham, and marshmallow blended together"},
    {"name": "Cold Brew Black", "vibe": "bold", "price": 4.00, "description": "Smooth cold brew served straight up"},
    {"name": "Peach Mango Smoothie", "vibe": "fruity", "price": 5.00, "description": "Blended peach and mango - bright and refreshing"},
    {"name": "White Chocolate Mocha", "vibe": "sweet", "price": 5.75, "description": "Sweet white chocolate with espresso and steamed milk"},
    {"name": "Blue Raspberry Chiller", "vibe": "fruity", "price": 4.50, "description": "Blue raspberry with lemonade over ice"},
]

This is a list (the [ ] brackets) of dictionaries (the { } curly braces). Each dictionary holds info about one drink. You can add, remove, or change drinks here and every page that uses this list will update automatically.

Step 2: Pass the drinks to your template

Find your /vibes route in app.py. It probably looks something like:

@app.route("/vibes")
def vibes():
    return render_template("vibes.html")

Change it to pass the drink list:

@app.route("/vibes")
def vibes():
    return render_template("vibes.html", drinks=drinks)

The drinks=drinks part sends your Python list to the template. The left side (drinks) is the name you will use inside the template. The right side (drinks) is the Python variable you created in Step 1.

Step 3: Use a Jinja for loop in your template

Open templates/vibes.html. Find the section where your drinks are listed (or where you want them to appear). Replace the hard-coded drink cards with a Jinja for loop:

{% for drink in drinks %}
<div class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3 mb-2">
    <span class="font-semibold text-amber-300">{{ drink.name }}</span>
    <span class="text-amber-200/60"> - ${{ drink.price }}</span>
    <p class="mt-1 text-sm text-amber-100/80">{{ drink.description }}</p>
</div>
{% endfor %}

Here is what is happening:

  • {% for drink in drinks %} starts a loop - it runs once for every drink in your list
  • {{ drink.name }} prints the drink's name. The double curly braces {{ }} mean "put this value here"
  • {{ drink.price }} prints the price
  • {{ drink.description }} prints the description
  • {% endfor %} marks the end of the loop

If you want to show only one vibe category (like just the sweet drinks), you can filter:

{% for drink in drinks %}
    {% if drink.vibe == "sweet" %}
    <div class="rounded-lg border-l-4 border-amber-400 bg-amber-900/50 px-4 py-3 mb-2">
        <span class="font-semibold text-amber-300">{{ drink.name }}</span>
        <span class="text-amber-200/60"> - ${{ drink.price }}</span>
        <p class="mt-1 text-sm text-amber-100/80">{{ drink.description }}</p>
    </div>
    {% endif %}
{% endfor %}

This adds an {% if %} check inside the loop. Only drinks where vibe equals "sweet" will show up. You can make separate sections for each vibe this way.

Step 4: Test it

  1. Save all files (Cmd+S)
  2. If the app is still running, click inside the terminal and press Ctrl+C to stop it
  3. Click the play button to restart the app
  4. Open the vibes page in your browser and check that the drinks show up

If you see drinks on the page, the for loop is working. Try adding a new drink to the list in app.py, save, restart, and refresh - the new drink should appear automatically.

Challenge: Add drinks to the popular page too

Do the same thing for your /popular route:

  1. In app.py, update the popular route to pass the drinks:
@app.route("/popular")
def popular():
    return render_template("popular.html", drinks=drinks)
  1. In templates/popular.html, add a Jinja for loop to display the drinks
  2. For the popular page, try adding real 7 Brew drinks with real prices. Here are some to get you started:
{"name": "The OG Cold Brew", "vibe": "bold", "price": 4.29, "description": "7 Brew's classic cold brew - smooth and strong"},
{"name": "Cookie Dough Chill", "vibe": "sweet", "price": 5.49, "description": "Cookie dough flavor blended with espresso and cream"},
{"name": "Mango Tango Infusion", "vibe": "fruity", "price": 4.99, "description": "Mango and tropical flavors with an energy boost"},

Add these to your drinks list in app.py and they will show up on both pages automatically.

Part 4: Save to GitHub

Save your work using the Source Control tab:

  1. Save all files: Cmd+S
  2. Click the Source Control icon on the left sidebar
  3. Type a message like: add real drink data to vibes and popular pages
  4. Click Commit, then Sync Changes

Set Your Goal: Add a New Feature

Pick one new feature to work on before next week:

  • Swipe cards with real data - pass the drinks list to your swipe page and show real drinks in the cards
  • Vibe filter buttons - add buttons at the top of the vibes page (Sweet, Bold, Fruity) that show only that category's drinks
  • Drink detail page - click a drink name and see a full page with more info about that drink

How to use the AI chat to help you build it

  1. Open the AI chat panel:

    • Codespaces: Click the chat icon in the left sidebar, or press Ctrl+I
    • Cursor: Press Cmd+L

  2. Describe what you want. Be specific:

I'm building a 7 Brew drink picker app in Flask with Jinja templates. I have a drinks list in app.py and I'm passing it to my templates. I want to add filter buttons on the vibes page so users can click "Sweet" or "Bold" and only see drinks with that vibe. I already have a drink.vibe field in my data. Can you help me understand how to do this step by step? Don't just give me the answer - help me understand the steps.

  1. Read what it gives you before pasting it in. If something doesn't make sense, ask:

"Explain the part about query parameters. How does Flask read what button the user clicked?"

  1. After adding the code, run your app (play button) and test it.

  2. If something breaks, copy the error and ask:

"I got this error: [paste error]. What's wrong?"

For more prompts, see the Prompting Cheat Sheet.

Update your TODO.md

Open TODO.md and replace the current text with your chosen feature. Be specific:

  • Good: "Add filter buttons to the vibes page so users can pick sweet, bold, or fruity"

  • Not good: "work on my app"

Troubleshooting

TemplateNotFound error

This means Flask cannot find your HTML file. Check:

  • Your templates are in a folder called exactly templates/ (not template or Templates)
  • The filename in render_template("vibes.html") matches the actual file name exactly (case-sensitive)
  • The templates/ folder is in the same directory as app.py

Jinja {% %} or {{ }} not working

  • Make sure you are using {% %} for logic (for loops, if statements) and {{ }} for printing values
  • Check that you closed every {% for %} with {% endfor %} and every {% if %} with {% endif %}
  • If you see the raw {{ drink.name }} text on the page instead of the value, Flask may not be rendering the template - make sure you are using render_template() not returning a plain string

Drinks don't show up on the page

  • Check that you passed the list in the route: render_template("vibes.html", drinks=drinks)
  • In the template, make sure the variable name matches: {% for drink in drinks %} uses the same name you passed
  • Check the terminal for errors - Python will tell you the line number if something is wrong

Variable not showing or showing wrong value

  • {{ drink.name }} uses a dot to access dictionary keys, not brackets
  • Make sure each drink dictionary has the key you are trying to use (check spelling: "name" not "Name")

"No module named flask"

Run pip install flask or pip3 install flask in the terminal.

"Address already in use"

Ctrl+C in the terminal to stop the old process, then click the play button again.

Page looks plain (no styling)

Check that your base.html has the Tailwind CDN script in the <head>:

<script src="https://cdn.tailwindcss.com"></script>

Save, restart the app, and hard-refresh the browser.

Something else isn't working

Ask the AI agent:

"I'm building a 7 Brew drink picker in Flask with Jinja templates. I'm getting this error: [paste the error]. I was trying to pass a list of drinks to my template and loop through them. What's wrong?"

Or ask your instructor.

Resources