> Source URL: /users/josiah-c/week-4.path
---
week: 4
date: 2026-04-01
---
# Josiah: Week 4: Start Your Screen Time App
You are building an app that helps people spend less time on their phone by tracking screen time, friends, and goals. This week you put a **first Flask version** online: real pages in the browser that you can iterate on.
If you had a v0-style prototype, it might look fancier than this first Flask build. That is normal. We start with a clear structure (routes + HTML), use **Tailwind CSS** via CDN so it still looks intentional, and improve features week by week.
---
## Check In: What Are You Working On?
Before we jump in, open (or create) `TODO.md`. Write a quick sentence about what you are planning to do today -- even something rough like "Set up my screen time app in Flask." You will come back and sharpen this at the end when you know more.
- [ ] I have a TODO.md with a rough sentence for today
---
## Part 1: Essential Project Catch-up
Your repo currently has `v0-prompt.md`, but it does **not** yet have a completed `vibe-code-report.md` or `TODO.md`. Those matter for Demo Day planning. Week 1 practice files are optional (see the end of this section).
### Add `vibe-code-report.md`
1. Create a new file named `vibe-code-report.md` in the project root.
2. Use this outline and fill it in honestly:
```markdown
# Vibe Code Report
## Prototype Link
[Paste your v0 link here, or write: **No v0 link yet** -- I will prototype in Flask first.]
## What I Built (or what I plan to build first)
- Project idea (1-2 sentences):
- Platform used (v0, or "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 or not realistic for week one]
```
- [ ] I created `vibe-code-report.md` and filled every section
### Commit Part 1
1. Save files: **Ctrl+S** or **Cmd+S**
2. **Source Control** -- message: `add vibe code report for screen time app`
3. **Commit**, **Sync Changes**
- [ ] I committed and synced
**Optional practice (not required for Demo Day):** If you want, replace the prompt text in `favs.py` with a tiny Python script (artist + song + `print`), or add a `warmup.py` screen-time math practice. Skip this if you would rather spend your hour on Flask.
---
## Part 2: Build Your Flask App
Flask maps URLs to Python functions. Each function returns HTML as a string. Styling uses Tailwind classes -- see [Tailwind CSS](../../resources/tailwind.resource.md).
### Step 1: Create `app.py`
Create `app.py` and paste:
```python
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return """
Screen Time Tracker
Screen Time Tracker
Take back your time
Track screen time, view stats, and build better phone habits.
"""
@app.route("/log")
def log():
return """
Log Screen Time
Log Screen Time
Practice form layout. Saving to a database comes later.
← Back to Home
"""
@app.route("/stats")
def stats():
return """
Your Stats
Your Stats
Example data for now -- we will hook up real data later.
| App |
Hours |
Goal |
Status |
| Instagram |
3.5 |
1.5 |
Over by 2.0 hrs |
| TikTok |
4.0 |
1.0 |
Over by 3.0 hrs |
| YouTube |
1.0 |
2.0 |
Under goal |
| Snapchat |
0.5 |
1.0 |
Under goal |
Total screen time: 9.0 hours
← Back to Home
"""
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=5000)
```
The log form is **UI only** for now (button type `button`) so you are not stuck on POST handling until you are ready.
- [ ] I created `app.py` and pasted the code
### Step 2: Install Flask
```bash
pip install flask
```
Try `pip3 install flask` if needed.
- [ ] Flask installed
### Step 3: Run the app
1. Save `app.py`
2. Click the **play button**
3. Open port **5000** in the browser (Codespaces: Ports tab / popup -- local: `http://localhost:5000`)
Visit `/`, `/log`, and `/stats`.
**Stop:** terminal focus, **Ctrl+C**.
- [ ] All three pages load
### Step 4 (challenge): Add `/friends`
Your pitch mentioned friends. Add a leaderboard page at `/friends` using the same pattern as `/stats`, with 3--4 fake names. Link to it from the home page.
- [ ] I added `/friends` (optional but great if you have time)
---
## Part 3: Save to GitHub
Message example: `add screen time flask app with tailwind`
- [ ] I committed and synced
---
## Set Your Goal for Next Week
Now that you have built something, open `TODO.md` again. Replace what is there with **one specific thing** you will work on before next class. You know much more now than when you started. Examples:
- "Make the log form save entries and show them on `/stats`."
- "Add a page to set daily goals per app."
- "Add a friends leaderboard page with fake data first."
Write one clear sentence -- not "work on my app."
- [ ] `TODO.md` has one specific goal for next week
- [ ] I saved, committed, and synced
---
## Troubleshooting
### "No module named flask"
`pip install flask` or `pip3 install flask`.
### Unstyled page
Missing Tailwind script in ``, or browser cache -- save, restart Flask, refresh.
### "Address already in use"
**Ctrl+C** in the terminal, run again.
### Route not found
Check `@app.route` sits above `if __name__ == "__main__":`.
---
## Resources
- [Flask](../../resources/flask.resource.md)
- [Tailwind CSS](../../resources/tailwind.resource.md)
- [GitHub Codespaces Guide](../../resources/github-codespaces.guide.md)
- [Cursor Guide](../../resources/cursor.resource.md)
- [GitHub Basics](../../resources/github-basics.guide.md)
- [Prompting Cheat Sheet](../../resources/prompting-cheat-sheet.guide.md)
- [Project Folder Guide](../../resources/gh-project-folder.guide.md)
---
## Get Help From Your AI Agent
> I'm building a **screen time tracker** Flask app for Demo Day. This week I'm working on: **[e.g. first three routes / adding /friends / styling with Tailwind]**.
>
> Here is my code:
>
> ```
> [paste app.py or one function]
> ```
>
> I'm stuck because: **[describe]. Paste any error from the terminal here:**
>
> ```
> [errors]
> ```
>
> Do not rewrite my whole app. Suggest **checks in order**, then **small edits**. Explain new terms in one sentence.
---
## Backlinks
The following sources link to this document:
- [Week 4: Fix Up and Start Your Screen Time App](/users/josiah-c/index.path.llm.md)