/node-react-mongo-shampoo-shop

A simple dynamic e-commerce SPA(Single Page Application) has been created in this repository. Users can create an account and add the product to the cart to go to the purchase page and click the order confirm button to go cart page. After filling in the shipping information and clicking the checkout button, the user will be taken to the Stripe...

Primary LanguageJavaScript

Here is some UI and work shown in this repository

Live Preview Project

Project Details

A simple dynamic e-commerce SPA(Single Page Application) has been created in this repository. Users can create an account and add the product to the cart to go to the purchase page and click the order confirm button to go cart page. After filling in the shipping information and clicking the checkout button, the user will be taken to the Stripe payment page. The user will be brought to the success page if the payment process is successful. Users can go to my order page for information on purchased items. Admin can create admin roles from users. Admin can add, update, and delete products. Admin order details can be seen from this SPA.

Technology Use

  1. React JS
  2. React Hooks
  3. Event Handlers
  4. Arrow Functions
  5. Axios RESTful API
  6. React Router
  7. React Router Dom
  8. React Private Route
  9. React Admin Route
  10. React Child Routes
  11. React Lists and Keys
  12. React Alert
  13. Firebase
  14. Firebase Authentication
  15. Apex Chart
  16. Stripe Payment Gateway
  17. Node JS
  18. Express JS
  19. Express Middleware
  20. Express CORS
  21. Nodemon
  22. MongoDB
  23. MongoDB Atlas
  24. Firebase Verify Token
  25. JWT Token
  26. ImgBB
  27. Font Awesome
  28. Google Fonts
  29. HTML5
  30. CSS3
  31. Bootstrap5
  32. Material UI

Project Deploy

  1. Netlify (Frontend Part)
  2. Vercel (Backend Part)

Admin Login

  1. Email: admin@admin.com
  2. Password: 123456

Project Pages

  1. Home
  2. Product
  3. Purchase
  4. Cart
  5. Success
  6. My Order
  7. Dashboard
  8. Dashboard Users
  9. Dashboard Products
  10. Dashboard Orders
  11. Dashboard Contact
  12. Login
  13. Register
  14. User Profile
  15. Error 404

Home Page

image

Products Page

image

Purchase Page

image

Cart Page

image

Stripe Payment Page

image

Success Page

image

My Order Page

image

Dashboard Page

image

Dashboard Users Page

image

Dashboard Admin Create

image

Dashboard Products Page

image

Dashboard Product Details

image

Dashboard Product Edit

image

Dashboard Order Page

image

Dashboard Order Details

image

Dashboard Contact Page

image

Dashboard Contact Details

image

Login Page

image

Register Page

image

User Profile Page

image

Error 404

image