🛍️ Product Catalog (React, Typescript, Redux)

A modern and responsive product catalog built with React and React Router. This project includes a product list, detailed product view, shopping cart, theme switcher, and persistent state using Redux.

Live Demo

View Live: Product Catalog

🎨 Design

The design of this project was created in Figma. It includes a modern UI layout with attention to usability and responsiveness.

• Light themes: Figma Link

• Dark themes: Figma Link

🎯 Features

• Responsive design for mobile, tablet, and desktop
• Product list with filtering and sorting
• Search functionality
• Detailed product view with images and additional information
• Products can be (added/removed) to cart and favorites
• Theme switcher for light and dark modes
• Persistent state using Redux
• Pagination

🔧 Technologies Used

🧱 Core

• React — UI library
• Typescript — type-safe JavaScript
• Redux Toolkit — state management
• React Redux — React bindings for Redux
• React Router DOM — routing
• SCSS — styles preprocessor
• Redux Persist — state persistence
• Lodash.debounce — utility for debouncing functions

🎨 Design & UI/UX

• Figma — design prototype
• Swiper — image slider
• React Select — advanced select/filter
• SweetAlert2 — popup notifications

🛠️ Development & Deployment

• Vite — fast build tool
• Mate Academy scripts — custom scripts for building, linting, running
• ESLint — JavaScript/TypeScript linting with Airbnb config
• Stylelint — CSS/SCSS linting
• Prettier — code formatter
• GH Pages — deployment to GitHub Pages

Get Started

Follow these steps to get started:

1. Clone the repository

git clone https://github.com/19Eduard99/product_catalog.git

2. Install dependencies

npm install

or using yarn:

yarn install

3. Run the development server

Using npm:

npm start

or using yarn:

yarn start