https://github.com/i-m-hossain/simple-ecommerce-spa-react-project

A search enabled simple e-commerce SPA which uses local storage to save cart data
https://github.com/i-m-hossain/simple-ecommerce-spa-react-project

bootstrap html javascript react

Last synced: about 1 month ago
JSON representation

A search enabled simple e-commerce SPA which uses local storage to save cart data

• Host: GitHub
• URL: https://github.com/i-m-hossain/simple-ecommerce-spa-react-project
• Owner: i-m-hossain
• Created: 2021-09-28T20:36:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-28T20:39:35.000Z (over 3 years ago)
• Last Synced: 2024-10-15T07:28:09.506Z (3 months ago)
• Topics: bootstrap, html, javascript, react
• Language: JavaScript
• Homepage: https://simple-ecommerce-spa-react-project.netlify.app/
• Size: 390 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## simple-react-ecommerce-spa

Live website link: https://simple-ecommerce-spa-react-project.netlify.app/

### project summary:

 Data loaded from https://fakestoreapi.com/products using useEffect and useState hook 

 when product added to cart, the pricing is calculated

 cart product is displayed 

 product search option is enabled 

 local storage is used to get and set cart items


## Challenges i faced: 

    1. product searching: I have used filter method to filter the search product from products. Initialy the search text was accessed using onChange event target value.

    2. local storage setup: To prevent cart reset, I have used localstorage. The cart products are stored their as an object. So initially I had to check if any key is available corresponging to the cart. and then I set the value of the key. Again I cheked the value of the key is repeated, as the cart items are stored as an object.

    I created a module to set and get the values of local storage.

    

    3. useEffect dependency: As I am learning react, I have used useEffect hook to load data from API and internal json data. useEffect hook accepts two parameter where second one is the dependency. I had a close look at this when I loaded data from localstorage which is dependent to the products(which changes it state, asynchronous in nature)