> Source URL: /users/john-p/week-5.path
---
week: 5
date: 2026-04-08
---
# John: Week 5: Build Your Budget Tracker
Demo Day is three weeks out (April 29). You have the ambition and the ideas - now you need running code. Your budget tracker concept is strong, but today we're scoping to something you can build and demo in one session: **add expenses and see a summary**. Forecasting, trends, and security are real features - they come after you have a working app to build on top of.
Today's goal: walk out of class with a running Flask app - a home page, an expense form, and a summary page with totals. Everything else is a feature you stack on later.
---
## Check In: What Are You Working On?
1. Create a file called `TODO.md` in your project folder (right-click in the file explorer > New File)
2. Write one sentence about your plan for today. Example:
```
Build a working Flask app with an expense form and summary page.
```
3. Save it (**Cmd+S**)
- [ ] I have `TODO.md` with today's plan
---
## Part 1: Essential Catch-up
### Fix `favs.py` - use your variables
Your `favs.py` defines variables but prints hardcoded strings instead of referencing them. Quick fix - this is the exact same f-string pattern you'll use in your Flask app.
Open `favs.py` and find lines like:
```python
print("Drake")
```
Change them to use **f-strings** that reference your variables:
```python
artist = "Drake"
print(f"My favorite artist is {artist}")
```
The `{artist}` part pulls the value from the variable instead of repeating the text. Do the same for any other hardcoded prints in the file.
- [ ] I updated `favs.py` to use f-strings with `{variable}` references
- [ ] I ran `favs.py` (play button) and it prints correctly
**Optional:** `v0-prompt.md` and `warmup.py` templates are in your [Week 4 guide](./week-4.path.md) if you want them. Not required today - the Flask app is the priority.
---
## Part 2: Python Practice
Create a new file called `practice.py`.
**Challenge:** Build an expense report that stores expenses as variables, calculates totals, and prints a formatted summary showing how much budget you have left.
Your program should:
- Store a budget amount (like `500`) as a variable
- Store 3-4 expenses as separate variables with descriptive names (e.g. `rent`, `groceries`, `gas`, `subscriptions`)
- Calculate the total spent by adding all the expense variables together
- Calculate the remaining budget (budget minus total spent)
- Print a formatted expense report with borders, each expense listed with its dollar amount, the total, and the remaining balance
**Example output** (use your own numbers):
```
╔══════════════════════════════════════╗
Expense Report - John's Budget
──────────────────────────────────────
Budget: $500.00
──────────────────────────────────────
Rent: $200.00
Groceries: $85.50
Gas: $45.00
Subscriptions: $15.99
──────────────────────────────────────
Total Spent: $346.49
Remaining: $153.51
╚══════════════════════════════════════╝
```
**Hints:**
- Define each expense with a clear name: `rent = 200.00`
- Add them up: `total = rent + groceries + gas + subscriptions`
- Use f-strings with formatting for dollar amounts: `f"${total:.2f}"` gives you two decimal places
- Build borders with `print("═" * 38)`
**Resources:**
- [Variables](../../resources/variables.resource.md) - how to store text and numbers
- [Print Statements](../../resources/print-statements.resource.md) - how to display output, use f-strings, and format cards
- [ ] I created `practice.py` and it runs without errors
- [ ] My output looks like a formatted expense report
- [ ] I committed and synced my work
---
## Part 3: Build Your Budget Tracker
Time to build the real thing. You're creating a Flask app with three pages:
- **Home** - landing page for Budget Buddy
- **Add Expense** - form with description, amount, and category
- **Summary** - table of all expenses with a calculated total
### Step 1: Install Flask
Open the terminal (**View > Terminal**) and run:
```bash
pip install flask
```
Use `pip3` if `pip` doesn't work.
- [ ] Flask installed
### Step 2: Create `app.py`
Create a new file called `app.py` and paste this entire block:
```python
from flask import Flask, request
app = Flask(__name__)
expenses = [
{"description": "Chipotle", "amount": 12.50, "category": "food"},
{"description": "Gas", "amount": 45.00, "category": "transport"},
{"description": "Spotify", "amount": 11.99, "category": "entertainment"},
]
@app.route("/")
def home():
return """
Budget Buddy
Budget Buddy
Track your spending. Know where your money goes.
"""
@app.route("/add", methods=["GET", "POST"])
def add():
message = ""
if request.method == "POST":
description = request.form["description"]
amount = float(request.form["amount"])
category = request.form["category"]
expenses.append({
"description": description,
"amount": amount,
"category": category,
})
message = f'Added: {description} (${amount:.2f})
'
return f"""
Add Expense - Budget Buddy
"""
@app.route("/summary")
def summary():
total = 0
rows = ""
for expense in expenses:
total = total + expense["amount"]
rows += f"""
| {expense["description"]} |
${expense["amount"]:.2f} |
{expense["category"]} |
"""
if len(expenses) == 0:
rows = '| No expenses yet. Add one. |
'
return f"""
Summary - Budget Buddy
Spending Summary
| Description |
Amount |
Category |
{rows}
Total: ${total:.2f}
Add Expense · Home
"""
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=5000)
```
Here's what's going on:
- **`expenses`** starts with 3 example items so your summary page has data right away. Each expense is a **dictionary** - a set of key-value pairs like `"description": "Chipotle"`. The whole list of dictionaries is your app's database for now (data resets when the server restarts, which is fine).
- **`/`** is the home page with links to Add and Summary.
- **`/add`** shows a form. When you submit it (`POST`), the code grabs the form data and appends a new dictionary to the `expenses` list.
- **`/summary`** loops through every expense, builds a table row for each one, and adds up the total.
- **Tailwind CSS** loads from the CDN `` is in every page's ``
- Hard refresh the browser (**Cmd+Shift+R**)
### Source Control issues
- Save all files first
- If there's no upstream branch, click "Publish Branch" when prompted
### Still stuck
Ask the AI agent:
> I'm building a budget tracker in Flask and I'm stuck on: [describe the problem]. Here's the error: [paste it]. What should I check?
Or ask your instructor.
---
## Resources
- [Flask](../../resources/flask.resource.md) - how routes, forms, and templates work
- [Tailwind CSS](../../resources/tailwind.resource.md) - styling your app with utility classes
- [GitHub Codespaces Guide](../../resources/github-codespaces.guide.md) - how to open and use Codespaces
- [Cursor Guide](../../resources/cursor.resource.md) - how to open and use Cursor
- [GitHub Basics](../../resources/github-basics.guide.md) - how to commit and push your code
- [Prompting Cheat Sheet](../../resources/prompting-cheat-sheet.guide.md) - effective prompts for the AI agent
---
## Backlinks
The following sources link to this document:
- [Week 5: Build Your Budget Tracker](/students.path.llm.md)
- [Week 5: Build Your Budget Tracker](/users/john-p/index.path.llm.md)