Milestone 1: the static board
The whole app as of milestone 1, in one file. Each // ---- src/... ---- comment marks where a real file starts. No state yet: change SEED_TASKS and the board follows.
Milestone 1: build the board as a static version first, components drawn from data with props only and no state, using composition so a Column can hold any content, and style it with plain CSS.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a count badge to Column that turns red when the column has more than 3 cards (a WIP limit).
Write a Board that shows an <h2> "No tasks yet" when tasks is empty, instead of three empty columns.
Explain it without notes
Why build a static version of the UI first?
How does composition with children make Column reusable?
Why must the card key be the task id and not the index?
Preview
Console
Nothing logged yet.