Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/martina024/industrybuying
IndustryBuying is an e-commerce website made using MongoDb Chakra UI with all CRUD operations. E-commerce service in New Delhi for Purchase of products by organizations for their own use or re-sell.
https://github.com/martina024/industrybuying
bcrypt chakra-ui express html-css-javascript jwt mongodb mongoosejs react-redux react-router-dom react-thunk reactjs redux
Last synced: about 1 month ago
JSON representation
IndustryBuying is an e-commerce website made using MongoDb Chakra UI with all CRUD operations. E-commerce service in New Delhi for Purchase of products by organizations for their own use or re-sell.
- Host: GitHub
- URL: https://github.com/martina024/industrybuying
- Owner: martina024
- Created: 2023-01-16T20:22:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T18:49:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T12:04:38.652Z (about 1 month ago)
- Topics: bcrypt, chakra-ui, express, html-css-javascript, jwt, mongodb, mongoosejs, react-redux, react-router-dom, react-thunk, reactjs, redux
- Language: JavaScript
- Homepage: https://aesthetic-kheer-0649e3.netlify.app/
- Size: 756 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IndustryBuying Clone
IndustryBuying is an e-commerce website made using MongoDb Chakra UI with all CRUD operations.
E-commerce service in New Delhi for Purchase of products by organizations for their own use or re-sell.
Fully responsive HomePage
Netlify Link
-:https://aesthetic-kheer-0649e3.netlify.app//
Working Feautres-:
- Fully responsive HomePage for all three different screen sizes.
- All Products Page, Where data is fetched, sorted, filtered and searched using Cloud based database using MongoAtlas.
- Single Product Page for each product using dynamic id.
- User and Admin Sign up and Login in page with form validation.
- Cart Page followed by Checkout Page for payment with form valdation through out all pages.
- Admin Dashboard to View, Add, Delete and update all products present in database using Backend apis
- All the apis are created by using Node JS, Express and MongoDB.Tech Stack-:
- React
- Redux
- Chakra UI
- External Css
- MongoDB
- MongoDB Atlas for Database
- Node JS
- ExpressTeam Members-:
- Martina Varghese
- Preeti Raj
- Suvam Panda
- Tarun Sharma
- Randeep SinghHOMEPAGE-:
Here is the homepage which is entirely responsive and is made by using Chakra UI the products over here are listed through the api which is made by using node JS, express, mongoDB.
The data is fetched from the cloud database by mongoAtlas.
Each product open up to a single product page also using an api.
![homepage](https://user-images.githubusercontent.com/76995063/213940407-29245dc1-3e9f-4d65-b9be-9cbf56947a89.png)All Products Page-:
This page shows user all the products which are available in the database and user can sort them according to their price from low to high or vice versa. User can search for a specific item by using the search bar, the search funtionality is achieved using backend api.
User can choose the product for a specific brand by clicking on the brand listed on the sidebar also. User can click on any product and he/she will be redirected on single product page.![Allproduct](https://user-images.githubusercontent.com/76995063/213940440-b86f7caa-8540-490d-b950-4b6b61802fd9.png)
Single Product Page-:
This is single product page where user can see more details about the product and compare the product according to their needs. All the data of single product is fetched using api from a cloud based database.
![singleproduct](https://user-images.githubusercontent.com/76995063/213940946-e708a406-513c-4f55-802a-ce89f0ef4f23.png)
Login Page-:
Here user can login to proceed before purchasing the product, so that in future they can track their order details and track order too. If user is not registered already he/she will be redirected to signUp page to signup first.
![login](https://user-images.githubusercontent.com/76995063/213941147-0c687724-0e8a-44b7-8638-4cf5c0c1d022.png)SignUp Page-:
Here user can signup if he/she is not already registered with us already, so that in future they can just login and proceed with their order of purchasing.
![Singup](https://user-images.githubusercontent.com/76995063/213941076-cfbbdc1d-0de2-4820-aa89-6fa2578bb7fc.png)Cart Page-:
This is our cart page where user can increase or decrease the quantity of the product according to their needs and can proceed further to checkout page before payment.
![cart](https://user-images.githubusercontent.com/76995063/213941227-a2503fa7-4d78-488b-a8e6-4af42c098e7c.png)
Address Page-:
Before Checking out user have to fill in the details about his address where he/she wants the product to get delivered. Here we have primarily focused upon the form validation part, if any field is kept empty the user will get to about the mandatory fields.
![address](https://user-images.githubusercontent.com/76995063/213941311-fa910801-cd1b-402e-8bce-c74536e3def3.png)
Checkout Page-:
Once the user have filled all the details of his/her address they will be redirected to the checkout page so they can verify once more before placing the order so they don't make any mistakes.
![checkout](https://user-images.githubusercontent.com/76995063/213941457-61b8b143-a67e-4c17-8f88-600054c03222.png)
Payment Page-:
After checkout Page User will be redirected to the payment page where they have to put 16 digits of pin, 3 digits of cvv and expiry date too otherwise order won't be placed.
![payment](https://user-images.githubusercontent.com/76995063/213941636-34c98f21-ede1-4b5b-bf31-41906f4bc7c9.png)Order Confirmation-:
Once all the details are filled user will get the confirmation of placed order.
![checkout3](https://user-images.githubusercontent.com/76995063/213941672-fcf28516-1ab0-4b33-b29e-cf593e67b550.png)
Admin Page-:
Just like user admin will also register and login first to go to the dashboard, but they have to give GST number also, so others can't access the admin dashboard.
Here in admin dashboard we can view all the data present in the database, we can add more data to the database, we can update the price to any specifc product and we can also delete any specific product if we want.![admindash](https://user-images.githubusercontent.com/76995063/213941795-ba2fdc6f-8f82-4d54-8948-38f86294149b.png)