Gentsshop E-Commerce Shopping App (Manefest)

---

Introduction

---

Welcome to Gentsshop(Manefest), an e-commerce shopping app built using the MERN (MongoDB, Express, React, Node.js) stack and Material-UI (MUI) for the user interface. This project provides both normal user and admin modes, offering a wide range of features to enhance the shopping experience.

Demo

Normal User Area

https://github.com/shakirva/Gentsshop/blob/main/Demo/User%20demo.mp4

Admin Area

https://github.com/shakirva/Gentsshop/blob/main/Demo/Admin%20demo.mp4

Dummy User Accounts

| Email (Normal User) | Password | Email (Admin) | Password | | ------------------- | -------- | ----------------- | --------- | | user@gmail.com | user1234 | admin@gmail.com | admin1234 | | user01@gmail.com | user1234 | admin01@gmail.com | admin1234 |

Tech Stack

Project Configuration Guide

Cloudinary Configuration

• Cloudinary is used for image management and hosting. Follow these steps to configure Cloudinary for your project.

  • Create a Cloudinary account here.
  • Create a new Cloudinary project.
  • Go to the dashboard and copy the cloud name, API key, and API secret.

  Stripe Configuration

  • Stripe is used for payment processing. Follow these steps to configure Stripe for your project.
  • Create a Stripe account here.
  • Go to the dashboard and copy the publishable key and secret key.

  Nodemailer Configuration

  • Nodemailer is used for sending emails. Follow these steps to configure Nodemailer for your project.
  • Create a Gmail account here.
  • Go to the account settings and enable the Less Secure App Access.
  • Go to the dashboard and copy the email and password.
  • Go to .env file and save SMTP_MAIL and SMTP_PASS.
  • If you are using Gmail, you can directly copy the email and password. If you are using any other email service, you need to copy the SMTP host, port, and service.
  • Repl

  MongoDB Configuration

  • MongoDB is used for storing data. Follow these steps to configure MongoDB for your project.
  • Create a MongoDB account here.
  • Create a new project and cluster.
  • Go to the dashboard and copy the connection string.
  • Go to .env file and save DB_LINK.

Installation

1. Clone the repository:

   git clone https://github.com/shakirva/Gentsshop.git
   cd Gentsshop
   

2. Install dependencies:

   npm install
   cd frorntend
   npm install
   cd ..
   

3. Create a config folder inside the backend directory of the project and then create a .env file inside the config folder and add the following:

   PORT = 5000
   DB_LINK ="mongodb+srv://<username>:<password>@<cluster-url>/<database-name>?retryWrites=true&w=majority"
   NODE_ENV = production
   JWT_SECRET = <jwt-secret-key>
   JWT_EXPIRE = 5d
   COOKIE_EXPIRE = 5
   SMTP_HOST=smtp.gmail.com
   SMTP_PORT=465
   SMTP_SERVICE = gmail
   SMTP_MAIL = <smtp-email>
   SMTP_PASSWORD = <smtp-password>
   SMTP_PASS = <smtp-password>
   CLOUDINARY_NAME = <cloudinary-name>
   API_KEY = <api-key>
   API_SECRET = <api-secret>
   CLOUDINARY_URL=cloudinary://<api-key>:<api-secret>@<cloudinary-name>
   FRONTEND_URL = http://localhost:3000
   STRIPE_API_KEY = <stripe-api-key>
   STRIPE_SECRET_KEY = <stripe-secret-key>
   
   
   

4. Run the app:

   cd backend &&
   npm start
   

   Features

Normal User Mode

| Feature | Description | | ------------------- | ------------------------------------------------------------ | | User Authentication | OAuth with JWT for secure user login and registration | | Password Reset | Reset password via email with reset link | | Profile Management | Update user profile details (email, name, password, picture) | | Shopping Cart | Add items to the cart and apply coupon codes | | Product Review | Logged-in users can review products | | Shipping Options | Specify shipping area for product delivery | | Order Tracking | Track the status of orders | | Payment Gateway | Secure payment processing via Stripe | | Contact Form | Contact form for user assistance | | Saved Addresses | Save multiple shipping addresses | | Advanced Search | Filter products by price range, category, and rating | | State Management | Global state management with Redux |

Admin Mode

| Feature | Description | | ----------------------- | -------------------------------------------------- | | Admin Dashboard | Access to an admin-only dashboard | | User Management | View and manage users (delete, promote to admin) | | Product Management | Edit and create products, manage stock levels | | Review Management | View and delete product reviews | | Order Management | View all orders, and can manage them | | Role-Based Permissions | Restrict admin features based on roles | | Order Approval Workflow | Set up approval process for Update status of order |

Upcoming Features

Normal User Mode

| Feature | Description | | ----------------------- | ------------------------------------------- | | Wishlist | Create and manage wishlists for products | | Product Recommendations | Receive suggestions for related products | | Product Comparisons | Compare product specifications side by side | | Social Sharing | Share favorite products on social media |

Admin Mode

| Feature | Description | | ------------------- | --------------------------------------------------------- | | Sales Analytics | Gain insights into sales trends and popular products | | Dynamic Coupons | Create and manage targeted coupons | | User Analytics | Track user engagement and activity | | Bulk Product Upload | Upload and update multiple products using CSV | | Automated Emails | Send automated emails for order confirmation and updates | | Notification Center | Receive alerts for new orders, low stock, and more | | Data Export | Export data sets (e.g., orders, products) to CSV or Excel | | Product Bundles | Create and manage product bundles |

Dependencies and Libraries

Backend

| Dependency | Description | | --------------------------------------- | ----------------------------------------------------- | | @babel/plugin-proposal-class-properties | Babel plugin for class properties | | @strapi/provider-upload-cloudinary | Cloudinary provider for Strapi uploads | | bcryptjs | Hash passwords before storing | | body-parser | Parse incoming request bodies | | cloudinary | Cloud storage for images and videos | | cookie-parser | Parse Cookie header and populate req.cookies | | cors | Enable Cross-Origin Resource Sharing | | crypto | Cryptographic functions for Node.js | | crypto-js | JavaScript library for cryptographic operations | | dotenv | Load environment variables from a .env file | | express | Web application framework for Node.js | | express-fileupload | Middleware to handle file uploads in Express | | helmet | Secure HTTP headers middleware | | http-proxy-middleware | Proxy requests in development | | jsonwebtoken | Generate and verify JSON Web Tokens | | jwt-simple | Simple JWT encoding and decoding | | mongoose | MongoDB object modeling tool | | nodemailer | Send email using Node.js | | nodemon | Monitor for changes in source code and restart server | | react-chartjs-2 | React wrapper for Chart.js 2 | | stripe | Payment processing library | | validator