Layout and UI

Goal

This snapshot advances Rivermouth Dispatch by teaching you to render Jinja2 pages with Pico.css and HTMX.

Every numbered folder is a complete app. Run this stage independently, then compare it with the previous folder.

Prerequisites

Use Python 3.11+, a terminal, and Docker for Postgres stages. You should recognize functions, modules, and HTTP verbs.

Port 8001 must be free. Copy .env.example before starting database stages.

• Python 3 and pip/venv
• A code editor and terminal
• Docker from part 4 onward

Concepts

Jinja2 templates escape values by default. Shared base layouts keep navigation consistent; Pico provides readable defaults.

Keep request handling thin: routes accept input, services/models enforce rules, and Jinja templates escape output by default.

Walkthrough

Configure templates and static files, pass sample posts to the home page, and extend a base layout.

Read the example, then open the matching snapshot. The repository includes the surrounding setup and error handling.

templates = Jinja2Templates(directory="templates")
return templates.TemplateResponse(request, "home.html", {"posts": SAMPLE})

Run and verify

Enter 03-Layout-And-UI, create a virtualenv, install requirements, copy .env.example when present, and start Uvicorn on port 8001.

Open http://127.0.0.1:8001. Watch the terminal for validation and database errors.

git clone https://github.com/michaeldunga1/fcc-fastapi-blog.git
cd fcc-fastapi-blog/03-Layout-And-UI
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
uvicorn main:app --reload --port 8001

Troubleshooting

TemplateNotFound means the templates directory path is wrong relative to main.py.

Import errors usually mean the virtualenv is inactive or you installed packages in another snapshot. For Postgres failures, confirm Docker and the rivermouth_NN database name.

• Read the first error first
• Restart after environment changes
• Never commit .env or .venv

Try this

Render a friendly empty state when the posts list is empty.

Test a happy path and one invalid or unauthorized request.

• Make one small change
• Test it in the browser
• Compare with the next snapshot only after it works