Product Store

Build a simple Product Store using react-router-dom. The app should include the following:

Folder Structure

• App.js: Main routing and navigation
• Home.jsx: Home page component
• Products.jsx: Product listing page that fetches products
• ProductDetails.jsx: Displays detailed info about a selected product
• styles.css: Contains all styling

Functionality Requirements

1. Routing Setup

• Use BrowserRouter, Routes, and Route from react-router-dom.

• Create routes:

  • / → Home Page
  • /products → Product List Page
  • /products/:productId → Product Details Page

2. Navigation Bar

• Display a navigation bar with Home and Products links.

3. Home Page

• Display a simple welcome message: "Welcome to the Home Page"

4. Product List Page

• Display a text "Product List"

• Fetch product data from: https://dummyjson.com/products

• Display each product in a card layout showing:

  • Product image
  • Title
  • Short description
  • A "View More" link that navigates to product details
  • The "View More" link must have an id = "product-${productId}"
  • Show Loading... during fetch and display error messages if the API fails.

5. Product Details Page

• Fetch product details from : https://dummyjson.com/products/${productId}

• Display:

  • Title
  • Image
  • Full description
  • Price
  • A "Back to Products" link

Reference UI