Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hrid-a/ecommerce_website
https://github.com/hrid-a/ecommerce_website
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hrid-a/ecommerce_website
- Owner: Hrid-a
- Created: 2023-10-29T14:30:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-29T14:24:28.000Z (11 months ago)
- Last Synced: 2024-10-05T13:46:20.048Z (about 1 month ago)
- Language: JavaScript
- Size: 399 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ecommerce_website
## Overview
This eCommerce website is built using a combination of technologies for both the backend and frontend. The backend is powered by Express.js and MongoDB for the database,
while Swagger API documentation is utilized for API documentation.
On the frontend, React is used for the user interface, and Redux Toolkit is employed for state management.## Backend
### Technologies Used
- **Express.js**: The backend server is built using Express.js, a popular Node.js framework for building web applications and APIs.
- **MongoDB**: MongoDB is used as the database to store product information, user data, and order details.
- **Cloudinary**: Cloudinary is used to store The images of both the users and products.- **Swagger API**: Swagger is used to document the API endpoints, making it easy for developers to understand and interact with the backend services.
## Frontend
### Technologies Used
- **React**: The frontend is developed using React, a popular JavaScript library for building user interfaces. React provides a responsive and dynamic user experience.
- **React Router DOM**: This library is used for client-side routing in the React application, allowing for easy navigation between different views and pages.
- **hookForm**: To handle The forms.
- **Redux Toolkit**: Redux Toolkit is employed for state management. It helps manage the application's state, making it easier to maintain and update the UI as data changes.
-**Sass**: Sass is used to style the client-side allowing to make a great user experience.
and a lot more...
## Getting StartedTo get started with this eCommerce website, follow these steps:
1. Clone the repository to your local machine.
2. Set up the Backend:
- Navigate to the `backend` directory.
- Run `npm install` to install the required packages.
- Configure the MongoDB connection in `backend/config/database.js`.
- Run the server with `npm run dev`. The backend will run on `http://localhost:8001`.3. Set up the Frontend:
- Navigate to the `frontend` directory.
- Run `npm install` to install the required packages.
- Start the frontend with `npm run dev`. The React application will run on `http://localhost:5173`.4. Explore the eCommerce Website:
- Visit `http://localhost:5173` in your browser to explore the frontend of the eCommerce website.
- Access the API documentation by visiting `http://localhost:8001/api-docs` for Swagger documentation.## Features
- Product Listings: View a list of products with details and pricing.
- User Authentication: Users can create accounts, log in, and perform actions like adding products to their cart and placing orders.
- Shopping Cart: Users can add products to their cart and proceed to checkout.
- Order History: Users can view their order history and the status of their orders.
## License
For the design I only encoutred it in the web and it's not mine.
Feel free to use and modify it for your own purposes.If you have any questions or need assistance, please don't hesitate to reach out.