Layout and UI

View saved

Goal

This snapshot advances Baltic Post by teaching you to render FreeMarker pages with Simple.css.

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

Prerequisites

Use JDK 17+, Gradle, and Docker for Postgres stages.

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

  • JDK 17+ and Gradle
  • A code editor and terminal
  • Docker from part 4 onward

Concepts

FreeMarker templates escape values when configured. Shared layouts keep navigation consistent.

Keep handlers thin: routes accept input, Exposed tables enforce rules, and FreeMarker escapes output by default.

Walkthrough

Configure FreeMarker and pass sample posts to home.

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

call.respond(FreeMarkerContent("home.ftl", mapOf("posts" to SAMPLE)))

Run and verify

Enter 03-Layout-And-UI, run Gradle, copy .env.example, and start Ktor on port 8090.

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

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

Troubleshooting

Template not found usually means the templates resource path is wrong.

For database failures, confirm Docker and the baltic_NN name when applicable. Never commit .env or local.properties secrets.

  • 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

Next: Data Layer

Comments

One comment per signed-in account. Comments are saved with this page’s URL.