Welcome to your first assignment! We will keep things simple! Your goal is to:

1. Add the "Get Things Done" header to your application.
2. Render the initial list of tasks described as:
   1. Task 1
   2. Task 2
   3. Task 3

Your result should look as follows:

🛟 Help

To download your project, please follow the instructions in the Project Setup section.

The downloaded project is a NEXT.js application. Next is a framework for building web applications that comes with an opinionated project structure supporting routing, client and server rendering and others. We will explore the individual features of NEXT.js in this course as soon as we can.

To start, you need to know that NEXT.js uses file system-based routing, where each directory represents one segment of your route. In that directory, you need to have a page.tsx file, which takes care of rendering the web page. The router's root is stored in your project's src/app folder.

For example route http://localhost:3000/home/profile would render a page stored in your src/app/home/profile/page.tsx file.

Since we need to modify the root of our application, we need to modify the src/app/page.tsx file. Currently the file does not contain much:

import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}></h1>
      </div>
    </main>
  );
}

There are the peculiar “styles.abc” statements in the page code. These statements represent CSS style imports from the CSS file. This technique is called CSS modules (read on!). The benefit of CSS modules are multiple, including that the names of classes are local and do not interfere with other components, eliminating conflicts, or that only the styles that the current content needs is sent to the client, reducing bandwidth and speeding up your website.

🧪 Tests

When you visit the application in the browser, welcome page will not display anything.  So, how do you proceed? The easiest way to see what is expected from you in the assignment, is to run automated tests and to make sure they all pass. In a seperate terminal run the following command:

pnpm test

This will launch the automated unit tests checking for correctness of your solution. Unfortunately, all of your tests fail and you will see the following result:

 Please try add “Get Things Done” between h1 tags in your src/app/page.tsx file and save the file. 

<h1 className={styles.title}>Get Things Done</h1>

You should see that two things have happened:

1. The page in the browser automatically reloads with your modified content. This process is called “hot reloading” making your changes instantaneous.
2. Your tests have re-run and you should have now only 1 failing tests and 1 passing test!

🏁 Completing Assignment

When you open the src/app/page.test.tsx file, you see that we expect to see “Task 1”, “Task 2” and “Task 3” in the document. This should be understandable from the code below:

it("Show the list of tasks", async function () {
  render(
    <Suspense>
      <Page />
    </Suspense>
  );

  expect(await screen.findByText("Task 1")).toBeInTheDocument();
  expect(screen.getByText("Task 2")).toBeInTheDocument();
  expect(screen.getByText("Task 3")).toBeInTheDocument();
});

Let us finalise the page and provide all three tasks in the unordered list. This is the final source of the src/app/page.tsx:

import styles from "./index.module.css";

export default async function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.container}>
        <h1 className={styles.title}>Get Things Done</h1>
        <ul>
          <li>Task 1</li>
          <li>Task 2</li>
          <li>Task 3</li>
        </ul>
      </div>
    </main>
  );
}

When you save your file, you can see that both tests now complete! 🎉🍕🧠🥹 We are almost done. We need to submit our assignment to the classroom.