Shoperz: Meesho-Clone

Shoperz is an online shopping site that allows users to buy high-quality fashion, electronics, home, and kitchen products at the lowest prices. This project is a clone of the popular e-commerce website Meesho.

Live Link

Visit the live website here and start shopping!

Tech stack

• client

  • React.js
  • react-icons
  • chakra-ui
  • redux-toolkit
  • axios
  • react-router-dom

• server

  • express
  • MongoDb
  • mongoose
  • cors
  • cloudinary
  • compression
  • dotenv
  • helmet
  • jsonwebtoken
  • morgan
  • multer
  • nodemailer
  • nodemon

Key Features

Features:

• User authentication and authorization (secured using email otp verification).
• Products divided into categories (Men, Women, Kids, etc.)
• Filter and sort functionality on all products pages.
• Detailed single product page with add to cart, and buy options.
• Search functionality on every page.
• Cart page with options to update quantity and delete items, and total calculation.
• Payment page with captcha for secure checkout.
• Profile section for user details and order history.
• Admin can edit , delete or add products to the platform.

Installation and Usage

To install and run the project locally, follow these steps:

1. Clone the repository: git clone https://github.com/Varun8177/hollow-idea-9446.git
2. Install the dependencies:
   • open terminal in client folder and write command - npm install
   • open terminal in server folder and write command - npm install
3. Add Environment variables

• client

     REACT_APP_CLOUDINARY_BASE_PATH - your cloudinary base path
     REACT_APP_BASE_URL - your api base url

• server

     NODE_ENV=development
     mongoURL=MongoDB connection string for development environment
     port=Port number for the server (default: 8080)
     jwtsecret=Secret key for JWT authentication
     TWILIO_ACCOUNT_SID=Twilio account SID for SMS services
     TWILIO_AUTH_TOKEN=Twilio authentication token
     TWILIO_PHONE_NUMBER=Twilio phone number for sending SMS
     cloud_name=Cloudinary cloud name
     api_key=Cloudinary API key
     api_secret=Cloudinary API secret
     hosts=Allowed hosts for CORS (Cross-Origin Resource Sharing)
     MAIL=Email address for SMTP mailer
     MAIL_PASSCODE=Password for SMTP mailer

4. Start the development server:
   • client : npm start
   • server : npm run dev

Screenshots

signup page

login page

user profile page

products page

product details page

cart page

payments page

order history page

Author

Varun Ergurala