Layout and UI

Goal

This snapshot advances Mossbank Post by teaching you to render a shared layout and sample cards.

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

Prerequisites

Use Go 1.22+, and Docker for Postgres stages.

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

• Go toolchain
• A code editor and terminal
• Docker from part 4 onward

Concepts

Shared layouts keep navigation consistent; Bootstrap provides readable defaults.

Keep handlers thin: templates present data, handlers enforce rules, and html/template escapes by default.

Walkthrough

Pass sample posts into the home template.

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

{{range .Posts}}
  <article class="card mb-3"><div class="card-body"><h2>{{.Title}}</h2></div></article>
{{end}}

Run and verify

Enter 03-Layout-And-UI, copy .env.example, and start Gin on port 8083.

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

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

Troubleshooting

Template not found usually means the LoadHTMLGlob pattern is wrong.

For database failures, confirm Docker and the mossbank_NN name. Never commit .env.

• Read the first error first
• Restart after environment changes
• Never commit secrets

Try this

Render a friendly empty state when posts 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