Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeniya14/shopcart-fullstack-project
ShopCart is a full-stack e-commerce application inspired by platforms like Amazon and Flipkart. The project is built using React.js, HTML, CSS, Material-UI for the frontend, and Node.js, Express.js, and MongoDB for the backend.
https://github.com/jeniya14/shopcart-fullstack-project
css ecomerce-website ecommerce express-js html material-ui mongodb node-js reactjs shopping
Last synced: 5 days ago
JSON representation
ShopCart is a full-stack e-commerce application inspired by platforms like Amazon and Flipkart. The project is built using React.js, HTML, CSS, Material-UI for the frontend, and Node.js, Express.js, and MongoDB for the backend.
- Host: GitHub
- URL: https://github.com/jeniya14/shopcart-fullstack-project
- Owner: Jeniya14
- Created: 2023-04-23T10:15:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-11T10:41:52.000Z (about 1 year ago)
- Last Synced: 2024-11-05T20:31:12.533Z (about 2 months ago)
- Topics: css, ecomerce-website, ecommerce, express-js, html, material-ui, mongodb, node-js, reactjs, shopping
- Language: JavaScript
- Homepage:
- Size: 12.2 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ShopCart Project
ShopCart is a full-stack e-commerce application inspired by platforms like Amazon and Flipkart. The project is built using React.js, HTML, CSS, Material-UI for the frontend, and Node.js, Express.js, and MongoDB for the backend.
## Table of Contents
1. [Technologies Used](#technologies-used)
2. [User Flow](#user-flow)
3. [Project Structure](#project-structure)
4. [Screenshots](#screenshots)
5. [Database Structure](#database-structure)
6. [Server File](#server-file)
## Technologies Used
- **Frontend:**
- React.js
- Material-UI
- HTML
- CSS
- **Backend:**
- Node.js
- Express.js
- MongoDB
## User Flow
The application follows a user-friendly flow:
1. **Login and Register:** Users can log in or register with validation and authentication. Only logged-in users can access the home page, and unauthorized attempts to access the home page via URL manipulation are prevented.
2. **Home Page:** Features a search bar, profile button, cart icon (with item count badge), and logout option. The profile page displays user information stored in MongoDB. The header includes a menu for categories, sub-categories, and an image slider. Display items from five main categories, allowing users to view all items or click on a specific item for detailed information
3. **Category Pages:** Display items from all main categories, allowing users to view all items or click on a specific item for detailed information.
4. **Single Item Page:** Shows detailed information about a selected item, including images, prices, discounts, ratings, and a tab navigation system for full product description and reviews.
5. **Cart Page:** Displays the current items in the cart, allowing users to delete items, clear the entire cart, and adjust item quantities. Previous orders are also visible.
6. **Checkout Page:** Utilizes Material-UI's stepper component for a three-step process: delivery address, order summary, and payment options.
7. **Order Success Page:** Confirms a successful order placement.
## Project Structure
The project is divided into two main folders:
- **Frontend:** Contains the React.js application.
- **Server:** Contains the Node.js and Express.js backend.
## Screenshots
### Login Page and sign up
### Home Page
### Search Page
### Profile Page
### Category Page
### Detailed Page
### Cart Page
### Checkout Page
### Skeletons
## Database Structure
The MongoDB database contains four main collections:
1. **User:**
- _id
- name
- email
- password
- address
- mobileNumber
2. **Products:**
- _id
- product_id
- product_name
- category
- discounted_price
- actual_price
- discount_percentage
- rating
- rating_count
- about_product
- user_id
- user_name
- review_id
- review_title
- review_content
- img_link
- product_link
3. **Cart:**
- _id
- email
- items
- itemId
- itemName
- itemPrice
- quantity
- itemImg
4. **Ordered:**
- _id
- email
- items
- itemId
- itemName
- itemPrice
- quantity
- itemImg
## Server File
The server file is hosted separately on GitHub. You can find it [https://github.com/Jeniya14/Shopcart-backend/](https://github.com/Jeniya14/Shopcart-backend/).
Feel free to explore the code and contribute to the project!