React Router DOM Lab Exercise

Overview

You are contacted by a client as a frontend developer to build the frontend of a system for Product Management for a grocery store. Another developer has built the backend API and wrote some basic documentation for it. This is an internal website as is for the employees and is not customer facing You need to build a frontend for this API. Check out the API Documentation here: API Documentation Link Here

You will build the following components in this lab:

• App: The root component that orchestrates the entire application.
• Homepage: The homepage of our application. Should welcome the user to the app.
• NavBar: Provides navigation links.
• CreateProduct: Allows users to enter details for and submit new products.
• ProductsList: Displays an index list of all products.
• ProductsDetails: Shows details about a specific product.

Lab exercise

To get started, follow the steps below:

1. Go to this URL to read the documentation on the API you will use for this lab: API Documentation Link Here. READ THE DOCUMENTATION to understand how it works

2. Test the API in postman to see how it looks. Make API calls to all 3 endpoints

3. Start by creating each of the components listed below. After creating each component, be sure to import them at the top of src/App.jsx.

   • src/components/NavBar/NavBar.jsx
   • src/pages/CreateProduct/CreateProduct.jsx
   • src/pages/ProductList/ProductList.jsx
   • src/pages/ProductDetails/ProductDetails.jsx
   • src/pages/ProductDetails/Homepage.jsx

4. Within NavBar.jsx, import Link from react-router and create a <Link> for each destination in the table below:

   Destination	to	Text Content
   Home	/	Home
   ProductsList	/products	Products
   CreateProduct	/new-product	New Products

5. In App.jsx, import Route and Routes from react-router and create a <Route> for each destination in the table below:

   Destination	path	element
   Home	/	<Homepage/>
   ProductsList	/products	<ProductsList />
   CreateProduct	/new-product	<CreateProduct />
   ProductsDetails	/products/:productId	<ProductsDetails />

6. Use the following API to READ THE DOCUMENTATION. And in the page components add the API calls:

7. In the /new-product route create a form. It should accept form data for a new product and POST the values to the API

8. In the /products an API call should be made to get all the products

9. In the /products/:productId route it should show the specific product

10. If you haven’t already, create a .env file and add the Base URL inside. Make sure to make the calls with the import.meta.env instead of the url. We dont want to expose the API URL

REMEMBER : This is Omar’s free API so it will have a slow start up if inactive for long time

Bonus

1. Use antD package to add spinners in your app for loading
2. Add try catch to all your API calls
3. Create a service file that contains all the api calls. Export all the functions and call them in the components
4. Redirect the user to the ProductDetails page instead of the ProductsList
5. Create an error state that is set in the .catch() of your api calls so the user sees a clear error message. So now your component can be in 1 of 3 states:
   1. Loading
   2. Error
   3. displaying values