TopSmart Application

---

Deploy

---

About the project

This is my first pet project where I started learning react. In this project I used GSMArena api. The following functionality was implemented in the project: Catalog, product page, search, pagination, cart, favorites, comparing, gallery.

Features

1. Catalog
   The product catalog loads data from the GSMArena storage. During loading, a loader and skeletons is displayed instead of product cards. Product cards have a hover effect. When you hover over a card, a shadow appears and the buy button is highlighted. When you click the button, the product is added to the cart.
2. Pagination
   Pagination allows you to go to the desired page, as well as change the number of products displayed on the page.
3. Favorites
   Favorites allows you to add your favorite products to return to them later.
4. Search
   When you enter a search string and click on search icon, only matching products are displayed in the catalog.
5. Cart
   The cart displays the products added on the catalog page. On first click on the cart icon, CartDetails popup component is displayed with animation. After that user can click on "checkout" button and he will be redirected to Cart page. On the cart page, the user can change the quantity of ordered goods, as a result of which the total price of all goods will be automatically calculated.
6. Product page
   On the product page, the user can view product images in the gallery, see the main and detailed characteristics of the product, price, select additional services, and add the product to the cart. There is also the opportunity to add a product to favorites or comparison or remove it from there.
7. Comparing
   On the product page, the user can add no more than 3 products to the comparison list. When going to the comparison page, the selected products will be displayed with detailed descriptions, allowing the user to compare the selected products.
8. Gallery
   On a catalog page, product page, or comparison page, the user can click on a product image and see a full-screen, easy-to-use slider with all the product images.

Stack

• HTML5
• CSS3
• Tailwind
• React
• Redux-Toolkit
• React-router
• Axios
• Chakra ui
• Swiper
• Webpack