> Source URL: /users/jake-f/week-5.path --- week: 5 date: 2026-04-08 --- # Jake: Week 5: Get Your Baseball App Running Demo Day is **April 29** - three weeks from today. You have your [v0 prototype](https://v0.dev/chat/baseball-mvp-app-f5tJhByUkhT) 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: ```python 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. 1. In the **file explorer** (left sidebar), find ` v0-prompt.md` - notice the space before the `v` 2. **Right-click** the file, choose **Rename** 3. Delete the space at the very beginning so the name is exactly `v0-prompt.md` 4. 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 1. Save all files: **Ctrl+S** 2. Click the **Source Control** icon on the left sidebar (it looks like a branch) 3. Type a message: `fix warmup.py and rename files` 4. 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](../../resources/variables.resource.md) - how to store text and numbers - [Print Statements](../../resources/print-statements.resource.md) - 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: ```bash 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: ```python from flask import Flask app = Flask(__name__) @app.route("/") def home(): return """ Baseball Training App

Baseball Training App

By Jake Fox

Your personal baseball training hub. Track drills, plan nutrition, and level up your game before Demo Day.

Drills & Workouts
""" @app.route("/drills") def drills(): return """ Drills & Workouts

Drills & Workouts

Hitting

Fielding

← Back to Home

""" 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 - **``** - 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 1. Make sure `app.py` is saved: **Ctrl+S** 2. Click the **play button** (the triangle in the top-right corner of the editor) 3. Look at the terminal at the bottom. You should see something like: ``` * Running on http://0.0.0.0:5000 ``` 4. 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: 1. In `app.py`, find the line `if __name__ == "__main__":` near the bottom 2. **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 3. Inside the HTML, list 5-8 foods and drinks that help baseball players perform (protein sources, hydration, game-day meals, etc.) 4. Use the same styling as the drills page: `bg-gray-950`, `text-red-500` for headings, `text-gray-300` for list items 5. Include a "Back to Home" link at the bottom 6. On the home page, add another `` 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. 1. Save all open files: **Ctrl+S** 2. Click the **Source Control** icon on the left sidebar (it looks like a branching line) 3. You should see your changed files listed. If you do not see anything, make sure your files are saved. 4. In the **Message** box at the top, type: `add flask baseball app with home and drills pages` 5. Click **Commit** 6. 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 1. Open the **AI chat panel**: - **Codespaces:** Click the chat icon in the left sidebar, or press **Ctrl+I** - **Cursor:** Press **Ctrl+L** 2. 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. 3. **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?" 4. After adding the code, save (**Ctrl+S**), restart the app (**Ctrl+C** then play button), and test it in the browser. 5. 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](../../resources/prompting-cheat-sheet.guide.md). ### 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 --- ## Troubleshooting ### "No module named flask" Run `pip install flask` in the terminal. If that does not work, try `pip3 install flask`. If you are in Codespaces and it still fails, try `python -m pip install flask`. ### The play button does not do anything Make sure `app.py` is the active file (its tab is selected at the top). Save the file first (**Ctrl+S**). If the play button still does not appear, open the terminal (**Ctrl+`**) and type `python app.py` instead. ### "Address already in use" This means the server is still running from last time. Click inside the terminal and press **Ctrl+C** to stop it. Then click the play button again. ### The page is blank or shows raw HTML - 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 `` is inside the `` 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](../../resources/flask.resource.md) - how to build web pages with Python - [Tailwind CSS](../../resources/tailwind.resource.md) - how to style your app with utility classes - [GitHub Codespaces Guide](../../resources/github-codespaces.guide.md) - how to open and use Codespaces - [Cursor Guide](../../resources/cursor.resource.md) - how to open and use Cursor - [GitHub Basics](../../resources/github-basics.guide.md) - how to commit and push your code - [Prompting Cheat Sheet](../../resources/prompting-cheat-sheet.guide.md) - good prompts to use with the AI agent --- ## Backlinks The following sources link to this document: - [Week 5: Get Your Baseball App Running](/students.path.llm.md) - [Week 5: Get Your Baseball App Running](/users/jake-f/index.path.llm.md)