> Source URL: /users/john-p/week-4.path
---
week: 4
date: 2026-04-01
---
# John: Week 4: Catch Up and Start Your Budget App
You want to build a serious budget tracker for Demo Day (April 29th). Right now your repo mostly has `favs.py` from Week 1. That is a normal starting point -- we just need **project documentation** for instructors, then a **first Flask version** of your app.
**Important:** A full budget product could include accounts, forecasting, and history. Your first Flask build is an **MVP**: add expenses and see a summary. It will look simpler than a fancy website on purpose. You are learning routes, forms, and Python lists. This guide uses **Tailwind CSS** via CDN so the UI still looks intentional. See [Tailwind CSS](../../resources/tailwind.resource.md).
---
## Check In: What Are You Working On?
Create `TODO.md` if you need it. Write one rough sentence -- for example: "Document my budget app idea and build a first Flask MVP." You will replace this with a sharper goal at the end.
- [ ] I have `TODO.md` with a rough sentence for today
---
## Part 1: Essential Project Catch-up
### Add `v0-prompt.md`
Create `v0-prompt.md` and describe your budget app in plain language (no leftover brackets). Example structure:
```markdown
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:
[Track spending, see totals, and eventually help me stay under a budget]
Target user:
[Me -- and anyone who wants a simple budget view]
Build me the smallest working MVP with only 3-5 must-have features.
Features:
1. [Add an expense with amount and category]
2. [See a list of expenses and a total]
Do not add extra features yet.
```
- [ ] I saved `v0-prompt.md` with my real details
### Add `vibe-code-report.md`
Use this outline (you do not have a v0 link yet -- that is OK):
```markdown
# 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]
```
- [ ] I filled every section of `vibe-code-report.md`
### Commit Part 1
1. Save all files
2. **Source Control** -- message: `add v0 prompt and vibe code report for budget app`
3. **Commit**, then **Sync Changes**
- [ ] I committed and synced
**Optional (not required):** Update `favs.py` to use **f-strings** with `{artist}` and `{song}` instead of hardcoded text in the prints -- good practice, but not required for your budget MVP. **Optional:** add `warmup.py` with a budget-themed formula.
---
## Part 2: Build Budget Buddy in Flask
Flask connects URLs to Python functions. This MVP stores expenses in a Python **list** in memory (they reset when the server restarts -- that is fine for Week 4). Styling uses **Tailwind**. See [Flask](../../resources/flask.resource.md).
### Step 1: Install Flask
Terminal (**View > Terminal**):
```bash
pip install flask
```
Use `pip3` if needed.
- [ ] Flask installed
### Step 2: Create `app.py`
Create `app.py` and paste:
```python
from flask import Flask, request
app = Flask(__name__)
expenses = []
@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)
```
Notes:
- **`expenses`** is a list of dictionaries -- your app's memory for now.
- **`/add` needs `methods=["GET", "POST"]`** so the form can submit.
- **Tailwind** -- keep the script tag in every page ``.
- [ ] I created `app.py` and pasted the code
### Step 3: Run and test
1. Save `app.py`, click the **play button**
2. Open `http://localhost:5000` (Codespaces: **Ports** tab)
Add a few expenses, then open **View Summary**.
**Stop:** terminal focus, **Ctrl+C**.
- [ ] Home, Add, and Summary work
- [ ] Total updates after I add expenses
### Step 4 (optional): Budget limit
Add a variable like `budget_limit = 500` near `expenses = []` and show **remaining budget** on the summary page using the `total` you already calculate.
- [ ] (Optional) I experimented with a budget limit
---
## Part 3: Save to GitHub
**Source Control** -- message: `add budget buddy flask app with tailwind`
- [ ] I committed and synced
---
## Set Your Goal for Next Week
Open `TODO.md` and replace your rough line with **one specific** next step. Examples:
- "Show remaining budget against a set limit on the summary page."
- "Add a simple breakdown by category."
- "Save expenses to a file so they survive a server restart."
- [ ] I updated `TODO.md` with one specific goal for next week
- [ ] I saved, committed, and synced
---
## Troubleshooting
### "No module named flask"
`pip install flask` or `pip3 install flask`.
### Form submits but summary is empty
Check `expenses = []` is at the **top** of the file (not inside a function). Check `/add` includes `methods=["GET", "POST"]`.
### Page looks unstyled
Missing Tailwind `