Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/developeromarfaruk/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...
https://github.com/developeromarfaruk/node-react-mongo-shampoo-shop

apex-chart axios-restful bootstrap5 css3 express-middleware expressjs firebase-auth firebase-token html5 jwt-token material-ui mongodb-atlas nodejs react-child-routing react-hooks react-router react-router-dom reactjs restful-api stripe-payment-gateway

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/developeromarfaruk/node-react-mongo-shampoo-shop
Owner: DeveloperOmarFaruk
Created: 2024-05-29T12:25:21.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-12-16T19:06:25.000Z (15 days ago)
Last Synced: 2024-12-16T20:22:18.950Z (15 days ago)
Topics: apex-chart, axios-restful, bootstrap5, css3, express-middleware, expressjs, firebase-auth, firebase-token, html5, jwt-token, material-ui, mongodb-atlas, nodejs, react-child-routing, react-hooks, react-router, react-router-dom, reactjs, restful-api, stripe-payment-gateway
Language: JavaScript
Homepage: https://shampoo-shop.netlify.app/
Size: 17.7 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Here is some UI and work shown in this repository
#
[Live Preview Project](https://shampoo-shop.netlify.app/)
#
## 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 to the 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: [email protected]
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](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Home.png)

#
### `Products Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Products.png)
#
### `Purchase Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Purchase.png)

#
### `Cart Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Cart.png)

#
### `Stripe Payment Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/StripePayment.png)

#
### `Success Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Success.png)

#
### `My Order Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/MyOrder.png)

#
### `Dashboard Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/DashboardHome.png)

#
### `Dashboard Users Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/DashboardUsers.png)

#
### `Dashboard Admin Create`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/AdminCreate.png)

#
### `Dashboard Products Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/DashboardProducts.png)

#
#
### `Dashboard Product Details`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/ProductDetails.png)

#
### `Dashboard Product Edit`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/ProductUpdate.png)

#
### `Dashboard Order Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/DashboardOrders.png)

#
### `Dashboard Order Details`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/OrderDetails.png)

#
### `Dashboard Contact Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/DashboardContactUs.png)

#
### `Dashboard Contact Details`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/ContactUsDetails.png)

### `Login Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Login.png)

#
### `Register Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Register.png)

#
### `User Profile Page`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/UserProfile.png)

#
### `Error 404`
#
![image](https://github.com/DeveloperOmarFaruk/node-react-mongo-shampoo-shop/blob/main/shampoo-shop-frontend/src/Images/UI/Error404.png)