EcomBidding

An innovative and comprehensive e-commerce website with a unique twist—an integrated auction house! This project, developed using the popular MERN stack, provides a glimpse into the dynamic world of ecommerce and auctions. Designed with a focus on functionality and user-friendliness, this website carries to the needs of both buyers and sellers, offering a seamless experience for all.

Featuring a multi-user system, our platform accommodates admins, sellers, and buyers, each with their dedicated sections. This ensures that interactions and transactions occur effortlessly, contributing to a smooth and efficient experience across roles.

The project showcases a diverse range of products spanning electronics, clothing, home goods, accessories, and more. The integration of an auction house introduces an element of excitement, allowing users to bid on their favorite items and potentially secure great deals.

To guarantee secure transactions, we've implemented an integrated payment method through PayPal. Our additional verification headers add an extra layer of security, prioritizing the protection of user personal information throughout their online journey.

Emphasizing a user-centric design and a robust set of features, our web application stands as a testament to the capabilities of modern web development. Explore the functionalities and dynamics of online shopping and auctions with our project.

Features

• Interactive home page displaying products in a card view

• React context API for cart data, user data, shipping address, and payment method selection

• Search page for searching, sorting, and filtering products

• PayPal payment gateway integration

• Cloudinary integration for storing and using images

• Axios for promise-based HTTP API requests

• Google Charts for creating charts and graphs

• Tailwind CSS for building custom designs with minimal CSS code

• Font Awesome for customizable icons

• Local Storage API for storing key/value pairs in a web browser

• Multi-vendor support for Users, Sellers, and Admin

• Real-time bidding system using socket.io

• Product management features for Admin and Seller (add, delete, etc.)

• User authentication and profile editing

• Express Async Handler, JSON Web Tokens, Bcrypt JS, CORS, and Dot Env for backend security

• Pagination for user-friendly interface

Project Live On

Netlify

Technology Used

Commands

Backend

$ npm install

Installs all the required packages for backend

$ npm start

Starts the server using nodemon

Frontend

$ npm install

Installs all the required packages for frontend

$ npm start

Runs frontend on localhost(React App)

$ npm run build

Creates an optimized production build

Folder Structure

EcomBidding/
├── backend/
│   ├── models/
│   │   ├── auctionModel.js
│   │   ├── orderModel.js
│   │   ├── productModel.js
│   │   └── userModel.js
│   ├── routes/
│   │   ├── auctionRoutes.js
│   │   ├── orderRoutes.js
│   │   ├── productRoutes.js
│   │   ├── seedRoutes.js
│   │   ├── uploadRoutes.js
│   │   └── userRoutes.js
│   ├── .env
│   ├── index.js
│   └── utils.js
├── frontend/
│   ├── public/
│   │   ├── favicon.png
│   │   └── index.html
│   ├── src/
│   │   ├── Components/
│   │   │   ├── AdminRoute/
│   │   │   │   └── AdminRoute.js
│   │   │   ├── AuctionItem/
│   │   │   │   └── AuctionItem.js
│   │   │   ├── Categories/
│   │   │   │   ├── Categories.css
│   │   │   │   └── Categories.js
│   │   │   ├── CheckoutSteps/
│   │   │   │   └── CheckoutSteps.js
│   │   │   ├── ErrorPage/
│   │   │   │   ├── ErrorPage.css
│   │   │   │   └── ErrorPage.js
│   │   │   ├── Loading/
│   │   │   │   └── Loading.js
│   │   │   ├── LoadingDots/
│   │   │   │   ├── LoadingDots.css
│   │   │   │   └── LoadingDots.js
│   │   │   ├── Product/
│   │   │   │   └── Product.js
│   │   │   ├── ProtectedRoute/
│   │   │   │   └── ProtectedRoute.js
│   │   │   ├── Rating/
│   │   │   │   └── Rating.js
│   │   │   └── SellerRoute/
│   │   │       └── SellerRoute.js
│   │   ├── Pages/
│   │   │   ├── AddressPage/
│   │   │   │   ├── AddressPage.css
│   │   │   │   └── AddressPage.js
│   │   │   ├── Auction/
│   │   │   │   ├── Auction.css
│   │   │   │   └── Auction.js
│   │   │   ├── AuctionDetails/
│   │   │   │   ├── AuctionDetail.css
│   │   │   │   └── AuctionDetail.js
│   │   │   ├── CartPage/
│   │   │   │   ├── CartPage.css
│   │   │   │   └── CartPage.js
│   │   │   ├── CreateAuction/
│   │   │   │   ├── CreateAuction.css
│   │   │   │   └── CreateAuction.js
│   │   │   ├── Dashboard/
│   │   │   │   ├── Dashboard.css
│   │   │   │   └── Dashboard.js
│   │   │   ├── Footer/
│   │   │   │   └── Footer.js
│   │   │   ├── Header/
│   │   │   │   └── Header.js
│   │   │   ├── Home/
│   │   │   │   ├── Home.css
│   │   │   │   └── Home.js
│   │   │   ├── OrderHistory/
│   │   │   │   ├── OrderHistory.css
│   │   │   │   └── OrderHistory.js
│   │   │   ├── OrderListPage/
│   │   │   │   ├── OrderListPage.css
│   │   │   │   └── OrderListPage.js
│   │   │   ├── OrderPage/
│   │   │   │   ├── OrderPage.css
│   │   │   │   └── OrderPage.js
│   │   │   ├── PaymentMethod/
│   │   │   │   ├── PaymentMethod.css
│   │   │   │   └── PaymentMethod.js
│   │   │   ├── PlaceOrder/
│   │   │   │   ├── PlaceOrder.css
│   │   │   │   └── PlaceOrder.js
│   │   │   ├── ProductEditPage/
│   │   │   │   ├── ProductEditPage.css
│   │   │   │   └── ProductEditPage.js
│   │   │   ├── ProductListPage/
│   │   │   │   ├── ProductListPage.css
│   │   │   │   └── ProductListPage.js
│   │   │   ├── ProfilePage/
│   │   │   │   ├── ProfilePage.css
│   │   │   │   └── ProfilePage.js
│   │   │   ├── SearchPage/
│   │   │   │   └── SearchPage.js
│   │   │   ├── SignIn/
│   │   │   │   ├── Assets/
│   │   │   │   │   ├── avatar.svg
│   │   │   │   │   ├── unlock.svg
│   │   │   │   │   └── wave.png
│   │   │   │   └── SignIn.js
│   │   │   ├── SignUp/
│   │   │   │   ├── Assets/
│   │   │   │   │   ├── avatar.svg
│   │   │   │   │   ├── unlock.svg
│   │   │   │   │   └── wave.png
│   │   │   │   └── SignUp.js
│   │   │   ├── UserEditPage/
│   │   │   │   ├── UserEditPage.css
│   │   │   │   └── UserEditPage.js
│   │   │   └── UserListPage/
│   │   │       ├── UserListPage.css
│   │   │       └── UserListPage.js
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── Store.js
│   │   └── utils.js
│   ├── .env
│   └── tailwind.config.js
├── .gitignore
└── README.md

---