Jake: Week 5: Get Your Baseball App Running

Demo Day is April 29 - three weeks from today. You have your v0 prototype as a reference for what the app can look like, but right now your project repo has no app.py yet. That changes today.

By the end of this guide you will have a Flask app running on your computer with a home page and a drills page, styled with Tailwind CSS in dark mode with baseball colors. Once it runs, you can add features every week until Demo Day.

Check In: What Are You Working On?

Open TODO.md in your file explorer. Right now it says something vague like "work on baseball app and minor details." That is too broad to act on.

Replace everything in TODO.md with this:

## Today's Plan

- Fix warmup.py so it runs
- Rename files with leading spaces
- Create app.py with Flask
- Get the home page and drills page working

Save the file: Ctrl+S

I updated TODO.md with today's specific plan

Part 1: Essential Catch-up

Before building, let's fix two quick things from earlier weeks. This should take about 5 minutes - don't spend longer here.

Fix `warmup.py`

Your warmup.py has variables but no formula and no print() line, so it does not actually do anything when you run it.

Open warmup.py. You should see some variables already there. Add a formula line and a print line at the bottom of the file. For example, if your variables are about batting stats, add something like:

batting_average = hits / at_bats
print(f"Batting average: {batting_average}")

The key is: your file needs at least one formula that does math with your variables, and at least one print() line so you can see output when you run it.

Test it: Click the play button (triangle, top-right of the editor). You should see output in the terminal. If you get an error, read the last line - it usually tells you what is wrong (a misspelled variable name, a missing colon, etc.).

warmup.py has a formula and a print() statement
It runs without errors when I click the play button

Rename the leading-space filenames

Your repo has two files with an accidental space at the start of the name: v0-prompt.md and vibe-code-report.md. That space causes problems with tools and links.

In the file explorer (left sidebar), find v0-prompt.md - notice the space before the v
Right-click the file, choose Rename
Delete the space at the very beginning so the name is exactly v0-prompt.md
Do the same for vibe-code-report.md - rename it to vibe-code-report.md

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

Commit your catch-up

Save all files: Ctrl+S
Click the Source Control icon on the left sidebar (it looks like a branch)
Type a message: fix warmup.py and rename files
Click Commit, then Sync Changes

I committed and synced my catch-up work

Part 2: Python Practice

Try this on your own before working on your app. Create a new file called practice.py.

Challenge: Build a "player stat card" that stores a baseball player's info and calculates their batting average.

Your program should:

Store a player's name, team, at-bats, and hits as variables
Calculate the batting average using a formula: batting_average = hits / at_bats
Print a formatted stat card with borders, the player's info, and their calculated average

Example output (yours will have different data):

╔══════════════════════════════════════╗
  Player Stat Card
──────────────────────────────────────
  Name:            Jake Fox
  Team:            Vipers
  At-Bats:         120
  Hits:            42
  Batting Average: 0.35
──────────────────────────────────────
  Keep swinging!
╚══════════════════════════════════════╝

Hints:

Start with your variables: name = "Jake Fox", team = "Vipers", at_bats = 120, hits = 42
The formula: batting_average = hits / at_bats
Use f-strings to plug your variables into print statements: print(f" Name: {name}")
Use print("═" * 38) to make the top and bottom borders

Need a refresher?

Variables - how to store text and numbers
Print Statements - how to display output, use f-strings, and format cards
I wrote practice.py and it runs without errors
My output looks like a formatted stat card
I committed and synced my work

Part 3: Build Your Flask App

This is the main event. You are going to create app.py from scratch, install Flask, and get your baseball training app running in the browser.

Step 1: Install Flask

Open the terminal: **Ctrl+** (that is the backtick key, top-left of your keyboard, next to the 1` key).

Type this command and press Enter:

pip install flask

If that gives an error, try pip3 install flask instead.

You should see a message like "Successfully installed flask" when it finishes. This only needs to happen once.

Flask installed without errors

Step 2: Create `app.py`

In the file explorer (left sidebar), right-click in the empty space and choose New File. Name it app.py.

Paste this entire block of code into the file:

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-gray-950 text-white">
        <div class="mx-auto max-w-2xl px-6 py-12">
            <h1 class="text-4xl font-bold text-red-500">Baseball Training App</h1>
            <p class="mt-2 text-gray-400">By Jake Fox</p>
            <p class="mt-6 text-gray-300">
                Your personal baseball training hub. Track drills, plan nutrition,
                and level up your game before Demo Day.
            </p>
            <div class="mt-8 flex flex-wrap gap-4">
                <a class="rounded-lg bg-red-600 px-5 py-2 font-semibold text-white shadow hover:bg-red-500"
                   href="/drills">Drills &amp; Workouts</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-gray-950 text-white">
        <div class="mx-auto max-w-2xl px-6 py-12">
            <h1 class="text-3xl font-bold text-red-500">Drills &amp; Workouts</h1>

            <h2 class="mt-8 text-xl font-semibold text-gray-200">Hitting</h2>
            <ul class="mt-3 list-inside list-disc space-y-2 text-gray-300">
                <li>Tee work - 50 swings, focus on contact point</li>
                <li>Soft toss - 30 reps, keep your hands inside the ball</li>
                <li>Live BP - 20 pitches, track the ball all the way in</li>
            </ul>

            <h2 class="mt-8 text-xl font-semibold text-gray-200">Fielding</h2>
            <ul class="mt-3 list-inside list-disc space-y-2 text-gray-300">
                <li>Ground balls - 25 each side</li>
                <li>Pop flies - 15 reps</li>
                <li>Quick release throws - 20 reps</li>
            </ul>

            <p class="mt-10">
                <a class="text-red-400 underline hover:text-red-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)

Here is what each part does:

from flask import Flask - loads the Flask library so Python can build a web app
app = Flask(__name__) - creates your app. Every Flask app needs this line.
@app.route("/") - tells Flask: "when someone goes to the home page, run the function below"
def home(): - a Python function that returns the HTML for your home page
@app.route("/drills") - tells Flask: "when someone goes to /drills, run this function"
return """ ... """ - the triple quotes let you write multiple lines of HTML inside Python
<script src="https://cdn.tailwindcss.com"></script> - loads Tailwind CSS so your styling classes work
if __name__ == "__main__": - starts the server when you click the play button
app.run(debug=True, host="0.0.0.0", port=5000) - runs the app on port 5000 with debug mode on, so it shows errors in the browser

The colors use a dark theme (bg-gray-950 for the background) with red and white for a baseball feel (text-red-500, text-white).

I created app.py and pasted the starter code

Step 3: Run your app

Make sure app.py is saved: Ctrl+S
Click the play button (the triangle in the top-right corner of the editor)
Look at the terminal at the bottom. You should see something like:

 * Running on http://0.0.0.0:5000

Open your browser and go to: http://localhost:5000

You should see a dark page with a red "Baseball Training App" heading, your name, and a red "Drills & Workouts" button. Click that button - it should take you to the drills page with hitting and fielding lists.

To stop the server later: click inside the terminal and press Ctrl+C.

The home page loads at http://localhost:5000
Clicking "Drills & Workouts" goes to the drills page
The drills page has a "Back to Home" link that works

Step 4 (Challenge): Add a `/nutrition` page yourself

Now try adding a new page on your own. Follow the same pattern as the /drills route:

In app.py, find the line if __name__ == "__main__": near the bottom
Above that line, add a new route. You need three things:
- @app.route("/nutrition") - the URL
- def nutrition(): - the function name
- return """ ... """ - the HTML content
Inside the HTML, list 5-8 foods and drinks that help baseball players perform (protein sources, hydration, game-day meals, etc.)
Use the same styling as the drills page: bg-gray-950, text-red-500 for headings, text-gray-300 for list items
Include a "Back to Home" link at the bottom
On the home page, add another <a> button linking to /nutrition (copy the Drills button and change the text and href)

Save the file (Ctrl+S), stop the server (Ctrl+C in terminal), then click the play button again to restart. Check that the new Nutrition link works on the home page.

If you get stuck, look at how the /drills route is built and follow the exact same structure. Change the content, keep the pattern.

I added a /nutrition route to app.py
The Nutrition link on the home page works
The nutrition page lists foods/drinks for athletes

Part 4: Save to GitHub

Save all your work to GitHub so your instructor can see it and so you do not lose anything.

Save all open files: Ctrl+S
Click the Source Control icon on the left sidebar (it looks like a branching line)
You should see your changed files listed. If you do not see anything, make sure your files are saved.
In the Message box at the top, type: add flask baseball app with home and drills pages
Click Commit
Click Sync Changes

If a popup asks about staging changes, click Yes (stage all and commit).

I committed my changes
I synced (pushed) to GitHub

Set Your Goal: Add a New Feature

You have a working app. Now pick one specific feature to work on before next class:

Nutrition page (if you did not finish the challenge above) - list foods, drinks, and meal plans for athletes
Schedule page - a /schedule route showing a weekly practice plan (Monday: hitting, Tuesday: fielding, etc.)
Compare page - a /compare route showing your stats side-by-side with Ronald Acuna Jr.'s stats

How to use the AI chat to help you build it

Open the AI chat panel:
- Codespaces: Click the chat icon in the left sidebar, or press Ctrl+I
- Cursor: Press Ctrl+L
Describe what you want. Be specific. Here is an example you can copy and fill in:

I'm building a baseball training Flask app in app.py. I want to add a /schedule route that shows a weekly practice plan for baseball. Each day should list what type of training to do (hitting, fielding, conditioning, rest). Use the same dark theme as my other pages (bg-gray-950, text-red-500 headings, Tailwind via CDN). Include a "Back to Home" link. Explain what each part does.

Read what it gives you before pasting it in. If something does not make sense, ask:

"Explain the part about the route decorator. What does @app.route do?"

After adding the code, save (Ctrl+S), restart the app (Ctrl+C then play button), and test it in the browser.
If something breaks, copy the error from the terminal and ask:

"I got this error: [paste error]. What's wrong?"

For more prompting tips, see the Prompting Cheat Sheet.

Update your TODO.md

Open TODO.md and replace the current text with your chosen feature. Be specific:

Good: "Add a /schedule page showing my weekly practice plan"
Not good: "work on my app"
I picked a feature and wrote it in TODO.md
I tried using the AI chat to start building it
I committed and synced my work

Make sure you saved app.py (Ctrl+S)
Make sure the triple quotes """ are matched - every return """ needs a closing """
Restart the server: Ctrl+C in terminal, then play button

"Not Found" when clicking a link

Check that you have @app.route("/nutrition") (or whatever route) above the function
Make sure the route and function are above the if __name__ == "__main__": line at the bottom
Make sure the href in your link matches the route exactly (e.g., href="/nutrition" matches @app.route("/nutrition"))
Save and restart the server

Tailwind styles are not showing up

Check that <script src="https://cdn.tailwindcss.com"></script> is inside the <head> section of every page
Make sure you are connected to the internet
Save the file, restart the server, and do a hard refresh in the browser (Ctrl+Shift+R)

Source Control issues

Save all files first (Ctrl+S)
If Sync Changes fails, click the ... menu in Source Control and try Push
If it asks about setting an upstream branch, click OK

Something else is not working

Ask the AI agent:

"I'm getting this error in my Flask baseball app: [paste the error]. I just created app.py for the first time. What's wrong?"

Or ask your instructor.

Resources

Flask - how to build web pages with Python
Tailwind CSS - how to style your app with utility classes
GitHub Codespaces Guide - how to open and use Codespaces
Cursor Guide - how to open and use Cursor
GitHub Basics - how to commit and push your code
Prompting Cheat Sheet - good prompts to use with the AI agent