React Product Catalog

This project is a phone catalog application built with React, TypeScript, and SCSS. It includes features like a shopping cart, favorites, and a product search. The application also provides functionality to filter, sort, and paginate products.

Table of Contents

• Project Overview
• Features
• Technologies Used
• Installation
• Usage

Project Overview

The React Product Catalog allows users to browse various phone products, add items to their shopping cart, mark items as favorites, and view product details. The application is designed to be intuitive and user-friendly, with smooth animations and transitions to enhance user experience.

You can view the design used for this project here.

Check out the live demo here.

Features

• Home Page: Includes a slider for featured images and product categories.
• Product Listing: Pages for phones, tablets, and accessories with sorting and pagination.
• Product Details: Detailed view of each product with specifications and images.
• Shopping Cart: Add products to the cart, adjust quantities, and proceed to checkout.
• Favorites: Mark products as favorites and view them in a separate list.
• Search Functionality: Search for products across the catalog.
• Responsive Design: Optimized for both desktop and mobile devices.

Technologies Used

• React: A JavaScript library for building user interfaces.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• React Router: For handling routing in the application.
• Context API: To manage the state of the cart and favorites.
• SCSS: For styling the application using CSS modules.
• Promises: To imitate server communication for fetching data.
• LocalStorage: To persist the cart and favorite items.

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/SrTrace/phone_catalog-react-cpa

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to http://localhost:3000 to view the application.

Usage

• Browsing Products: Navigate through the home page, product pages, and view details.
• Shopping Cart: Add products to the cart, adjust quantities, or remove them.
• Favorites: Mark products as favorites and access them from the favorites page.
• Search: Use the search bar to find specific products quickly.
• Category Selection: Choose a category in the catalog to view and explore products.
• Product Details: View details of items, including selecting color and capacity options.
• Navigation: Enjoy comfortable and intuitive navigation throughout the app.
• Sharing Products: Share chosen items using links from the URL.