Jake: Week 4: Start Building Your Baseball App

You have a prototype of your baseball training app from v0. That prototype may look very polished -- v0 is built for fast UI. This week you start rebuilding the idea in Flask with Python you can read and change. Your first version will look simpler than v0 on purpose. We add structure first, then keep improving toward Demo Day (April 29th).

Design still matters: this guide uses Tailwind CSS (via CDN) so your pages look clean without huge custom CSS blocks. See Tailwind CSS.

Your v0 prototype: https://v0.dev/chat/baseball-mvp-app-f5tJhByUkhT
Use it as a reference for features and layout, not as something your Flask app must match on day one.

Check In: What Are You Working On?

Open TODO.md. Does it describe what you are actually doing today? If not, update it now -- even a rough line like "Start building the baseball app in Flask" is fine. You will refine this at the end.

I read my TODO and it roughly matches today's focus (update if not)

Part 1: Essential Project Catch-up

These steps fix project files your instructors need to review and that unblock your build. Practice-only work is optional (see the bottom of this section).

Rename files that start with a space

Your repo still has v0-prompt.md and vibe-code-report.md -- notice the accidental space before the letter v. That breaks tools and links.

In the file explorer, find each file that starts with a space
Right-click -- Rename
Delete the space at the very beginning so the names are exactly v0-prompt.md and vibe-code-report.md
Save / commit after renaming (see below)

v0-prompt.md has no leading space in the filename
vibe-code-report.md has no leading space in the filename

Finish `vibe-code-report.md`

Open vibe-code-report.md after renaming. Make sure it includes:

A clear prototype link (you already have one -- keep it)
Features list -- what your MVP includes
Reflection -- a few sentences for:
- How you feel about how the prototype turned out
- What you would change with more time
- What you would keep the same
Known limitations -- what does not work yet (for example: pages that do not save data)
Reflection and limitations are filled in, not just the top section

Commit your catch-up

Save all files: Ctrl+S (Windows/Chromebook) or Cmd+S (Mac)
Source Control -- message: rename v0 files, complete vibe code report
Commit, then Sync Changes

I committed and synced my catch-up work

Optional (not required): Your warmup.py can stay as extra practice. If you want, add a formula and a print line so it runs -- but that is not required for your baseball app or Demo Day path.

Part 2: Create Your Flask App

Flask connects URLs to Python functions. Each function returns HTML as a string. For now everything lives in app.py so you can see the full path from Python to browser.

Step 1: Create `app.py`

In the file explorer, create a new file named app.py (use the New File icon or right-click -- same idea in Codespaces and Cursor).

Paste:

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>Baseball Training App</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-slate-900 text-white">
        <div class="mx-auto max-w-2xl px-6 py-12">
            <h1 class="text-3xl font-bold text-rose-500">Baseball Training App</h1>
            <p class="mt-2 text-slate-400">By Jake F.</p>
            <p class="mt-6 text-slate-200">Welcome to your personal baseball training program. Pick a section below.</p>
            <div class="mt-8 flex flex-wrap gap-3">
                <a class="rounded-lg bg-rose-500 px-4 py-2 font-semibold text-slate-900 shadow hover:bg-rose-400" href="/drills">Drills &amp; Workouts</a>
                <a class="rounded-lg border-2 border-rose-500 px-4 py-2 font-semibold text-rose-400 hover:bg-rose-500/10" href="/nutrition">Nutrition</a>
            </div>
        </div>
    </body>
    </html>
    """


@app.route("/drills")
def drills():
    return """
    <html>
    <head>
        <meta charset="utf-8">
        <title>Drills &amp; Workouts</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="min-h-screen bg-slate-900 text-white">
        <div class="mx-auto max-w-2xl px-6 py-12">
            <h1 class="text-2xl font-bold text-rose-500">Drills &amp; Workouts</h1>
            <h2 class="mt-8 text-lg font-semibold text-slate-200">Hitting</h2>
            <ul class="mt-3 list-inside list-disc space-y-2 text-slate-300">
                <li>Tee work -- 50 swings, contact point</li>
                <li>Soft toss -- 30 reps, hands inside</li>
                <li>Live BP -- 20 pitches</li>
            </ul>
            <h2 class="mt-8 text-lg font-semibold text-slate-200">Fielding</h2>
            <ul class="mt-3 list-inside list-disc space-y-2 text-slate-300">
                <li>Ground balls -- 25 each side</li>
                <li>Pop flies -- 15 reps</li>
                <li>Quick release -- 20 throws</li>
            </ul>
            <p class="mt-10"><a class="text-rose-400 underline hover:text-rose-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)

Notes:

@app.route("/") -- homepage
@app.route("/drills") -- drills page
Tailwind -- classes like bg-slate-900 and text-rose-500 style the page. The script in <head> must stay there.
The Nutrition link is on the homepage, but the /nutrition route is not in this paste yet -- you add it in Step 4.
I created app.py and pasted the starter code

Step 2: Install Flask

Open the terminal (Terminal > New Terminal in Codespaces, or View > Terminal in Cursor):

pip install flask

Use pip3 install flask if the first command fails.

Flask installed without errors

Step 3: Run your app

Open app.py, save it
Click the play button (triangle) in the top-right
When the terminal shows the server running on port 5000:
- Codespaces: use the port forward popup or the Ports tab, open port 5000 in the browser
- Local Cursor: open http://localhost:5000

You should see the dark homepage with Drills & Workouts and Nutrition. Drills should work. Nutrition will 404 until Step 4.

Stop the server: focus the terminal, Ctrl+C.

Homepage loads
/drills works

Step 4: Add the `/nutrition` page yourself

Copy the pattern from /drills:

In app.py, find if __name__ == "__main__":
Above that line, add @app.route("/nutrition") and def nutrition(): with return """ ... """ HTML
List foods and drinks that help baseball players (5--8 items is enough)
Use the same Tailwind look as the other pages (min-h-screen bg-slate-900, headings, a link back to /)

I added /nutrition and the Nutrition link on the home page works

Step 5: Make it yours

Ideas:

Swap Tailwind colors (for example rose-500 to emerald-500)
Change drill bullets to what you actually do
Add another route when you are ready (schedule, compare, etc.)
I customized at least one thing

Part 3: Save Everything to GitHub

Save all files
Source Control -- message: add flask baseball app with tailwind
Commit, Sync Changes

I pushed my Flask work to GitHub

Set Your Goal for Next Week

Now that you have built something, open TODO.md again and replace what is there with one specific thing you will work on before next class. You have a much better idea now than you did at the start. Examples:

"Add a weekly schedule page and link it from the home page."
"Add a /compare page with Ronald Acuna Jr. stats (even if numbers are placeholder at first)."
"Improve nutrition content and add one more training page."

Write one clear sentence -- not "work on my app."

TODO.md has one specific goal for next week
I saved, committed, and synced

I'm building my baseball training Flask app for Demo Day. This week I'm working on: [e.g. adding /nutrition / fixing an error / styling with Tailwind].

Here's my code:
[paste app.py or one route]
Problem: [describe it. Paste terminal errors here].

Please do not replace my whole project. Tell me what to check first, then small changes to try. Define new terms in one sentence.

You can also highlight a line and ask: "What does this part do?"

Jake: Week 4: Start Building Your Baseball App

Check In: What Are You Working On?

Part 1: Essential Project Catch-up

Rename files that start with a space

Finish `vibe-code-report.md`

Commit your catch-up

Part 2: Create Your Flask App

Step 1: Create `app.py`

Step 2: Install Flask

Step 3: Run your app

Step 4: Add the `/nutrition` page yourself

Step 5: Make it yours

Part 3: Save Everything to GitHub

Set Your Goal for Next Week

Troubleshooting

"No module named flask"

Play button missing or nothing runs

"Address already in use"

Page looks unstyled

"Not Found" for Nutrition

Source Control / sync issues

Resources

Get Help From Your AI Agent