An E-Commerce Website build in React

git clone {this repo}
yarn
firebase init (select firestore and hosting)and dont forget to set build folder public.
firebase deploy

uncomment out two lines in index.js and add data to actual.data.js
file like actual.data.sam[le.js file inside firebase folder

• Auth => GoogleOAuth, EmailandPasswordAuth
• Firestore - for users and data storage

• adding some demodata to firebase firestore:
  • use batch() to add multiple data at a time to firestore, so that we don't save partial data to firebase if some network error occurs and we end up some data in firestore and some don't.
  • Creates a write batch, used for performing multiple writes as a single atomic operation. The maximum number of writes allowed in a single WriteBatch is 500
  • used inside addShopDataToFirestore()

• Because I didn't like props drilling to pass data as for debugging I need to go all the way up to see from where it was coming

• other Reasons:

  • Forgetting to pass props
  • Problem in manageing deeply nested state
  • Duplicate information in state
  • Not updating all dependent props
  • Components with large number of props
  • uncertanity where a piece if data is managed

• 3 Principles of redux

  • Single Source of truth(store)
  • State is read only
  • changes are made using pure functions

• Action -> Reducer -> Store -> Components

  • action

    • an action is a piece of data that contains the information required to make a state update.
    • a object with type:'some reducer action' and payload:'some update' passed to store.dispatch() to update certain property of store state. i.e. actions must be dispatched to make a state update.
    • functions that create the actions are action creators.

  • Reducer

    • A pure function which takes the previous state and an update and returns a new object(immutability) with updation applied to passed state.

  • store: (Internally implemented as a class)

    • Responsible for maintaining state
    • Exposes getter via store.getState()
    • can only be updated through reducers by calling store.dispatch({type:"", payload:""})
    • can add listeners that get invoked when state changes(Reconcilliation)
    • a place where all the dynamic data or the state is stored.

• redux-thunk and logger

• Async redux dispatching is done using middleware redux thunk, which is I guess is a smart way to alter the actions which are to take argument of type functions to take a dispatch as an argument and dispatching START, SUCCESS, FAILURE actions depending upon the asynchronous activites and time of it.

Thank you visme.co

#939393
#717171
#242323
#f56618
purple

• Persist the cart in localstorage
• Add Pagination to shop pages
• store review system
• day sell like monday sell , tuesday sell ... in left corner at fixed like sale.png
• Add items listgroup at the men,women, girls,boys pages.
• Change Avatar in the profile page
• Add stripe charges as well at the backend then deploy backend as well

• loading.io
• flaticons.com
  • Icons made by Flat Icons from www.flaticon.com
• unsplash.com

• https://www.robinwieruch.de/firebase-deploy-react-js

make changes
yarn build
firebase deploy