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.

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:
# 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]

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

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.

Step 1: Create app.py

Create app.py and paste:

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>Screen Time Tracker</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-slate-950 text-slate-100">
        <div class="mx-auto max-w-2xl px-6 py-12">
            <h1 class="text-3xl font-bold text-cyan-400">Screen Time Tracker</h1>
            <p class="mt-1 text-sm text-slate-400">Take back your time</p>
            <p class="mt-6 text-slate-300">Track screen time, view stats, and build better phone habits.</p>
            <div class="mt-8 flex flex-wrap gap-3">
                <a class="rounded-lg bg-cyan-400 px-4 py-2 font-semibold text-slate-950 hover:bg-cyan-300" href="/log">Log Screen Time</a>
                <a class="rounded-lg border border-cyan-500 px-4 py-2 font-semibold text-cyan-300 hover:bg-cyan-500/10" href="/stats">View Stats</a>
            </div>
        </div>
    </body>
    </html>
    """


@app.route("/log")
def log():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>Log Screen Time</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-slate-950 text-slate-100">
        <div class="mx-auto max-w-2xl px-6 py-12">
            <h1 class="text-2xl font-bold text-cyan-400">Log Screen Time</h1>
            <p class="mt-2 text-slate-400">Practice form layout. Saving to a database comes later.</p>
            <form class="mt-8 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-300">App name</label>
                    <input class="mt-1 w-full rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-white placeholder-slate-500 focus:border-cyan-500 focus:outline-none" type="text" placeholder="Instagram, TikTok, YouTube">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300">Hours spent</label>
                    <input class="mt-1 w-full rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-white focus:border-cyan-500 focus:outline-none" type="number" step="0.5" placeholder="2.5">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300">Date</label>
                    <input class="mt-1 w-full rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-white focus:border-cyan-500 focus:outline-none" type="date">
                </div>
                <button class="rounded-lg bg-cyan-400 px-4 py-2 font-semibold text-slate-950 hover:bg-cyan-300" type="button">Log It (UI only for now)</button>
            </form>
            <p class="mt-10"><a class="text-cyan-400 underline hover:text-cyan-300" href="/">&larr; Back to Home</a></p>
        </div>
    </body>
    </html>
    """


@app.route("/stats")
def stats():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>Your Stats</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-slate-950 text-slate-100">
        <div class="mx-auto max-w-3xl px-6 py-12">
            <h1 class="text-2xl font-bold text-cyan-400">Your Stats</h1>
            <p class="mt-2 text-slate-400">Example data for now -- we will hook up real data later.</p>
            <div class="mt-8 overflow-hidden rounded-xl border border-slate-700">
                <table class="w-full border-collapse text-left text-sm">
                    <thead class="bg-slate-900 text-cyan-300">
                        <tr>
                            <th class="px-4 py-3">App</th>
                            <th class="px-4 py-3">Hours</th>
                            <th class="px-4 py-3">Goal</th>
                            <th class="px-4 py-3">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-700">
                        <tr class="bg-slate-900/80">
                            <td class="px-4 py-3">Instagram</td>
                            <td class="px-4 py-3">3.5</td>
                            <td class="px-4 py-3">1.5</td>
                            <td class="px-4 py-3 font-semibold text-rose-400">Over by 2.0 hrs</td>
                        </tr>
                        <tr class="bg-slate-900/50">
                            <td class="px-4 py-3">TikTok</td>
                            <td class="px-4 py-3">4.0</td>
                            <td class="px-4 py-3">1.0</td>
                            <td class="px-4 py-3 font-semibold text-rose-400">Over by 3.0 hrs</td>
                        </tr>
                        <tr class="bg-slate-900/80">
                            <td class="px-4 py-3">YouTube</td>
                            <td class="px-4 py-3">1.0</td>
                            <td class="px-4 py-3">2.0</td>
                            <td class="px-4 py-3 font-semibold text-emerald-400">Under goal</td>
                        </tr>
                        <tr class="bg-slate-900/50">
                            <td class="px-4 py-3">Snapchat</td>
                            <td class="px-4 py-3">0.5</td>
                            <td class="px-4 py-3">1.0</td>
                            <td class="px-4 py-3 font-semibold text-emerald-400">Under goal</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="mt-6 rounded-xl bg-slate-900 p-4 text-center text-lg font-semibold text-cyan-200">
                Total screen time: <span class="text-white">9.0 hours</span>
            </div>
            <p class="mt-10"><a class="text-cyan-400 underline hover:text-cyan-300" href="/">&larr; Back to Home</a></p>
        </div>
    </body>
    </html>
    """


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.

Step 2: Install Flask

pip install flask

Try pip3 install flask if needed.

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.

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.

Part 3: Save to GitHub

Message example: add screen time flask app with tailwind

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."

Troubleshooting

"No module named flask"

pip install flask or pip3 install flask.

Unstyled page

Missing Tailwind script in <head>, 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__":.

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.