Week 7 of 16

Week 7 Review

The Prompt Vault is now a full-featured AI web app — consolidate the stack you've built

Day 35 45 minutes Review

Day 35 of 80

What You Built This Week

Week 7 in Four Days

Day 31 — Watched Flask Parts 5–7, planned both new features (AI generation and search). Drew the data flow before writing code.

Day 32 — Wired Claude into the web app. A form in the browser now calls the Anthropic API and displays the generated prompt on the page. Save it with one click.

Day 33 — Added keyword search. A GET route, a list comprehension, a search form. Bookmarkable URLs, back-button safe, case-insensitive matching across all three fields.

Day 34 — Applied DVP design skills to the frontend. Color system, platform tag colors, card hover effects, button hierarchy, copy-to-clipboard with visual feedback.

How It All Fits Together

The Full Data Flow

Every interaction in the Prompt Vault follows the same path. Understanding this flow means you can debug anything and build any new feature:

Step	Layer	Your Code
1. User action in browser	Frontend (HTML/CSS/JS)	Form submit, button click, link
2. HTTP request sent	Browser	GET or POST to a Flask route
3. Route function runs	Flask / Python	`@app.route()` decorated function
4. Data logic executes	Python helpers	`load_prompts()`, `save_prompts()`
5. (Optional) AI call	Anthropic SDK	`claude.messages.create()`
6. Template renders	Jinja2	`render_template("index.html", ...)`
7. HTML page returns	Browser	User sees the updated page

The Full Stack You Now Know

Layer	Technology	Where You Use It
Frontend	HTML, CSS, JavaScript	`templates/index.html` — structure, styling, clipboard
Templates	Jinja2	Loops, conditionals, variable output, filters
Web framework	Flask	`@app.route()`, `request.form`, `request.args`, `render_template()`, `redirect()`
Data storage	JSON files	`prompts.json` via `helpers.py`
Helper functions	Python modules	`helpers.py` — `load_prompts()`, `save_prompts()`, `validate_platform()`
AI generation	Anthropic SDK	`claude.messages.create()` in `app.py`
Environment config	python-dotenv	`.env` file → `ANTHROPIC_API_KEY`

Week 7 Milestone Review

Can You Do These Without Looking?

#	Milestone
1	Add a new Flask route that calls the Claude API and passes the result to a Jinja2 template
2	Use hidden form inputs to pass data through a multi-step form flow
3	Write a search route using `request.args` and a list comprehension with multi-field matching
4	Explain when to use GET vs POST and why search uses GET
5	Use `navigator.clipboard.writeText()` to copy text with visual feedback
6	Apply a consistent design system — platform colors, button hierarchy, hover states

The App's Complete Route Map

app.py — all routes summary Python

# GET  /                    → home()           — all prompts
# POST /add                 → add_prompt()     — save a new prompt
# GET  /delete/<int:index>  → delete_prompt()  — remove by index
# GET  /filter/<platform>  → filter_by_platform() — filter prompts
# POST /generate            → generate()       — call Claude, show result
# POST /save-generated      → save_generated() — save Claude's output
# GET  /search              → search()         — keyword search via ?q=

# Every route either:
#   render_template(...)  — display a page
#   redirect(...)         — redirect after a write operation (PRG pattern)

Seven routes. Two response types: render or redirect. The Post-Redirect-Get pattern is consistent: every route that writes data (POST) ends with a redirect(). Every route that reads data ends with render_template(). This consistency makes the app predictable — you always know what each type of route will return.

Week 8 Preview

What's Coming Next

The Prompt Vault works. Week 8 makes it bulletproof and shareable:

Error handling — What happens when the Claude API times out? When someone submits an empty form? When the JSON file gets corrupted? Week 8 handles these cases gracefully.
Flash messages — "Prompt saved!" and "Prompt deleted!" confirmations using Flask's built-in flash() system.
Deployment — Get the Prompt Vault running somewhere besides your laptop. Options: Railway, Render, or a simple VPS. Your AI filmmaker colleagues can use it.

End of Day Checklist

You reviewed all six Week 7 milestones and can do each without reference
The full route map makes sense — you can trace any user action through all seven routes
Your Prompt Vault runs cleanly: generate, save, filter, search, delete all work
The UI looks polished enough that you'd actually use it in your daily workflow
You understand the full stack: HTML/CSS → Jinja2 → Flask → helpers.py → JSON / Claude API
You're ready for Week 8: error handling, flash messages, and deployment

You're Halfway Through the Course

Day 35 of 80. Halfway. Look at what you've built since Day 1: you went from "what is a variable" to a full-stack AI web application with Claude integration, data persistence, search, filtering, and a polished frontend. Weeks 8–16 push into deployment, databases, APIs, automation, and building tools you'll actually ship. The pace accelerates from here.