The Trucking Company

Practicing styling with CSS Modules, React Router, and error handling

This CodeLab exercise is mainly designed to help you practice the concepts you have learned in the Frontend Week IV module. But you will need to use the knowledge from the previous weeks as well.

You will be building a simple application for a trucking company. The application will allow you to manage trucks and drivers. You will be able to view a list of trucks and drivers, register new drivers, and view details about each truck and driver.

The Assignment

Basic setup with pages

1. Create a new React application with Vite.
2. Install the react router.
3. Create 2 new folders called components and pages in the src folder.
4. Add the json Mock server.
5. Get the db.json file from here and place it in the root of your project.

6. Create the following pages:

   • Home page that shows an image of a truck and explains what the app is about (Administering a trucking company).
   • Trucks a page that displays a list of trucks. Each truck should have a name and a description with weight and capacity.
   • Drivers a page that displays a list of drivers. Each driver should have a name, and a description (with driver details).
   • RegisterDriver a page that allows you to register a new driver. Use a form similar to this example.

Components

1. Create a Header component that displays a navigation bar with links to the different pages.
2. Create a Footer component that displays the text “© 2025 Trucking Company”.
3. Create a TruckCard component that displays a truck with a name, description, and picture. The card should have its own route and be displayed when you click on a truck.
4. Create a DriverCard component that displays a driver with a name, description, and picture. The card should have its own route and be displayed when you click on a driver.

Styling and error handling

1. Style everything using CSS Modules. For each component, create a corresponding .module.css file (e.g., TruckCard.module.css). Use semantic class names like card, title, container, etc.
2. Use global CSS variables in global.css to define light/dark theme colors and apply them via the body class (e.g. body.light, body.dark).
3. Add error handling to the TruckCard and DriverCard components. If the truck or driver does not exist, display an error message in a shared ErrorBanner component rendered in the main Outlet.
4. Add a 404 page that displays a message saying “Page not found” and a link to the home page.
5. Add a 500 error page that displays a message saying “Server error” when a component fails to render.
6. Use try-catch blocks in the fetch logic inside TruckCard and DriverCard to catch and display errors in the error banner.

Extra

1. Implement buttons to delete or edit trucks and drivers. The edit button should take you to a form where you can update truck or driver details.

---

Note: You are expected to apply your knowledge of React Context and CSS Modules for theming from the light/dark theme tutorial. See tutorial here.