In this project, I have developed a responsive web application by using JavaScript, HTML, CSS and React. The application focuses on creating a product listing page (PLP) with various interactive functionalities. Here's a breakdown of the features that have been successfully implemented:
- Header and Navigation:
The header section includes a logo and a navigational menu. The navigational menu allows users to switch between different categories, such as "Bags" and "Shoes." The header remains sticky as the user scrolls down the page, ensuring easy navigation.
- Product Counter:
A product counter section displays the number of products currently visible in the product grid. The counter dynamically updates when filters or sorting options are applied.
- Product Grid:
The product grid showcases a collection of product tiles in a grid-like layout. Each product tile contains essential information, including an image, product name, short description, price (with discounted options), ratings, and an "Add to Cart" button. Clicking the "Add to Cart" button triggers a success alert confirming that the product has been added to the cart.
- Filtering Mechanism:
A filtering mechanism is positioned on the left of the product grid. Users can filter products based on predefined characteristics, such as category, price and rating as well. The specific filtering interface, such as checkboxes or sliders, is tailored for a user-friendly experience.
- Sorting Mechanism:
The sorting dropdown allows users to sort products based on various criteria. Sorting options include alphabetical (ascending and descending) and price-based (ascending and descending) sorting.
- Product Name and Description:
A dedicated section displays the name and short description of the selected category. The category name is prominently displayed with a larger heading, providing context for the user.
- Load More Button:
A "Load More" button enables users to load additional pages of product tiles beyond the initial display. Clicking the button adds more products to the grid, ensuring a smooth and dynamic browsing experience. The "Load More" button is deactivated when all available products have been displayed.
- Footer:
The footer section contains links to important pages, such as Terms & Conditions, Privacy Policy, and Contact Us. In summary, this web application effectively showcases the ability to create an interactive and user-friendly product listing page. The implemented features offer seamless navigation, filtering, sorting, and dynamic loading of products, enhancing the overall user experience. The responsive design ensures compatibility across desktop and mobile devices.