KudoBoard App

In this tutorial, you will build a KudoBoard app. A KudoBoard is a place where people can create boards to share kind messages and appreciation. You will create a board for someone, and then anyone can add their kudos to it.

Along the way, you will learn four React concepts:

  • Client-side routing — navigating between pages without a full page reload, using TanStack Router
  • Controlled components — building forms where React owns the form state
  • useReducer — managing complex state with actions and a reducer function
  • Custom hooks — extracting reusable logic into your own hooks

Getting Started

Go to the kudoboard repository and click “Use this template” → “Create a new repository” to create your own copy.

Clone your repository to your computer:

git clone <your-repo-url> kudoboard
cd kudoboard
code .

The template is a TypeScript React app scaffolded with Vite. It includes Prettier, Tailwind CSS, and shadcn/ui (with a Button component pre-installed). Install dependencies and start the dev server:

pnpm install
pnpm dev

You should see a centered “Click me” button on the screen. That is the starter template working.

If you get stuck at any point, you can view the complete solution on the master branch of the original repository.

Learning Outcomes

  • Set up client-side routing with TanStack Router, including nested layouts, dynamic route parameters, and a not-found fallback
  • Build controlled forms in React and manage their submission and reset behavior
  • Manage complex, nested application state with useReducer and actions, applying immutability at every level of the state
  • Persist state to localStorage and load it back with a lazy initializer
  • Extract repeated stateful logic into a custom hook to simplify components
  • Build a multi-page React application end to end, from routing and data types through state management and persistence

Sections

  1. Set Up Client-Side Routing
  2. Create the Home and About Pages
  3. Handle Unknown Routes
  4. Data Types and Sample Boards
  5. Displaying Kudo Boards on the Home Page
  6. The Board Detail Pages
  7. Controlled Components
  8. Include Add Kudo Form on the Board Detail Page
  9. Managing State with useReducer
  10. Expand the Reducer to Manage All Boards
  11. Persist All Boards with localStorage
  12. Extract a Custom Hook for Boards
  13. Practice Questions