Ebay clone in MERN Stack

The eBay clone in MERN Stack is a web application that replicates the core functionalities of the eBay platform using the MERN (MongoDB, Express.js, React, Node.js) technology stack. This clone allows users to buy and sell products in an online marketplace environment. It incorporates features such as user authentication, product listings, bidding or purchasing capabilities, and seller profiles. Utilizing the power of MERN, the application provides a responsive and dynamic user interface, real-time updates, and seamless interactions for a user-friendly online shopping experience reminiscent of eBay.

• Demo

TODOS

1. ADD DIFFERENT AUCTION SYSTEM[]
2. ADD STRIPE TO BACKEND INSTEAD OF FRONTEND
3. OPTIMIZE IMAGES FROM UNSPLASH AS WEBP
4. Optimize App By Using useContext in global States Only

• Auth
• Translation
• Theme Dark/Light Mode

5. Remove Products & Categories from Global State

Built With

• React Documentation
• Node.js Documentation
• Express.js Documentation
• MongoDB Documentation
• Mongoose Documentation
• axios Documentation
• bcrypt Documentation
• jsonwebtoken Documentation
• React Router - useNavigate:
  • React Router useNavigate documentation
• React Swiper:
  • Swiper documentation
  • Swiper Options
  • Swiper Modules
• React Context API:
  • React Context documentation
• Sass:
  • Sass documentation

Start By

• Frontend yarn start

• Backend node index.js

• Make sure to change the username and password for your MongoDB ATLAS_URI

ATLAS_URI=mongodb+srv://<username>:<password>@cluster0.vr0db7g.mongodb.net/?retryWrites=true&w=majority

• Add jwt secret using crypto

JWT_SECRET=

Deploy

1. Front End

yarn build

• Then Deploy Static File to netlify

Replace links

// Production
// https://ebayclonemern.netlify.app/
- const productLink = `https://ebayclonemern.netlify.app/item/${product?._id}`;
- const productLink = `https://ebayclonemern.netlify.app/item/${product?._id}`;
- "http://localhost:3000/" // For Development
// Backend API
- "https://server-ebay-clone.onrender.com/" // For Development

2. Back End

Deploy to render

References

• MERN Stack Tutorial - MongoDB
• react-icons Documentation
• MERN Stack Project Structure: Best Practices - Kingsley Amankwah
• React Router DOM Documentation
• Swiper API Documentation
• React Documentation - React.FC
• React Router DOM - useNavigate
• Swiper Documentation - Swiper and Modules
• React Router Documentation
• useParams Hook
• React Context Documentation
• State Management in React
• Understanding Infinite Loops in React
• Unsplash
• Pexels
• React Icons Library
• React
• React.useState()
• React Functional Components
• React Forms
• React Conditional Rendering
• React Events
• CSS Flexbox
• CSS Transitions
• DOM Warning: Password field is not contained in a form
• React Documentation
• Node.js Documentation
• Express.js Documentation
• MongoDB Documentation
• Mongoose Documentation
• axios Documentation
• bcrypt Documentation
• jsonwebtoken Documentation
• React Router useNavigate documentation
• Swiper documentation
• Swiper Options
• Swiper Modules
• React Context documentation
• Sass documentation
• @types/react-router-dom
• Reason: missing token 'xyz' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel
• <details>: The Details disclosure element
• @emailjs/browser
• Profiler - React Docs
• How to use profiling in production mode for react-dom
• Uploading Multiple Images on Cloudinary using Express Js and MongoDB- Ermias Asmare
• How to Configure SAML 2.0 for MongoDB Cloud
• Configuration options for the dependabot.yml file
• What is rate limiting? | Rate limiting and bots
• Write Concern-MongoDB
• Passing Data Deeply with Context
• React Context performance and suggestions