Layout and UI

Goal

This snapshot advances Ironclad Gazette by teaching you to render Thymeleaf pages with Bootstrap 5.

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

Prerequisites

Use Java 17+, Maven, a terminal, and Docker for MySQL stages. You should recognize classes, annotations, and HTTP verbs.

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

• Java 17 and Maven
• A code editor and terminal
• Docker from part 4 onward

Concepts

Thymeleaf templates escape values by default. Shared layout fragments keep navigation consistent; Bootstrap provides readable defaults.

Keep controllers thin: accept input, delegate to repositories or services, and let Thymeleaf escape output by default.

Walkthrough

Configure Thymeleaf templates, pass sample posts to the home page, and compose pages with a layout fragment.

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

model.addAttribute("posts", sampleCards);
return "home";

Run and verify

Enter 03-Layout-And-UI, start MySQL when needed, copy .env.example, and run mvn spring-boot:run on port 8080.

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

git clone https://github.com/michaeldunga1/fcc-spring-blog.git
cd fcc-spring-blog/03-Layout-And-UI
cp .env.example .env
mvn spring-boot:run

Troubleshooting

TemplateInputException usually means the templates path or fragment name is wrong.

Connection refused usually means Docker MySQL is stopped or the port is not 3308. For auth issues, confirm you are using email (not username) on the login form.

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

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