The Prompt Vault is now a web app — consolidate Flask, Jinja2, and the full project structure
Day 30 of 80
Day 26 — Installed Flask, understood routes, rendered your first template. The "Hello World" of web apps.
Day 27 — GET vs POST, request.form, the Post-Redirect-Get pattern. Built a mini form app.
Day 28 — Built the real Prompt Vault web app: three routes (/, /add, /delete/<index>), full Jinja2 template with cards, form, and delete buttons.
Day 29 — Added filtering and platform stats: a /filter/<platform> route, count dictionary, highlighted filter bar, optional copy-to-clipboard.
Your helpers.py was never touched. The same functions that powered a CLI tool now power a browser app. That's the payoff of writing clean, reusable modules.
Close this file. Try each from memory. If any stumps you, scroll back to the day it was introduced.
| # | Milestone | Day Introduced |
|---|---|---|
| 1 | Explain what a route is and how @app.route() maps a URL to a Python function |
Day 26 |
| 2 | Create HTML templates with Jinja2 — {{ }} for values, {% %} for logic |
Day 28 |
| 3 | Handle form submissions with POST and read data from request.form |
Day 27–28 |
| 4 | Pass data from Python to an HTML template using keyword arguments in render_template() |
Day 28–29 |
| 5 | Reuse helpers.py functions in both the CLI and the web app without modification |
Day 28 |
Every interaction with your web app follows the same cycle. Internalize this and Flask stops feeling magical:
| Step | What Happens | Your Code |
|---|---|---|
| 1. Browser sends request | User visits a URL or submits a form | — |
| 2. Flask matches the route | @app.route("/add") matches /add |
@app.route() decorator |
| 3. Python function runs | Your function executes — reads data, writes JSON, calls APIs | def add_prompt(): |
| 4. Template renders | Jinja2 fills in {{ variables }} with Python values |
render_template("index.html", prompts=...) |
| 5. Browser receives HTML | The rendered page arrives and displays | — |
{# This is a comment — not visible in the rendered HTML #}
{# Output a variable #}
<p>{{ prompts | length }} prompts saved</p>
{# Conditional #}
{% if prompts %}
<p>Here are your prompts</p>
{% else %}
<p>No prompts yet</p>
{% endif %}
{# Loop — loop.index0 is zero-based, loop.index is one-based #}
{% for p in prompts %}
<p>{{ loop.index }}. {{ p.platform }} — {{ p.shot }}</p>
{% endfor %}
{# Ternary (inline if/else) #}
<div style="background: {{ '#2563eb' if active_filter == 'all' else '#1a1a1a' }}">
{# Filters: lower, upper, length, replace #}
<span class="platform-{{ p.platform | lower }}">{{ p.platform | upper }}</span>items() on dicts, dot notation for attribute access, comparison operators. When in doubt, try it — Flask will show you a clear error in the browser if Jinja2 can't evaluate an expression.
Week 7 is where the project gets genuinely exciting: you wire Claude directly into the web app. A form in the browser will let you type a shot description, click "Generate", and receive a production-ready AI video prompt — written by Claude, displayed on the page, ready to save. You'll also add a search bar so you can find prompts by keyword. By the end of Week 7, the Prompt Vault is a real AI-powered tool.
| Week 7 Day | Focus |
|---|---|
| Day 31 | Watch Flask Parts 5–7, plan the Claude integration |
| Day 32 | Build: Add the /generate route — Claude writes the prompt |
| Day 33 | Build: Add search — filter prompts by keyword |
| Day 34 | Build: Polish the UI with DVP design skills |
| Day 35 | Week 7 Review |
If you have time today, open templates/index.html and apply your DVP design system colors. Your AI filmmaker brand has a color palette, typography, and visual language — use it here. Week 7 Day 34 is officially the polish day, but there's no rule against starting early. A tool you're proud to look at is a tool you'll actually use.
index.htmlDay 31 opens Week 7 with more Flask video content (Parts 5–7) and a planning session for the two new features you'll build: AI generation with Claude, and keyword search. Come in with your project running and your dev environment ready.