Practicing building React Websites and Routing

This CodeLab exercise is designed to help you practice creating React applications using Vite, fetching data from REST APIs, state management, conditional rendering, and creating dynamic UIs with interactive components. Collaboration and teamwork are emphasized, so consider pair programming where possible. We also want to practice using the React Router.

The assignment

Implement a React website from scratch that works like the Figma mockup below. It’s a simple React website, and the main focus of your job is to get the user admin working:

• Use JsonServer as an api for holding users with userid, login, password, and some roles (user, admin, superman etc). Use chatGPT to generate the db.json file.

• Set up routing with Create Routes from Elements

• Think about the routing and how to divide the application into components.
• Start building a wireframe with html / JSX, and CSS.
• You need to figure out how to protect the pages that needs a login from deep linking

Figma mockup

1. Online mockup version
2. Figma file to open directly in Figma
3. Pdf of Figma pages

Other sources

1. Make your own free logo here
2. If you need to manipulate bitmap images, use The Gimp
3. React Router YouTube Playlist