Built by

bwsmoke-refapp

Computer Science

Build a React Task Board

Turn your early React practice into a working Task Board: first shape the interface, then make it respond to clicks and typed tasks, then connect those behaviors in a runnable app. You will finish with a Node-served React project that installs reproducibly, builds, tests, and opens to a visible “Task Board” page.

3 modules4 lessonsComputer Science

What you learn by building this

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

Learning Journey

Shape the task board

2 lessons

Create the visible interface first, using the component and CSS foundation you have already started building.

Connect the working board

1 lesson

Move from isolated React practice into the actual Task Board application.

Run and verify the project

1 lesson

Make the completed board dependable to install, build, test, and show.

Public lesson

Build the Task Board UI shell

Task Board: a visible shell

Build the page before making it interactive. By the end, you should be able to point at four regions and describe them: board title, task entry, task list, and empty state.

Use the React component that currently renders on your app’s first screen. If you prefer, create a TaskBoard component and render it from that screen. Put CSS in the stylesheet your app already imports—no new packages or config needed.

Tasks

1. Sketch the page in JSX

Before writing code, write these four labels as plain text in your component:

Task Board
New task
Tasks
No tasks yet

Tasks

Now turn them into page structure. Aim for this hierarchy:

main
  header
    h1
    short description
  section: task entry
    h2
    label + input + button
  section: tasks
    h2
    empty-state message

main
  header
    h1
    short description
  section: task entry
    h2
    label + input + button
  section: tasks
    h2
    empty-state message

Use this incomplete shape as a guide, but choose your own id and class names:

export default function TaskBoard() {
  return (
    <main className="_____">
      <header className="_____">
        <h1>Task Board</h1>
        <p>Keep track of what needs doing.</p>
      </header>

      <section aria-labelledby="_____">
        <h2 id="_____">New task</h2>

        <div className="_____">
          <label htmlFor="_____">Task name</label>
          <input
            id="_____"
            type="text"
            placeholder="e.g. Plan tomorrow's work"
          />
          <button type="button">Add task</button>
        </div>
      </section>

      <section aria-labelledby="_____">
        <h2 id="_____">Tasks</h2>
        <p className="_____">No tasks yet. Add one above to get started.</p>
      </section>
    </main>
  );
}

export default function TaskBoard() {
  return (
    <main className="_____">
      <header className="_____">
        <h1>Task Board</h1>
        <p>Keep track of what needs doing.</p>
      </header>

      <section aria-labelledby="_____">
        <h2 id="_____">New task</h2>

        <div className="_____">
          <label htmlFor="_____">Task name</label>
          <input
            id="_____"
            type="text"
            placeholder="e.g. Plan tomorrow's work"
          />
          <button type="button">Add task</button>
        </div>
      </section>

      <section aria-labelledby="_____">
        <h2 id="_____">Tasks</h2>
        <p className="_____">No tasks yet. Add one above to get started.</p>
      </section>
    </main>
  );
}

type="button" matters for now: it makes the button visibly part of the interface without submitting a form or refreshing the page.

Check: run your app. You should see all four regions, including an input and an “Add task” button. Typing in the input should work, even though clicking the button does nothing yet.

Tasks

2. Make the regions easy to scan

Add one class to each major region: the overall board, the entry section, the task section, and the empty message.

Start your CSS with a small layout instead of styling every element at once:

/* the page container */
._____ {
  max-width: 42rem;
  margin: 0 auto;
  padding: _____;
}

/* shared card appearance */
._____,
._____ {
  border: 1px solid _____;
  border-radius: _____;
  padding: _____;
}

/* the page container */
._____ {
  max-width: 42rem;
  margin: 0 auto;
  padding: _____;
}

/* shared card appearance */
._____,
._____ {
  border: 1px solid _____;
  border-radius: _____;
  padding: _____;
}

Tasks

Give the task-entry controls a layout that keeps them together. On a wide screen, make the input and button sit on one row; on a narrow screen, it is fine if they wrap.

._____ {
  display: flex;
  gap: _____;
  /* add one rule so the input can take available space */
}

._____ input {
  /* add the sizing rule here */
}

._____ {
  display: flex;
  gap: _____;
  /* add one rule so the input can take available space */
}

._____ input {
  /* add the sizing rule here */
}

Check: resize the browser window. The board should remain centered, readable, and not press against the window edges.

Tasks

3. Make the empty state look intentional

The empty message is not an error—it is what a new board should show. Style it differently from a task that will eventually appear in the list.

Choose at least two of these:

a softer text color
a light background
italic text
extra space above it
a dashed border

Avoid hiding it. There are no tasks yet, so it is currently the most honest content in the task section.

Check: someone looking at the page should understand that the list is empty, not broken.

Explain it back

Put it in your own words

4. Describe your component aloud or in a comment

Add a short comment above the component, or say it aloud:

“This component renders the board shell. It has an entry area and an empty task-list area; it does not store tasks yet.”

Then identify which element you will later replace or sit beside the empty message when tasks exist. It will likely be a <ul> or <ol> inside the Tasks section.

20 more characters

Tasks

Final check

Your page should now have:

one clear <h1>: Task Board
an input with a connected <label>
a visible, non-submitting Add task button
a Tasks section
a clear empty-state message
basic spacing that separates the regions

Do not add useState yet. The next step is making the input value become a real task while preserving this empty-state structure.

Course Outline

3 modules · 4 lessons

Shape the task board

Connect the working board

Run and verify the project

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.