Challenge: Simplified E-Commerce Application

Problem statement

You are tasked with creating a simplified e-commerce application with the following features:

• Home page: Display links to navigate to the "Products" page, "Contact" page, and "Cart" page.

• Products page: List at least 3 real products, each with a name, description, and price. Each product should have a "View details" link that navigates to the "Product Details" page using dynamic routing. Include a link to navigate back to the "Home" page.

• Product Details page: Dynamically display the product's name, description, and price. Provide an "Add to Cart" button that adds the product to the "Cart" page. Include a "Back" button to navigate back to the "Products" page.

• Contact page: Display a simple contact form with the following fields:

  • Name (input field)

  • Email (input field)

  • Message (textarea)

  • Include a "Submit" button that displays a success alert (e.g., "Message sent!") when the form is submitted. Provide a navigation link back to the "Home" page.

• Login page: Redirect unauthenticated users from a protected route (e.g., Cart) to the "Login" page. Provide a Login button to simulate authentication and navigate to the "Cart" page.

• Cart page: Dynamically display the list of products added to the cart with their name, description, and price. Show a total price for all items in the cart. Provide a Back button to navigate to the "Products" page.

• 404 page: A page that displays when a user navigates to an undefined route. Include a link to navigate back to the "Home" page.

Expected output

• A functional React application with dynamic routing, nested routes, and programmatic navigation.

• Users should be redirected appropriately for undefined routes and protected routes.