Labs
12 Client Rendering

Client Rendering

Objective

  1. Client components.
  2. Client-side rendering (CSR).
  3. Conditional rendering.
  4. Props drilling and callbacks.
  5. Reference, state, and effect hooks.

1 Project Tracker

Tailwind CSS will be used for presentation. It can be automatically included and configured when creating your applications.

  1. Reimplement the 11.2 Project Tracker application using React and Next.js.

    npx create-next-app@latest 01-project-tracker --turbopack --app --javascript --tailwind --eslint --no-src-dir --import-alias "@/*"

  2. The user can add, complete, and delete tasks per project. They can also add, complete, and delete projects.

  3. Projects have unique titles and tasks have unique titles within a project.

  4. Handle creating new projects and tasks by pressing the Enter key.

  5. A project should be marked as completed when all its tasks have been marked as completed.

  6. Marking a project as un/completed should mark all its tasks as un/completed.

Figure 1 (opens in a new tab): Project tracker using client (dynamic) rendering

Complete the 9 Synchronized State guide to learn about synchronizing state.

2 Photo Albums

Complete the 3 Lap Timer tutorial to learn more about client components.

Develop an application, using React and Next.js, that allows the user to create albums and upload photos for each album. The user can also view the list of albums and their associated photos.

  1. Design, implement, and test a API for reading, creating, updating, and deleting albums and their associated photos. Each album has a non-empty title. An example album object is shown below:

    const album = {
  id: "clt8sdp07001408lgfmji9vde",
  title: "Album 1",
  photos: [
    {
      id: "clt8sdp07001508lg60c3b68g",
      src: "https://picsum.photos/id/28/4928/3264",
    },
    {
      id: "clt8sdp07001608lg43zn4il7",
      src: "https://picsum.photos/id/18/2500/1667",
    },
  ],
};

    You may start by using public photo URL’s from Lorem Picsum (opens in a new tab), Pexels (opens in a new tab), or Unsplash (opens in a new tab).

  2. Design, implement, and test a web page for viewing, creating, updating, and deleting albums and their associated photos. Display the number of photos per album and use a RAM layout for displaying the photos.

  3. Design, implement, and test a API for uploading one or many photos, as well as deleting one or many photos.

  4. Extend the albums page to allow uploading and deleting photos from an album.

  5. Define the data models using a Prisma schema.

  6. Extend the data models to include a fixed set of color tags for photos.

  7. Create the database using Prisma Migrate.

  8. Update the data repository service to use Prisma Client for data store access.

  9. Test the routes using Postman.

  10. Update the interface to display the tags.

  11. Allow the user to filter the photos in an album by tag. The tags of an album are the union of its photo tags.

  12. Use an effect and an event listener to allow the user to click on a photo and display it in full-window mode, then use the arrows keys to navigate between the photos in the same album, and finally close the full-window display by pressing the escape key or clicking on the photo itself.

Figure 2 (opens in a new tab): Photo albums using client (dynamic) rendering

Complete the 10 Deployment guide to learn more about deploying your applications.

Resources

11 Relational QueriesGuides