Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

1. Introduction

2. Install Tools

3. Create React App

4. Create Git Repository

5. List Products

   1. create products array
   2. add product images
   3. render products
   4. style products

6. Add page routing

   1. npm i react-router-dom
   2. create route for home screen
   3. create router for product screen

7. Create Node.JS Server

   1. run npm init in root folder
   2. Update package.json set type: module
   3. Add .js to imports
   4. npm install express
   5. create server.js
   6. add start command as node backend/server.js
   7. require express
   8. create route for / return backend is ready.
   9. move products.js from frontend to backend
   10. create route for /api/products
   11. return products
   12. run npm start

8. Fetch Products From Backend

   1. set proxy in package.json
   2. npm install axios
   3. use state hook
   4. use effect hook
   5. use reducer hook

9. Manage State By Reducer Hook

   1. define reducer
   2. update fetch data
   3. get state from usReducer

10. Add bootstrap UI Framework

    1. npm install react-bootstrap bootstrap
    2. update App.js

11. Create Product and Rating Component

    1. create Rating component
    2. Create Product component
    3. Use Rating component in Product component

12. Create Product Details Screen

    1. fetch product from backend
    2. create 3 columns for image, info and action

13. Create Loading and Message component

    1. create loading component
    2. use spinner component
    3. create message component
    4. create utils.js to define getError function

14. Implement Add To Cart Create React Context define reducer create store provider implement add to cart button click handler

15. Complete Add To Cart check exist item in the cart check count in stock in backed

16. Create Cart Screen Create 2 columns display items list create action column

17. Complete Cart Screen

    1. click handler for inc/dec item
    2. click handler for remove item
    3. click handler for checkout

18. Create Signin Screen

    1. create sign in form
    2. add email and password
    3. add signin button

19. Connect to MongoDB database

    1. create atlas mongodb database
    2. install local mongodb database
    3. npm install mongoose
    4. connect to mongodb database (We had set up both local as weel as cloud database)

20. Seed Sample data to mongodb(Fun)

    1. create Product model(Here we will learn how to create a model)
    2. create User model
    3. create seed route
    4. use routr in server.js
    5. seed sample product

21. Seed Sample Users 1.Create user model 2.seed sample users 3.create user routes

22. Create Signin Backend API

    1. create signin api(POST request wherein user will send their login details)
    2. npm install jsonwebtoken
    3. define generateToken

23. Complete signin Screem

    1. handle submit action
    2. save token in store and local storage
    3. show user name in header

24. Create shipping screen

    1. create form inputs
    2. handle save shipping address
    3. add checkout wizard bar(Fun)

25. Create Sign Up Screen

    1. create input forms
    2. handle submit
    3. create backend api

26. Implement Select Payment Method Screen

    1. create input forms
    2. handle submit

27. Create Place Order Screen

    1. show cart items, payment and address
    2. calculate order summary

28. Implement Place Order Action

    1. handle place order action
    2. create order create api

29. Create Order Screen

    1. create backend api for order/:id
    2. fetch order api in frontend
    3. show order information in 2 cloumns