Understand the Project Structure

Before changing behavior, locate the files that make up the application.

The important structure is:

src/
├── App.jsx
├── main.jsx
├── styles.css
└── components/
    ├── Column.jsx
    ├── TaskCard.jsx
    └── TaskModal.jsx

main.jsx

Open src/main.jsx. This is the entry point that renders the React application into the page.

You do not need to change it in this module. Its main job is to start the React tree.

App.jsx

Open src/App.jsx. This is the top-level component for the board.

Notice three important things:

1. It contains the starter task data.
2. It renders three Column components.
3. It renders the TaskModal component.

This file will become the main place where task state is owned later in the course.

components/Column.jsx

A column receives title, status, and tasks as props. It filters the tasks for its own status and renders a TaskCard for each matching task.

That means the column already demonstrates an important React pattern: a parent gives a child the data it needs through props.

components/TaskCard.jsx

The task card receives one task object. It uses that object to display the title, description, priority, and date.

The card is already reusable because it does not contain a hard-coded task.

components/TaskModal.jsx

The modal contains the fields we will eventually use to create a task. At the moment, the form prevents submission and the buttons do not change application state.

Checkpoint

You should now be able to answer three questions:

• Where does the board get its tasks?
• Which component renders a column?
• Which component renders one task card?

If you can trace those three paths, you have the project map you need for the next lesson.