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.

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
2. User Flow
3. Project Structure
4. Screenshots
5. Database Structure
6. 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/.

Feel free to explore the code and contribute to the project!