pdasya / eCommerce-Application

Online store SPA
https://harajuku-hub-sprint-4.netlify.app/
1 stars 1 forks source link

RSS-ECOMM-3_19: Implement Routing and Browser Navigation for Catalog and Product Detail Pages (25 points) #170

Open pdasya opened 4 months ago

pdasya commented 4 months ago

Description

Implement routing to allow seamless navigation between the Catalog page and the Product Detail page, directly accessing specific product detail pages via unique URLs, and supporting browser navigation buttons (forward and back). The pages should be accessible whether the user is logged in or not.

Implementation Details

  1. Catalog Page: This page should display a list of products. Each product card should contain a link (or be a link itself) directing to the corresponding product's detail page.
  2. Product Detail Page: This page should display detailed information about a single product. It should be accessible by clicking on a product card from the Catalog page or by directly accessing a unique URL for the product.
  3. Routing: The URL in the browser should change when users navigate from the Catalog page to a Product Detail page and vice versa. Each product should have a unique URL that can be directly accessed to view its details.
  4. Browser Navigation Buttons: Implement support for browser navigation buttons. If a user navigates to a different product detail page or the Catalog page, the back button should take the user to the previously viewed page. The forward button should work correspondingly after using the back button.
  5. Public Accessibility: The Catalog and Product Detail pages should be accessible whether the user is logged in or not. These pages should not require authentication.

Acceptance Criteria

Useful Links and Resources

  1. Using the HTML5 History API
  2. Introduction to routing in React
  3. Client-side Routing in Angular
  4. Vue Router
nicealx commented 4 months ago

Implemented at #184