/Amazone-clone2

amazon clone

Primary LanguageJavaScript

MERN damianShop

Lessons

front-end

  1. introduction
  2. install tools
  3. create-react-app
  4. Create Git repository

Backend

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

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

add bootstrap-ui framework

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

Manage state by reducer hook

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

create product details screen

  1. fetch product from back end
  2. create forums for image, info and action

creating loading and Message component

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

implement add to cart

  1. create react context
  2. define reducer
  3. create store provider
  4. implement add to cart button handler

complete add to cart functionality

  1. check exist item in the cart
  2. check count in stock in backend

create cart screen

  1. create 2 columns
  2. display item list
  3. create action columns

complete cart screen

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

connect to mongo-db database

  1. create atlas mongo-dm
  2. install local mongo-db database
  3. npm install mongoose
  4. connect to mongo-db database

sample data

  1. create product model
  2. create user model
  3. create seed route
  4. use route in server.js
  5. seed sample product

create seed sample user

  1. create user model
  2. seed sample users
  3. create user routes

create a sign in backend api

  1. create a sign in api
  2. npm install jsonwebtoken
  3. define generate token

complete sign in page

  1. handle submit action
  2. save token in store and local storage
  3. show username in handle

CREATE SHIPPING SCREEN

  1. create form inputs
  2. handle shape shipping address
  3. handle checkout wizard bar

CREATE SIGNUP SCREEN

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

implement payment section

  1. create input forms
  2. handle submit

create place order screen

  1. show cart items payment and address
  2. hold a place order action
  3. create order create api

implement place order function

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

create orderScreen

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

Pay order by paypal

  1. generate paypal client if
  2. create api to return to client id
  3. install react-paypal-js
  4. use paypalScriptProvider in index.js
  5. use paypalScriptReducer in orderScreen
  6. implement loadPaypalScript function
  7. render paypal button
  8. implement on approve payment method
  9. create pay order api in backend