Online Shop (MERN Ecommerce)

Description

An ecommerce store built with MERN stack, and utilizes third party API's. This ecommerce store enable three main different flows or implementations:

1. Buyers browse the store categories, products and brands
2. Admins manage and control the entire store components

• features:
  • Node provides the backend environment for this application
  • Express middleware is used to handle requests, routes
  • Mongoose schemas to model the application data
  • React for displaying UI components

BE Features

• Deployed on Render
• User Registration and Authentication: Provide users with the ability to create accounts log in securely and update their info.
• Product Catalog Management: Ability to add, update, and remove products with details like name, description, price, and images.
• Category, Subcategory Catalog Management: Ability to add, update, and remove category, Subcategory with details like name and images.
• Brand Catalog Management: Ability to add, update, and remove Brands with details like name and images.
• Coupon Catalog Management: Ability to add, update, and remove Coupons with details like code, expiration date, no of uses per user(the no of times that allow the user to use the coupon), and the total user (max user can use this coupon).
• Shopping Cart: Allow users to add items to their cart, view the cart, manage the quantity of the product, delete the product from the cart, and proceed to checkout.
• Checkout Process: Smooth and secure checkout process with various payment options ("Cash" - "Card (Stripe Gateway)").
• Order Management: Ability to view and manage orders, update order status, send order confirmations, and issue refunds (using Stripe) if necessary.
• Inventory Management: Track product availability, manage stock levels, and provide alerts for low stock.
• Customer Reviews and Ratings: Enable customers to leave reviews and ratings for products, helping other users make informed purchase decisions.
• Promotions and Discounts: Ability to run promotional campaigns, apply discounts, offer coupons, and track their effectiveness.
• Coupon Catalog Management: Ability to add, update, and remove Coupons with details like code, expiration date, no of uses per user(the no of times that allow the user to use the coupon), and the total user (max user can use this coupon).

FE Features

• Dashboard:
  • Create a dashboard page where authenticated users can view basic information or perform actions related to the app's purpose.
• Profile Management:
  • Allow users to view and edit their profile information Include basic fields like name and email.
• Component Architecture:
  • Components are appropriately modularized and reusable.
  • Components structured logically, with clear separation of concerns.
• Responsive Design:
  • The app layout is responsive and works well on various screen sizes,including mobile devices.
  • We Use CSS frameworks Bootstrap (SASS) to facilitate responsiveness.
• Routing
  • Implement client-side routing by building a SPA with React Router.
  • Routes are defined logically, with appropriate handling of nested routes and redirects.
• Forms Handling
  • We work with Forms and user inputs with Formik.
  • Validate form's inputs properly, with error messages displayed as needed.
• State Management:
  • Utilize React's built-in state management for managing local component state.
• Error Handling:
  • Implement basic error handling to display informative error messages to users when something goes wrong.
  • Handle common error scenarios like network failures, invalid inputs, or server errors gracefully.

Run Locally For BE

Clone the project

  git clone https://github.com/YousefMTaha/Ecommerce-Web-Project

Go to the project directory

  cd Ecommerce-Web-Project/BE

Install dependencies

  npm install

Start the server

  npm run dev

Run Locally For FE

Go to the project directory

  cd Ecommerce-Web-Project/FE

Install dependencies

  npm install

Start the server

  npm run Start

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

DB_ATLAS='mongodb+srv://tyousef262:[email protected]/web-project-ecommerce'ّ

PORT=3000

SALT_ROUND=9

TOKEN_SIGNATURE="imposopolTS"

MOOD="DEV"

BEARER_KEY="yousef_"

gmail="[email protected]"

gmailPass="mgltqxojgmjtvgoj"

cloud_name="ducoqbn7x"

api_key="318884386692974"

api_secret="FO3iRWv8RWzwabFZ95mdRWBtETA"

ENCRYPTION_KEY="imposopolEK"

SUCSESSFUL_PAYMENT = '4242424242424242'

FAILD_PAYMENT ='4000000000009995'

REQUIRED_AUTHENTICATION ="4000002500003155"

CANCEL_URL= 'http://localhost:4000/product/search'

SUCCESS_URL='http://localhost:3001/E-commerce#/allorders'

PAYMENT_SECRET_KEY='sk_test_51NlrAeGR9Ya7i8epSwqhE8bvXjh7kUmpI3qmGi1m7sLhJYddjhrO8aPkgphH5NGFxk6gDs7pkPL47XDZGiGE0aJW004YK9FoM2'

ENDPOINT_SECRET ='whsec_bMewvPkLENhPOB59Ix5jq6Vis3TaPNYV'

Technical Requirements Document (TRD)

API Documentation

Postman-Doc

DB Schema

DB-Schema (Download it for better resolution)