Product Catalog

DEMO

Overview

The Product Catalog project is a dynamic web application designed to display a wide range of products in an organized and user-friendly manner. This project allows users to browse, sort, and filter products, providing a seamless shopping experience. The main objective of this project is to showcase products in an appealing way while maintaining high performance and responsiveness.

Installation Instructions

Follow these steps to set up and run the project locally:

1. Clone the repository:

   git clone https://github.com/Ihor-Prodan/product-catalog.git
   cd product-catalog

2. Install dependencies using npm: Make sure you have Node.js and npm installed. Then, run:

   npm install

3. Start the development server:

   npm start

4. Build the project for production:

   npm run build

Usage Instructions

Here is how you can use the Product Catalog application:

1. Browsing Products:

   • Navigate through the product listings on the homepage.
   • Use the category menu to filter products by specific categories.

2. Sorting and Filtering:

   • Use the sorting options to arrange products by price, or newest arrivals.

3. Viewing Product Details:

   • Click on a product to view detailed information including images, descriptions, and customer reviews.

Configuration

The Product Catalog project offers several customizable parameters:

• API Endpoint: Modify the API endpoint in the configuration file to fetch products from your backend server.

• Pagination Settings: Adjust the number of products displayed per page and the pagination style.

• Theme Customization: Use SCSS variables to change the theme colors, fonts, and other styling elements to match your brand.

Technologies Used

• HTML: The standard markup language for creating web pages and web applications.
• SCSS: Preprocessor for CSS that adds power and elegance to the basic language.
• React: A web library for building user interfaces.
• React Router: Library for navigation and routing in web applications.
• Redux: State container for managing the application state efficiently.
• Redux Toolkit: Set of utilities to simplify Redux usage, including action creation, reducers, and middleware logic.
• Redux Persist: Library for persisting Redux state to local storage.
• Framer Motion: Animation library for React, enabling easy addition of motion and transitions to web applications.
• Swiper: Library for creating responsive sliders and carousels.
• TypeScript: Superset of JavaScript that adds static types, enhancing code quality and maintainability.

This project is developed following modern web development practices and provides users with a convenient interface for browsing and selecting products.