Skip to content

Latest commit

 

History

History
87 lines (71 loc) · 3.2 KB

README.md

File metadata and controls

87 lines (71 loc) · 3.2 KB

Shopease

static-badge static-badge

0. Table of Contents

  1. Overview
  2. Main Features
  3. Advance Features
  4. Tools and technologies used
  5. Live Deployment
  6. Demo Video

1. Overview

Shopease is an e-commerce platform designed to provide a seamless shopping experience to users. With a vast selection of products ranging from electronics and fashion to home goods and beauty products, Shopease aims to cater to all your shopping needs in one location.

2. Main Features

  • Authentication - signup, login, logout
  • Cart management
    • Add item to cart
    • Remove item from cart
    • Update item quantity in cart
    • Clear cart
  • Wishlist management
    • Add item to wishlist
    • Remove item from wishlist
    • Clear wishlist
  • Manage addresses
    • Add new address
    • Update an address
    • Delete an address
    • Set an address as the default
  • Profile management
    • Update profile - first name, last name, phone, password
    • Delete account
  • Products
    • Filter by categories, brands and rating
    • Sort by rating, newly added, price-low to high, and price-high to low
  • View order history
  • Admin panel
    • Product management
      • Add new product
      • Update product details
      • Delete a product
      • Filter and sort products
    • User management
      • Update user role
      • Delete a user
    • Order management
      • Update order status
      • Delete an order
      • Sort orders by amount - asc or desc

3. Advance Features

  • Pagination to render large lists of products, orders and users
  • Sanitization and validation of data entered in React Forms
  • Lazy loading to import bundles only when they are required, thereby reducing the initial bundle size
  • Memoization of React components and expensive calculations using memo function and useMemo hook
  • Best practices of React and Redux to minimize unnecessary re-renders
  • Custom hooks to handle components like modals and dropdowns

4. Tools and technologies used

  • Create React App to initialize React project
  • Tailwind CSS to style UI components
  • React Router v6 to implement client-side routing
  • Redux to save global state in an external store
  • Redux Thunks to fetch data from APIs and save it in a Redux store
  • Axios client to send HTTP requests
  • JSON Server as a mock backend to serve incoming API requests
  • Morgan to log information about HTTP requests
  • Deployed on a DigitalOcean Droplet using Nginx as a web server
  • Configured PM2 to keep JSON Server running as a daemon process to ensure availability

5. Live Deployment

Shopease is deployed on a DigitalOcean Droplet using Nginx as a web server and is linked to a custom domain. To visit the live deployment, click here.

6. Demo Video

Demo video of the project is uploaded on youtube. To watch the demo video, click here.

Preview