Task Manager

{task.done ? "✓" : "○"} {task.title} ({task.priority})

); `, }} /> Try changing `priority: "high"` to `priority: "urgent"` in the lab. The editor marks it red, because `"urgent"` is not a `Priority`. Types catch mistakes before you run the app. ## Building Reusable Components Next, split the screen into small parts that you can use again: - `Button` — one button style for the whole app. The `variant` prop picks the colour: `variant = "plain"` is the default value. - `PriorityBadge` — a coloured label. `className={"badge " + priority}` gives classes like `badge high`. - `TaskCard` — one task row, with a checkbox, the title, the badge and a Delete button. `TaskCard` does not change any data itself. It receives the task and two functions, `onToggle` and `onRemove`, and calls them. The parent decides what happens. This keeps the card simple and reusable.

Task Manager

{tasks.map((task) => ( ))} ); } `, "TaskCard.tsx": `import { memo } from "react"; interface TaskCardProps { task: Task; onToggle: (task: Task) => void; onRemove: (id: number) => void; } function TaskCard({ task, onToggle, onRemove }: TaskCardProps) { return (

onToggle(task)} /> {task.title}

The nav bar links to each URL. A * route catches everything else.

In the lab below: - `` makes a link. NavLink adds the class `active` to the link of the current page, so the CSS can highlight it. `end` means "only for exactly `/`". - `` has a **URL parameter**. In `TaskDetailPage`, `const { id } = useParams();` reads it. - `` catches any unknown URL and shows "Page not found". Click a task title, then use the address bar's Back button. {sampleTasks.map((t) => (

{t.title}

))} ); } function TaskDetailPage() { const { id } = useParams(); const task = sampleTasks.find((t) => t.id === Number(id)); if (!task) return

Task not found.

; return (

{task.title}

Priority:

Status: {task.done ? "done" : "to do"}

Back to the list

); } return (

Task Manager

} /> } /> A small task app for the Book Corner team.

} /> Page not found.

} />

); } `, "PriorityBadge.tsx": `import type { Priority } from "./types"; return {priority}; } `, "types.ts": `export type Priority = "low" | "medium" | "high"; id: number; title: string; priority: Priority; done: boolean; } // A task before the server gives it an id `, "data.ts": `import type { Task } from "./types"; { id: 1, title: "Order new books", priority: "high", done: false }, { id: 2, title: "Update the price list", priority: "medium", done: true }, { id: 3, title: "Clean the shelves", priority: "low", done: false }, ]; `, "styles.css": `.app { max-width: 480px; font-family: sans-serif; } h1 { margin: 0 0 4px; color: #2b59c3; } nav { display: flex; gap: 8px; margin: 8px 0 14px; } nav a { color: #2b59c3; text-decoration: none; padding: 4px 10px; border-radius: 6px; } nav a.active { background: #2b59c3; color: white; } .btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #bbb; background: white; cursor: pointer; } .btn.primary { background: #2b59c3; border-color: #2b59c3; color: white; } .btn.danger { border-color: #d33; color: #d33; } .badge { padding: 1px 8px; border-radius: 10px; font-size: 12px; } .badge.high { background: #fde2e2; color: #b42318; } .badge.medium { background: #fff3cd; color: #8a6d00; } .badge.low { background: #e3f6e8; color: #1e7b34; } .task { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 6px; } .task .title { flex: 1; } .task.done .title { text-decoration: line-through; color: #888; } .filters { display: flex; gap: 6px; margin-bottom: 10px; } form { display: grid; gap: 8px; margin-bottom: 12px; } input, select { padding: 6px; } .error { color: #b42318; margin: 0; } .bar { height: 10px; background: #eee; border-radius: 5px; } .bar div { height: 10px; background: seagreen; border-radius: 5px; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## Managing State Across the Application Many parts of the app need the task list: the header shows how many tasks are left, the list page shows them, and the stats page counts them. Passing the list through props to all of them would be messy. So the tasks live in a **context**, managed by a **reducer**. Open the `TasksContext.tsx` tab: - `tasksReducer` is the only place that changes the list. Each `case` handles one action: `"added"`, `"toggled"` or `"removed"`. - `TasksProvider` wraps the app and shares the tasks and three functions: `addTask`, `toggleTask`, `removeTask`. - `useTasks()` is a small custom hook. Any component calls it to get the tasks. It throws a clear error if you forget the provider.

Pages never call fetch. They ask the context, which asks the service.

{tasks.map((t: Task) => ( ))} ); } `, "Button.tsx": `import type { ReactNode } from "react"; interface ButtonProps { children: ReactNode; onClick?: () => void; variant?: "primary" | "danger" | "plain"; type?: "button" | "submit"; } return ( ); } `, "PriorityBadge.tsx": `import type { Priority } from "./types"; return {priority}; } `, "types.ts": `export type Priority = "low" | "medium" | "high"; id: number; title: string; priority: Priority; done: boolean; } // A task before the server gives it an id `, "data.ts": `import type { Task } from "./types"; { id: 1, title: "Order new books", priority: "high", done: false }, { id: 2, title: "Update the price list", priority: "medium", done: true }, { id: 3, title: "Clean the shelves", priority: "low", done: false }, ]; `, "styles.css": `.app { max-width: 480px; font-family: sans-serif; } h1 { margin: 0 0 4px; color: #2b59c3; } nav { display: flex; gap: 8px; margin: 8px 0 14px; } nav a { color: #2b59c3; text-decoration: none; padding: 4px 10px; border-radius: 6px; } nav a.active { background: #2b59c3; color: white; } .btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #bbb; background: white; cursor: pointer; } .btn.primary { background: #2b59c3; border-color: #2b59c3; color: white; } .btn.danger { border-color: #d33; color: #d33; } .badge { padding: 1px 8px; border-radius: 10px; font-size: 12px; } .badge.high { background: #fde2e2; color: #b42318; } .badge.medium { background: #fff3cd; color: #8a6d00; } .badge.low { background: #e3f6e8; color: #1e7b34; } .task { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 6px; } .task .title { flex: 1; } .task.done .title { text-decoration: line-through; color: #888; } .filters { display: flex; gap: 6px; margin-bottom: 10px; } form { display: grid; gap: 8px; margin-bottom: 12px; } input, select { padding: 6px; } .error { color: #b42318; margin: 0; } .bar { height: 10px; background: #eee; border-radius: 5px; } .bar div { height: 10px; background: seagreen; border-radius: 5px; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Tick a checkbox. The header count changes too, because `Header` and `TaskList` read the same context. ## Creating, Validating, and Managing Tasks Now users can add their own tasks. `TaskForm` is a controlled form: the input's value comes from state. Before saving, `validateTitle` checks the title and returns an error message, or `""` when all is well: - `if (text === "") return "Please enter a title.";` — the title cannot be empty. - `if (text.length < 3) return "Title must be at least 3 characters.";` — too short. `validateTitle` is a plain function outside the component, so it is easy to read and to test. The list also gets **filters**: All, Active and Done. The filter is local state in the list, because no other component needs it. filter === "all" ? true : filter === "done" ? t.done : !t.done, ); return (

Task Manager

{(["all", "active", "done"] as Filter[]).map((f) => ( ))}

{visible.map((t: Task) => ( ))}

); } return ( ); } `, "TaskForm.tsx": `import { useState, type FormEvent } from "react"; const text = title.trim(); if (text === "") return "Please enter a title."; if (text.length < 3) return "Title must be at least 3 characters."; if (text.length > 50) return "Title must be 50 characters or less."; return ""; } const [title, setTitle] = useState(""); const [priority, setPriority] = useState("medium"); const [error, setError] = useState(""); async function handleSubmit(e: FormEvent) { e.preventDefault(); const message = validateTitle(title); setError(message); if (message) return; await onAdd({ title: title.trim(), priority, done: false }); setTitle(""); } return ( ); } `, "TasksContext.tsx": `import { createContext, useContext, useReducer, type ReactNode } from "react"; type Action = | { type: "added"; task: NewTask } | { type: "toggled"; id: number } | { type: "removed"; id: number }; function tasksReducer(tasks: Task[], action: Action): Task[] { switch (action.type) { case "added": return [...tasks, { ...action.task, id: Date.now() }]; case "toggled": return tasks.map((t) => (t.id === action.id ? { ...t, done: !t.done } : t)); case "removed": return tasks.filter((t) => t.id !== action.id); } } interface TasksValue { tasks: Task[]; addTask: (task: NewTask) => void; toggleTask: (task: Task) => void; removeTask: (id: number) => void; } const TasksContext = createContext(null); const [tasks, dispatch] = useReducer(tasksReducer, sampleTasks); const value: TasksValue = { tasks, addTask: (task) => dispatch({ type: "added", task }), toggleTask: (task) => dispatch({ type: "toggled", id: task.id }), removeTask: (id) => dispatch({ type: "removed", id }), }; return {children}; } const ctx = useContext(TasksContext); if (!ctx) throw new Error("useTasks must be used inside "); return ctx; } `, "TaskCard.tsx": `import { memo } from "react"; interface TaskCardProps { task: Task; onToggle: (task: Task) => void; onRemove: (id: number) => void; } function TaskCard({ task, onToggle, onRemove }: TaskCardProps) { return (

onToggle(task)} /> {task.title}

); } `, "Button.tsx": `import type { ReactNode } from "react"; interface ButtonProps { children: ReactNode; onClick?: () => void; variant?: "primary" | "danger" | "plain"; type?: "button" | "submit"; } return ( ); } `, "PriorityBadge.tsx": `import type { Priority } from "./types"; return {priority}; } `, "types.ts": `export type Priority = "low" | "medium" | "high"; id: number; title: string; priority: Priority; done: boolean; } // A task before the server gives it an id `, "data.ts": `import type { Task } from "./types"; { id: 1, title: "Order new books", priority: "high", done: false }, { id: 2, title: "Update the price list", priority: "medium", done: true }, { id: 3, title: "Clean the shelves", priority: "low", done: false }, ]; `, "styles.css": `.app { max-width: 480px; font-family: sans-serif; } h1 { margin: 0 0 4px; color: #2b59c3; } nav { display: flex; gap: 8px; margin: 8px 0 14px; } nav a { color: #2b59c3; text-decoration: none; padding: 4px 10px; border-radius: 6px; } nav a.active { background: #2b59c3; color: white; } .btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #bbb; background: white; cursor: pointer; } .btn.primary { background: #2b59c3; border-color: #2b59c3; color: white; } .btn.danger { border-color: #d33; color: #d33; } .badge { padding: 1px 8px; border-radius: 10px; font-size: 12px; } .badge.high { background: #fde2e2; color: #b42318; } .badge.medium { background: #fff3cd; color: #8a6d00; } .badge.low { background: #e3f6e8; color: #1e7b34; } .task { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 6px; } .task .title { flex: 1; } .task.done .title { text-decoration: line-through; color: #888; } .filters { display: flex; gap: 6px; margin-bottom: 10px; } form { display: grid; gap: 8px; margin-bottom: 12px; } input, select { padding: 6px; } .error { color: #b42318; margin: 0; } .bar { height: 10px; background: #eee; border-radius: 5px; } .bar div { height: 10px; background: seagreen; border-radius: 5px; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Try to add "Hi". You see the error message. Then add "Call the publisher". ## Working with APIs So far, tasks live only in memory. A real app saves them on a server. The playground has a pretend API at `https://api.bookcorner.dev/tasks` that supports GET, POST, PUT and DELETE. All the fetch code lives in one file, `taskService.ts`: - `request` is one helper for every call. It sends JSON, checks `response.ok`, and throws an error when the server fails. - `taskService.getAll()`, `create()`, `update()` and `remove()` each make one request. The context now calls the service and keeps `loading` and `error` in its state. Components do not change at all: they still call `useTasks()`. That is the power of the layers.

Task Manager

{loading &&

Loading tasks...

} {error &&

{error}

} {tasks.map((t: Task) => ( ))} ); } return ( ); } `, "TasksContext.tsx": `import { createContext, useCallback, useContext, useEffect, useReducer, type ReactNode } from "react"; interface State { tasks: Task[]; loading: boolean; error: string; } type Action = | { type: "loaded"; tasks: Task[] } | { type: "failed"; error: string } | { type: "added"; task: Task } | { type: "updated"; task: Task } | { type: "removed"; id: number }; function reducer(state: State, action: Action): State { switch (action.type) { case "loaded": return { tasks: action.tasks, loading: false, error: "" }; case "failed": return { ...state, loading: false, error: action.error }; case "added": return { ...state, tasks: [...state.tasks, action.task] }; case "updated": return { ...state, tasks: state.tasks.map((t) => (t.id === action.task.id ? action.task : t)) }; case "removed": return { ...state, tasks: state.tasks.filter((t) => t.id !== action.id) }; } } interface TasksValue extends State { addTask: (task: NewTask) => Promise; toggleTask: (task: Task) => void; removeTask: (id: number) => void; } const TasksContext = createContext(null); const [state, dispatch] = useReducer(reducer, { tasks: [], loading: true, error: "" }); useEffect(() => { taskService .getAll() .then((tasks) => dispatch({ type: "loaded", tasks })) .catch(() => dispatch({ type: "failed", error: "Could not load your tasks. Please try again." })); }, []); const addTask = useCallback(async (task: NewTask) => { const saved = await taskService.create(task); dispatch({ type: "added", task: saved }); }, []); const toggleTask = useCallback(async (task: Task) => { try { const saved = await taskService.update({ ...task, done: !task.done }); dispatch({ type: "updated", task: saved }); } catch { dispatch({ type: "failed", error: "Could not save the change." }); } }, []); const removeTask = useCallback(async (id: number) => { await taskService.remove(id); dispatch({ type: "removed", id }); }, []); return ( {children} ); } const ctx = useContext(TasksContext); if (!ctx) throw new Error("useTasks must be used inside "); return ctx; } `, "taskService.ts": `import type { NewTask, Task } from "./types"; const API = "https://api.bookcorner.dev/tasks"; // One helper for every request: sends JSON, checks the status, reads the JSON async function request(url: string, options: RequestInit = {}): Promise { const response = await fetch(url, { ...options, headers: { "Content-Type": "application/json" }, }); if (!response.ok) { throw new Error("Request failed with status " + response.status); } if (response.status === 204) return undefined as T; return response.json(); } getAll: () => request(API), create: (task: NewTask) => request(API, { method: "POST", body: JSON.stringify(task) }), update: (task: Task) => request(API + "/" + task.id, { method: "PUT", body: JSON.stringify(task) }), remove: (id: number) => request(API + "/" + id, { method: "DELETE" }), }; `, "TaskForm.tsx": `import { useState, type FormEvent } from "react"; const text = title.trim(); if (text === "") return "Please enter a title."; if (text.length < 3) return "Title must be at least 3 characters."; if (text.length > 50) return "Title must be 50 characters or less."; return ""; } const [title, setTitle] = useState(""); const [priority, setPriority] = useState("medium"); const [error, setError] = useState(""); async function handleSubmit(e: FormEvent) { e.preventDefault(); const message = validateTitle(title); setError(message); if (message) return; await onAdd({ title: title.trim(), priority, done: false }); setTitle(""); } return ( ); } `, "TaskCard.tsx": `import { memo } from "react"; interface TaskCardProps { task: Task; onToggle: (task: Task) => void; onRemove: (id: number) => void; } function TaskCard({ task, onToggle, onRemove }: TaskCardProps) { return (

onToggle(task)} /> {task.title}

); } `, "Button.tsx": `import type { ReactNode } from "react"; interface ButtonProps { children: ReactNode; onClick?: () => void; variant?: "primary" | "danger" | "plain"; type?: "button" | "submit"; } return ( ); } `, "PriorityBadge.tsx": `import type { Priority } from "./types"; return {priority}; } `, "types.ts": `export type Priority = "low" | "medium" | "high"; id: number; title: string; priority: Priority; done: boolean; } // A task before the server gives it an id `, "styles.css": `.app { max-width: 480px; font-family: sans-serif; } h1 { margin: 0 0 4px; color: #2b59c3; } nav { display: flex; gap: 8px; margin: 8px 0 14px; } nav a { color: #2b59c3; text-decoration: none; padding: 4px 10px; border-radius: 6px; } nav a.active { background: #2b59c3; color: white; } .btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #bbb; background: white; cursor: pointer; } .btn.primary { background: #2b59c3; border-color: #2b59c3; color: white; } .btn.danger { border-color: #d33; color: #d33; } .badge { padding: 1px 8px; border-radius: 10px; font-size: 12px; } .badge.high { background: #fde2e2; color: #b42318; } .badge.medium { background: #fff3cd; color: #8a6d00; } .badge.low { background: #e3f6e8; color: #1e7b34; } .task { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 6px; } .task .title { flex: 1; } .task.done .title { text-decoration: line-through; color: #888; } .filters { display: flex; gap: 6px; margin-bottom: 10px; } form { display: grid; gap: 8px; margin-bottom: 12px; } input, select { padding: 6px; } .error { color: #b42318; margin: 0; } .bar { height: 10px; background: #eee; border-radius: 5px; } .bar div { height: 10px; background: seagreen; border-radius: 5px; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> Watch the console. Each action prints a line like `[API] PUT /tasks/1 → 200`. The pretend server starts fresh on every Run, just like a test database. ## Handling Errors, Optimizing Performance, and Final Review The last step joins everything into the finished app, and adds the finishing touches from Chapter 9: - **Errors.** The context catches failed requests and stores a friendly message. An `ErrorBoundary` around the pages shows a fallback if a page crashes, while the header and nav keep working. - **Performance.** `TaskCard` is wrapped in `memo`. The context functions use `useCallback`, so they stay the same and `memo` can skip cards that did not change. The filtered list uses `useMemo`. - **Loading.** `StatsPage` is loaded with `lazy`, inside `Suspense`, so its code downloads only when someone opens it. Here is the complete Task Manager. Open every tab and follow how the parts connect.

Task Manager

{left} tasks left

); } return (

Sorry, this page could not be shown.

}> Loading page...

}> } /> } /> } /> Page not found.

} />

); } `, "TasksContext.tsx": `import { createContext, useCallback, useContext, useEffect, useReducer, type ReactNode } from "react"; interface State { tasks: Task[]; loading: boolean; error: string; } type Action = | { type: "loaded"; tasks: Task[] } | { type: "failed"; error: string } | { type: "added"; task: Task } | { type: "updated"; task: Task } | { type: "removed"; id: number }; function reducer(state: State, action: Action): State { switch (action.type) { case "loaded": return { tasks: action.tasks, loading: false, error: "" }; case "failed": return { ...state, loading: false, error: action.error }; case "added": return { ...state, tasks: [...state.tasks, action.task] }; case "updated": return { ...state, tasks: state.tasks.map((t) => (t.id === action.task.id ? action.task : t)) }; case "removed": return { ...state, tasks: state.tasks.filter((t) => t.id !== action.id) }; } } interface TasksValue extends State { addTask: (task: NewTask) => Promise; toggleTask: (task: Task) => void; removeTask: (id: number) => void; } const TasksContext = createContext(null); const [state, dispatch] = useReducer(reducer, { tasks: [], loading: true, error: "" }); useEffect(() => { taskService .getAll() .then((tasks) => dispatch({ type: "loaded", tasks })) .catch(() => dispatch({ type: "failed", error: "Could not load your tasks. Please try again." })); }, []); const addTask = useCallback(async (task: NewTask) => { const saved = await taskService.create(task); dispatch({ type: "added", task: saved }); }, []); const toggleTask = useCallback(async (task: Task) => { try { const saved = await taskService.update({ ...task, done: !task.done }); dispatch({ type: "updated", task: saved }); } catch { dispatch({ type: "failed", error: "Could not save the change." }); } }, []); const removeTask = useCallback(async (id: number) => { await taskService.remove(id); dispatch({ type: "removed", id }); }, []); return ( {children} ); } const ctx = useContext(TasksContext); if (!ctx) throw new Error("useTasks must be used inside "); return ctx; } `, "taskService.ts": `import type { NewTask, Task } from "./types"; const API = "https://api.bookcorner.dev/tasks"; // One helper for every request: sends JSON, checks the status, reads the JSON async function request(url: string, options: RequestInit = {}): Promise { const response = await fetch(url, { ...options, headers: { "Content-Type": "application/json" }, }); if (!response.ok) { throw new Error("Request failed with status " + response.status); } if (response.status === 204) return undefined as T; return response.json(); } getAll: () => request(API), create: (task: NewTask) => request(API, { method: "POST", body: JSON.stringify(task) }), update: (task: Task) => request(API + "/" + task.id, { method: "PUT", body: JSON.stringify(task) }), remove: (id: number) => request(API + "/" + id, { method: "DELETE" }), }; `, "TaskListPage.tsx": `import { useMemo, useState } from "react"; type Filter = "all" | "active" | "done"; const { tasks, loading, error, toggleTask, removeTask } = useTasks(); const [filter, setFilter] = useState("all"); const visible = useMemo( () => tasks.filter((t: Task) => (filter === "all" ? true : filter === "done" ? t.done : !t.done)), [tasks, filter], ); if (loading) return

Loading tasks...

; if (error) return

{error}

; return (

{(["all", "active", "done"] as Filter[]).map((f) => ( ))}

{visible.length === 0 &&

No tasks here.

} {visible.map((t: Task) => ( ))}

); } `, "NewTaskPage.tsx": `import { useNavigate } from "react-router-dom"; const { addTask } = useTasks(); const navigate = useNavigate(); async function handleAdd(task: NewTask) { await addTask(task); navigate("/"); // go back to the list after saving } return (

New task

); } `, "StatsPage.tsx": `import type { Task } from "./types"; const { tasks } = useTasks(); const done = tasks.filter((t: Task) => t.done).length; const percent = tasks.length ? Math.round((done / tasks.length) * 100) : 0; return (

Stats

{done} of {tasks.length} tasks done ({percent}%)

); } `, "TaskForm.tsx": `import { useState, type FormEvent } from "react"; const text = title.trim(); if (text === "") return "Please enter a title."; if (text.length < 3) return "Title must be at least 3 characters."; if (text.length > 50) return "Title must be 50 characters or less."; return ""; } const [title, setTitle] = useState(""); const [priority, setPriority] = useState("medium"); const [error, setError] = useState(""); async function handleSubmit(e: FormEvent) { e.preventDefault(); const message = validateTitle(title); setError(message); if (message) return; await onAdd({ title: title.trim(), priority, done: false }); setTitle(""); } return ( ); } `, "TaskCard.tsx": `import { memo } from "react"; interface TaskCardProps { task: Task; onToggle: (task: Task) => void; onRemove: (id: number) => void; } function TaskCard({ task, onToggle, onRemove }: TaskCardProps) { return (

onToggle(task)} /> {task.title}

); } `, "Button.tsx": `import type { ReactNode } from "react"; interface ButtonProps { children: ReactNode; onClick?: () => void; variant?: "primary" | "danger" | "plain"; type?: "button" | "submit"; } return ( ); } `, "PriorityBadge.tsx": `import type { Priority } from "./types"; return {priority}; } `, "ErrorBoundary.tsx": `import { Component, type ErrorInfo, type ReactNode } from "react"; interface Props { children: ReactNode; fallback: ReactNode; } state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error: Error, info: ErrorInfo) { console.log("Caught: " + error.message); } render() { return this.state.hasError ? this.props.fallback : this.props.children; } } `, "types.ts": `export type Priority = "low" | "medium" | "high"; id: number; title: string; priority: Priority; done: boolean; } // A task before the server gives it an id `, "styles.css": `.app { max-width: 480px; font-family: sans-serif; } h1 { margin: 0 0 4px; color: #2b59c3; } nav { display: flex; gap: 8px; margin: 8px 0 14px; } nav a { color: #2b59c3; text-decoration: none; padding: 4px 10px; border-radius: 6px; } nav a.active { background: #2b59c3; color: white; } .btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #bbb; background: white; cursor: pointer; } .btn.primary { background: #2b59c3; border-color: #2b59c3; color: white; } .btn.danger { border-color: #d33; color: #d33; } .badge { padding: 1px 8px; border-radius: 10px; font-size: 12px; } .badge.high { background: #fde2e2; color: #b42318; } .badge.medium { background: #fff3cd; color: #8a6d00; } .badge.low { background: #e3f6e8; color: #1e7b34; } .task { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 6px; } .task .title { flex: 1; } .task.done .title { text-decoration: line-through; color: #888; } .filters { display: flex; gap: 6px; margin-bottom: 10px; } form { display: grid; gap: 8px; margin-bottom: 12px; } input, select { padding: 6px; } .error { color: #b42318; margin: 0; } .bar { height: 10px; background: #eee; border-radius: 5px; } .bar div { height: 10px; background: seagreen; border-radius: 5px; } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ### Final review checklist Before you call a project finished, check: - **It works.** Add, tick, delete and filter tasks. Visit every page, and an unknown URL. - **Bad input is handled.** Empty and short titles show a clear message. - **Failures are handled.** Loading and error messages show. A crash in one page does not blank the whole app. - **The code is tidy.** Each file has one job. Types are used everywhere. No API URL is copied into components. - **It is fast enough.** No large wasted re-renders, and rare pages load lazily. Easy Way to Remember: types first, then parts, pages, state, forms, API, and finally polish. ### Ideas to go further - Add a due date to each task and sort by it. - Add an edit page at `/tasks/:id/edit`. - Add a login page and protect the pages, as in the User Access Control lesson. ## Download Project Files The complete Task Manager is ready as a real Vite + React + TypeScript project. It has the same code as the final lab, split into a realistic folder structure, plus a small local API that saves your tasks in a file. Download Capstone Project: [Download Task Management Project](/downloads/react/task-management-project.zip) ### What is inside ``` task-manager/ package.json scripts and dependencies vite.config.ts Vite settings index.html the page with

.env VITE_API_URL=http://localhost:3001 db.json the tasks, saved by the local API src/ main.tsx createRoot + render App.tsx providers, router and routes types/task.ts the Task type components/ Button, PriorityBadge, TaskCard, TaskForm, Header, NavBar, ErrorBoundary pages/ TaskListPage, NewTaskPage, TaskDetailPage, StatsPage, NotFoundPage context/ TasksContext (useReducer + useTasks) services/ apiClient + taskService (all fetch calls) utils/ validateTask.ts ``` ### How to download, set up and run 1. **Install Node.js** 18 or newer from nodejs.org, if you do not have it yet. 2. **Download** the ZIP file with the link above. 3. **Unzip** it. You get a folder called `task-manager`. 4. **Open a terminal** in that folder (in VS Code: File, Open Folder, then Terminal, New Terminal). 5. **Install** the packages: ```bash npm install ``` 6. **Start** the project: ```bash npm run dev ``` `npm run dev` starts two things together: the React app at `http://localhost:5173` (it opens in your browser), and a small REST API at `http://localhost:3001/tasks`, made with json-server. Press `Ctrl + C` in the terminal to stop both. Your tasks are saved in `db.json`. Open it while the app runs and watch it change when you add, tick or delete a task. To start again, change it back to the three sample tasks. ## Common mistakes

| Mistake | What you see | Fix | |---|---|---| | Calling `fetch` inside many components | The same URL in many files, hard to change | Keep requests in `taskService.ts` | | Using `useTasks()` outside `TasksProvider` | Error: useTasks must be used inside TasksProvider | Wrap the app in `` | | Changing the task array directly with `push` | The screen does not update | Return a new array from the reducer | | Saving a form without validation | Empty tasks in the list | Check the title with `validateTitle` first | | Forgetting `Suspense` around a lazy page | An error when the page opens | Wrap `Routes` in `` | | Building everything at once | Many bugs, hard to find | Build one step, run it, then add the next |

## Check Yourself ## Exercises ## What to Remember - A capstone joins every skill into one app. Build it in small steps and run it after each one. - Types first, then reusable components, routes, shared state in a context with a reducer, validated forms, and an API service. - Finish with error handling, `memo`/`useCallback`/`lazy` where they help, and a final review checklist. Next: Cheat Sheet