Build a React Task Board

BW

Built by

bwsmoke-refapp

Computer Science

Build a React Task Board

Build a React Task Board

Turn the React and Node foundations you have started into a small, working Task Board. You will first practice the command-line and React interaction pieces in low-stakes exercises, then apply them to a real app you can run, test, and build.

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

1

Prepare the workflow and interaction basics

2 lessons

Build confidence with the commands and React state patterns needed before touching the Task Board codebase.

2

Shape the Task Board interface

1 lesson

Use the supplied project structure and verified target behavior to turn the starter app into a recognizable Task Board.

3

Make, verify, and ship the board

1 lesson

Connect the visible UI to state, then prove the single Node workload can be installed, tested, built, and served.

Public lesson

Move through a project and run its scripts

Open a terminal.

Predict

What will happen?

Before running anything, predict: which file do you think tells npm what commands a project supports?

Tasks

Now check your current location:

pwd
ls
  • pwd prints the folder you are currently in.
  • ls lists what that folder contains.

Tasks

Look for a folder that might contain your React/full-stack project. Move into it with:

cd <project-folder-name>
pwd
ls

Check: pwd should now end with your project folder’s name.

1. Practice moving without getting lost

Tasks

Make a harmless practice folder beside your project:

mkdir terminal-practice
cd terminal-practice

Tasks

Create two empty folders inside it—one named client, and choose a different name for the other:

mkdir client <your-second-folder-name>
ls

You should see both names.

Tasks

Now enter client, then return to the practice folder:

cd client
pwd
cd ..
pwd

.. means “the folder one level above this one.”

Tasks

Finally, return to your project folder:

cd ..
ls
cd <your-project-folder-name>

Check: ls should show project files again, usually including package.json.

2. Read the project’s command menu

Tasks

Run:

ls

If package.json appears, inspect it:

cat package.json

Tasks

Find the "scripts" section. It may look roughly like this:

"scripts": {
  "dev": "...",
  "build": "...",
  "test": "..."
}

Your project’s script names may differ. Write down the names you actually see.

package.json is the project’s instructions card for npm: it records dependencies and defines commands such as development, build, and tests.

Tasks

Check: You can point to the "scripts" object and name at least one script your project has.

3. Install vs. run

Tasks

Look for a node_modules folder:

ls

Tasks

If node_modules is missing

Run:

npm install

This reads package.json and downloads the packages the project needs into node_modules.

Tasks

If node_modules already exists

You can still run npm install; it checks that installed packages match the project’s dependency list.

Tasks

When it finishes, check:

ls

Check: a node_modules folder exists, and the terminal did not end with an error message.

Keep this distinction clear:

Command typeWhat it does
npm installDownloads project dependencies
npm run <script>Runs one script defined in package.json

Installing does not start your app.

4. Start the development server

Tasks

Return to "scripts" in package.json. Do you have "dev" or "start"?

  • If you have "dev", run npm run dev.
  • If you have "start", run npm start or npm run start, depending on what the script is named.

Use the command that matches your file:

npm run <your-development-script-name>

Tasks

The terminal should print a local URL, often something like http://localhost:....

Open that URL in your browser.

Check: You can see the app page in the browser. Make one tiny visible change to text in the page, save the file, and confirm the browser updates.

Tasks

To stop the server, return to the terminal and press:

Ctrl + C

5. Locate the React entry files

Tasks

From the project root, list likely source folders:

ls

Look for names such as:

  • src
  • client
  • app
  • frontend

Tasks

Enter the folder that contains the React app, then list its contents:

cd <react-app-folder>
ls

If there is a src folder:

cd src
ls

Tasks

Look for an entry file. Common names include:

  • main.jsx, main.tsx
  • index.jsx, index.tsx
  • App.jsx, App.tsx

Open the likely main or index file in your editor. It usually contains a call similar to:

createRoot( /* a page element */ ).render( /* the app component */ )

That file connects React to the actual browser page.

Tasks

Then open App.jsx or App.tsx. This is commonly the first component you see rendered.

Tasks

Check: Identify these two roles in your own project:

  1. Entry file: the file that mounts React into the page.
  2. App component: the file containing the main UI component.

If your project uses a framework such as Next.js, you may instead find an app or pages folder. In that case, find the file that renders the home route rather than forcing it to match the names above.

6. Build the project

Tasks

Return to the folder containing the relevant package.json. If you are inside src, go up one level first:

cd ..
ls

Confirm package.json is present. Then check its scripts again and find a build script.

Tasks

Run the matching command:

npm run build

A build creates optimized files for deployment. Unlike the development server, it usually finishes and returns you to the command prompt.

Tasks

Afterward, run:

ls

Look for a newly created output folder. Common names are dist, build, or .next.

Check: The build command finishes successfully, and you can name the output folder it created.

If it fails, read the first clear error in the terminal. Don’t delete files or guess at fixes yet; copy the error message and the command you ran.

7. Check for tests

Tasks

Inspect scripts one more time:

cat package.json

Do you see a "test" script?

Tasks

  • If yes, run:

    npm test

    Some test tools stay open and watch for changes. Press Ctrl + C when you have seen the result.

  • If no, your project does not currently have an npm test command. That is useful information—not every starter project includes tests.

Tasks

Check: State one of these accurately:

  • “This project has a test script, and it passed/failed.”
  • “This project has no test script in package.json.”

Your terminal map

Tasks

Before you finish, fill this in for your own project:

Project root folder: ____________________

React app folder: _______________________

React entry file: _______________________

Main app component: _____________________

Development command: ____________________

Build command: __________________________

Test command (or “none”): _______________

One last distinction:

  • Install gets the tools the project depends on.
  • Development server lets you work locally and see changes.
  • Build creates production-ready files.
  • Test checks expected behavior automatically.

Course Outline

3 modules · 4 lessons

Prepare the workflow and interaction basics

Shape the Task Board interface

Make, verify, and ship the board

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.