Data Types and Sample Boards

Now that routing is set up, let’s build the two main pages: a board list (home page) and a board detail page. We will start with hardcoded data and make it dynamic later.

Define the data types

Create src/data/types.ts with the types for our app:

export type Kudo = {
  id: string;
  author: string;
  message: string;
  color: string;
};

export type Board = {
  id: string;
  title: string;
  description: string;
  kudos: Kudo[];
};

Each board has a list of kudos. Each kudo has an author, a message, and a color (we will use Tailwind background classes like bg-blue-100 to give each kudo a colored card).

Add hardcoded board data

Create src/data/boards.ts with some sample boards:

import type { Board } from "./types";

export const INITIAL_BOARDS: Board[] = [
  {
    id: "thank-you-jane",
    title: "Thank You, Jane!",
    description: "A board to celebrate Jane's amazing work on the project.",
    kudos: [
      {
        id: "k1",
        author: "Alice",
        message: "Jane, your attention to detail saved us so many bugs!",
        color: "bg-blue-100",
      },
      {
        id: "k2",
        author: "Bob",
        message: "Thanks for always being so helpful during code reviews.",
        color: "bg-green-100",
      },
    ],
  },
  {
    id: "welcome-new-team",
    title: "Welcome, New Team!",
    description: "Share your warm welcome messages for the new hires.",
    kudos: [
      {
        id: "k3",
        author: "Carol",
        message:
          "So excited to have you all on board. Let's build great things!",
        color: "bg-purple-100",
      },
    ],
  },
  {
    id: "happy-birthday-sam",
    title: "Happy Birthday, Sam!",
    description: "Leave your birthday wishes for Sam here.",
    kudos: [],
  },
];

Checkpoint: Commit your progress.

git add .
git commit -m "kudoboard-04: Add data types and sample boards with kudos"
git push