/Ecommerce_web_app_FrontEnd_with_REACT_JS_-STRIPE_PAY-

A complete authentication and authorization based ecommerce web app for clients business with all exclusive features.

Primary LanguageJavaScript

Ecommerce Web FrontEnd With React Js.

The main concern of our project is to creat full responsive, reactive, authentication, authorization based Ecommerce web service with React js latest version.

Features

  • Full Responsive
  • Authentication & Authorization
  • Fullscreen mode
  • Class and Object based state and hook system
  • State and Hook based system
  • Stripe payment sandbox api and same time cash on delivery system added
  • Image are processed before saving with Jimp in backend
  • Tokenized system with Hashing of user password
  • User or Seller account creation are controlled with otp and verifying
  • Verification with mail

Lessons Learned

  • React Js
  • State Handle
  • Hook System
  • React Star Rating Module
  • React Countdown Timer
  • React Js Pagination Module
  • React Router Dom
  • Axios
  • Props Handling

Important Note

The Project has three segment of login (User, Seller, Employee). If a seller does registration before login as the seller make sure to verify it using employee user id .... Employee can log in at Employee page. Employee admin id : email : gokus@gmail.com pass : iamgoku

Design And Demo

EShopBD com - Google Chrome 8_21_2023 6_38_02 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_37_36 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_37_44 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_02 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_09 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_19 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_23 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_26 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_29 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_47 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_38_58 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_39_16 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_40_40 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_40_45 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_40_50 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_40_54 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_41_00 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_41_27 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_41_44 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_41_54 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_58_13 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_59_40 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_58_19 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_58_24 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_58_33 PM

EShopBD com and 3 more pages - Personal - Microsoft​ Edge 8_21_2023 5_58_36 PM

Environment Variables

In order to run it make sure to remember .... Inside Index.js there are two setting I did for Rest Api handling ...

  • axios.defaults.baseURL = 'http://localhost:8000';
  • axios.defaults.headers.common['Authorization'] = 'Bearer '+localStorage.getItem('token');

Here, i ran it in my localhost and my backed rest api was in this url. So, i used this base url so change it when you host it.

Run Locally

Clone the project

  git clone https://github.com/SaminKirigaya/Ecommerce_web_app_FrontEnd_with_REACT_JS.git
  

Go to the project directory

  cd my-project // You project directory

Install dependencies

  npm install

Start the server

  npm start