Skip to content

Latest commit

 

History

History
41 lines (22 loc) · 2.17 KB

README.md

File metadata and controls

41 lines (22 loc) · 2.17 KB

React Phone Catalog

This project is a multi-page online store for selling phones, tablets, and accessories. Implemented using React, TypeScript, JavaScript, HTML5, CSS3(SCSS).

Overview

The project includes pages with product catalogs, product details, a shopping cart, favorites, search functionality, and more.

Key Features

  • Page Routing: React Router is used to handle the navigation flow of the application, defining routes for different pages.

  • Dynamic Product Loading: Utilized API to retrieve catalogs of phones, tablets, and accessories.

  • Local Storage: Applied local storage to persist cart and favorites data after page refresh.

  • Favorites: Implemented a favorites feature allowing users to add/remove products to/from their favorites list. The favorites count is displayed near the Favorites icon in the header.

  • Shopping Cart: Implemented a shopping cart with the ability to add products, adjust quantities, and remove items. The total amount and quantity are calculated automatically. The total quantity is displayed near the Cart icon in the header.

  • Multi-Page User Interface: Structured the project using different pages, components, and design templates.

  • Sorting and Pagination Functionality: Added the ability to sort products by various criteria and select the number of products displayed on the page. Pagination for convenient browsing was implemented as well.

  • Product Details and Comparison: Implemented detailed product pages with the ability to view and compare specifications.

Technologies Used

  • React: JavaScript library for building user interfaces.

  • TypeScript: Modern statically-typed programming language for JavaScript development.

  • Sass: CSS preprocessor for easing styling and supporting BEM.

  • LocalStorage API: Used for storing cart and favorites data on the client side.

Thank you for checking out my project! I am open to feedback and potential collaboration. For details, please contact me.