Giter VIP home page Giter VIP logo

itsvaibhavmishra / ecombidding Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 0.0 2.24 MB

EcomBidding is a full-stack MERN web application that combines the features of an e-commerce website with those of an auction house. Users can browse and purchase products at regular prices, or participate in auctions. The application features a user-friendly interface and provides various payment and shipping options to ensure a smooth experience.

Home Page: https://ecombidding.netlify.app

HTML 0.38% CSS 3.68% JavaScript 95.94%
auction axios bcryptjs cloudinary context-api ecommerce express font-awesome jwt-authentication localstorage mern mern-stack mongodb nodejs paypal react-google-charts reactjs rest-api socket-io tailwindcss

ecombidding's Introduction

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
Netlify Status

Technology Used

React CSS3 HTML5 JavaScript Node.js Express.js Git Tailwind MongoDB

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



Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.