Ecommerce-Website : IIITM-Kart

Hosted Website URL: https://iiitm-kart.herokuapp.com/

About this website:

A fully functional E-commerce Website using MERN stack, with pages like Home Page, User Details section, Admin Page, and Shopping Cart.

Main Functionality:

• Home Page:
  1. Product Cards and Product Detail
  2. Add to Cart functionality
• Shopping Cart:
  1. Cart Items,Change Qty, Remove Item,
  2. Cost, Total Cost,
  3. Payment Gateway
• Users Page:
  1. Login/Signup
  2. Orders,Show Order Details
  3. Show/Edit user Details
• Admin Page:
  1. Item (Add Item, Edit Item)
  2. See Orders, Users
  3. Change Order status
  4. Make users as Admin

More Features:

• Sending Mail (using nodemailer) to whenever the user Cancels order, completes a payment, Signs up for the website, and sending OTP when the user Forgets the Password, to reset the password.
• Chatbot (react-simple-chatbot) that displays Orders, Payments and Contact Us Info to the User when asked for.
• SignUp authentication via Email.
• Admin Dashboard that shows recent orders and other data.
• User Rating of an item.
• Category Filters and Sorting to Items in the Home Page.
• RazorPay Payment Gateway.
• Modals and Snackbars (using react-bootstrap and material-UI).
• Search Bar on the Admin pages and Navbar.
• Carousel on the Home Page.
• Scroll to Top button
• Footer
• Error Page

Concepts:

Applying CRUD functionality and realtime Database Updation using MongoDB Atlas. To understand the flow of Data and Interaction of a website with the user, and how it reflects in the Database.

Thought behind the project:

An online portal for people of IIITM to have their own system of e-commerce. Inspired by famous E-commerce websites like Amazon and Flipkart.

Setup Steps:

1. Run "git clone" in the project folder
2. On main project folder run "npm install"
3. On client folder run "npm install"
4. Finally on main folder run "npm run dev"
5. Visit localhost:3000

Screenshots:

• Home-Page:

  

• Chatbot:

  

• Cart and Payment:

  

• Admin: