← All projects

Part 2 of this project

Layout

Sketch three columns and a top bar shell

Goal for this part

Sketch three columns and a top bar shell.

Treat 02-Layout as the source of truth for this checkpoint. If your local tree drifted, re-clone that folder rather than mixing files from neighbors.

What you should already know

You do not need prior Compose experience for part 1. Later parts assume you finished the earlier snapshots on the same machine.

  • JDK 17+ and a working Gradle wrapper are available
  • You can run ./gradlew run from a terminal
  • You have a desktop session for the Compose window

Why Compose fits Boardlane

Compose Desktop lets you build native window UIs with the same declarative Kotlin you use on Android—great for a board of cards without HTML chrome.

Columns of cards map cleanly to LazyColumns. Keep board mutations in a small repository so recomposition stays cheap.

Checkpoint

After you run the snapshot, you should recognize the behavior described in the goal—before you move on. If the window (or server) never appears, stop and fix the run steps.

Code shape

Snapshots stay small on purpose. Look for this kind of core call as you read the folder:

db.execute("INSERT INTO cards(title, column_id) VALUES (?, ?)", title, columnId)

How to run it

Clone the teaching repo, open 02-Layout, install what the README asks for, then run ./gradlew run.

git clone https://github.com/michaeldunga1/fcc-compose-kanban.git
cd fcc-compose-kanban/02-Layout
./gradlew build
./gradlew run

Common mistakes

  • Ignoring platform-specific install notes in the snapshot README
  • Editing files in the wrong numbered folder
  • Mixing layout widgets from a later snapshot into an early one
  • Forgetting to restart the app after a code change

Related tutorials