sudhiryadav347 / react-ecommerce-app Goto Github PK

Using navigation guard to protect pages from being accessible by logged out users.

Cart header right now getting data from child component to parent through functions and props (bottom to up). Use context to share data with Cartcounter component in the header.

Refactor and create a demo login for, also demonstrate the use of useEffect() and useState() hook in the application.

Create a custom context provider component so that all the auth functions and states reside into it and then shared with the entire app component. This will be refactoring the code as well.

UseEffect() hook has a clean up function. At this time the app is running the setformIsValid() function on every keystroke, we can use the clean up function and make sure that instead of running it on every keystroke run it once when the input field is filled.

To achieve this we need to setup a time delay and make sure as soon as the next key is pressed the previous time delay gets cancelled. That way we can make sure that the function runs only once after the field is complete/filled.

Fetch data from API using useEffect() and useState() hook plus Axios library.

Adding auto logout. (use expiration), retrieve existing token and on logout remove the token and expiration date.

Create pages using react routes. (https://www.npmjs.com/package/react-router-dom)

Create popup cart for displaying and updating the items.

this issue is created in lieu of old issue #44 which was deleted

Create a persistent cart by saving cart data in local storage of the browser.

Setup masonry
https://thewebdev.info/2020/09/04/add-a-masonry-grid-to-a-react-app-with-the-react-masonry-css-library/

Create input components and use Refs

Pass function (logoutHandler) in the context to be accessed by all the child components, in this case Navigationbar.

Use Usereducer hook in login form to replace the usestate for managing the input fields states.

Remove the default state of input boxes to be invalid. The validation should happen when the input element is in focus or when value changes. The default state should be plain.

Create rating component to display ratings of the products.

Use context hook to pass isloggedin data to other components

Add authentication to the app for users, use google firebase api for it.

Create 404 page using react routes

Instead of using single state hook everytime you want to save the state of an element create single state object that takes multiple values as its properties.

Using context API can we get the cart counter state in app.js instead of using custom props and pushing data from child to parent.

Use usecontext api to share isloggedin state to navigation