Lesson 16 · Project

Final project: Kanban

Put everything together into one app.

Before we start: a house is built from the foundations up

Nobody builds a house by hanging the curtains first and then looking for where to put the walls. The order is the opposite: a plan (where the rooms will be), the foundations, the shell, then the wiring and plumbing – and the furniture last. Each phase stands on the previous one, and when the foundations are done well, the upper floors hold up on their own.

An app is built the same way:

The plan = types. What data exists and what does it look like? A card, a column, a priority, an action.
The foundations = logic without UI. A reducer that can add, edit, move and delete a card. You can try it out without a single component.
The shell = static UI. Columns and cards that only display data – no clicking yet.
The wiring = interactivity. Handlers, forms, a modal, persistence.
The furniture = improvements. Drag & drop, undo, performance – only once the foundation stands.

Now it's time to put everything together. Build a Kanban board – a small but real app that uses most of what you've learned. Work through the milestones and tick each one off.

Warm-up

Challenge

A task card

Warm-up

Before you tackle the whole kanban, warm up on its smallest part – a single card.

Task (the same text is in the comment at the top of the file)

CHALLENGE: A task card

The task list and the delete function are done. The TaskCard component doesn't show anything yet.

1. In TaskCard, render the task title: {task.title}
2. Make the "×" button call onDelete(task.id)

This is the smallest piece of the kanban you'll build in the project below.

🧩 Where do the things not defined here come from

CSS classes like row, stack, card, list, btn, input or muted are the course's ready-made styles in src/styles.css (row = side by side, stack = stacked, card = bordered box, muted = grey text).

Loading the interactive part…

I'm done

Milestones

Architecture decisions

Before you start writing, think about these questions. Each one matches an image from the course: a notebook (state), a bank account (reducer), a loudspeaker (Context), a drawer (ref), the light in a room (effect). The reference solution picks the answers in the right-hand column – yours may differ.

Question	Reference solution	Why
Where do the cards live?	useReducer + Context	Many different actions on the same data (the bank account), and several components need it (the loudspeaker). State and dispatch in separate contexts.
Do I store the column in the card, or the cards in the columns?	column in the card, a flat array	Moving = changing one value, no copying between arrays. The card counts in the columns are simply computed.
Where is the search text?	Local useState in Board	A thing in one component's pocket. In an app with a router it would belong in the address (the wish list for a room).
A card edit in progress?	A local draft in the modal	Papers on the desk: it goes to the "bank" only after Save, so Cancel doesn't have to undo anything.
How does undo work?	A history in the reducer	The reducer is the only place where changes happen – the bank statement comes for free.
Persistence?	An effect syncs cards → localStorage	localStorage is the outside world (the light in the room); the reducer's lazy initialization loads it on start.

How do I split the code into several files?

Mark whatever should be visible in another file with export. In the other file you take it with import, using a path relative to the current file (without the extension):

// kanban/types.ts
export type ColumnId = 'todo' | 'doing' | 'done'
export interface Card { id: string; title: string; column: ColumnId }

// kanban/boardReducer.ts
import type { Card } from './types'          // "import type" = type only, it disappears after compilation
export function boardReducer(…) { … }

// Kanban.tsx (one folder up)
import { boardReducer } from './kanban/boardReducer'

A named export (export function X) is imported in curly braces under the same name. export default can appear only once per file and is imported without braces under any name. That's how the challenge files imported by the lesson work. One component per file is a good rule; the types and the reducer get their own files.

How does native drag & drop work (the bonus milestone)?

The browser can handle dragging by itself; you just need to tell it three things:

// 1) WHAT is dragged: the element needs draggable and "packs" its data at the start
<li draggable onDragStart={(e) => e.dataTransfer.setData('text/plain', card.id)}>

// 2) WHERE it may be dropped: without preventDefault the browser forbids the drop
<section onDragOver={(e) => e.preventDefault()}

// 3) WHAT happens on drop: unpack the data and send an action
         onDrop={(e) => {
           const id = e.dataTransfer.getData('text/plain')
           dispatch({ type: 'card_moved', id, column: 'done' })
         }}>

dataTransfer is a "box" that travels with the dragged element. It holds only text, which is why you put the card's ID in it, not the whole object. The reducer then performs the move just as it does for the ← → buttons; only who sends the action changes.

Challenge

A Kanban board

Hard Bonus challenge

Try the reference solution in the "Reference solution" tab – it saves to localStorage, so it survives a reload.

🔒 Bonus challenge

Medium and hard challenges are a bonus for signed-in readers. Signing up is free – just an e-mail, no password.

Where to next

Next.js or React Router (framework mode) – Server Components, Server Actions, SSR and file-based routing.
Testing – Vitest + React Testing Library; reducers and hooks are the easiest to test.
Accessibility – React Aria or Radix for components that work with a keyboard and a screen reader.
React Compiler – turn it on in a project and watch how many manual memos you can delete.
react.dev – the official documentation is excellent; read the "Learn" and "Escape Hatches" sections in full.

Summary

An app is built from the foundations up: types (the plan) → reducer (the foundations) → static UI (the shell) → interactivity (the wiring).
Put each piece of state where it belongs: reducer/Context, local state, the URL, localStorage.
Derive whatever can be computed; effects only for external systems.
Congratulations – you've finished the whole course! 🎉

Loading lesson…

💬 Found a mistake, something unclear, or have an idea? Let me know.