MERN full-stack E-Store web app

The MERN (MongoDB, Express, React, Node.js) stack was used to create this full-stack online application, which also includes a Three.js-powered 3D product configurator. It is a flexible tool for e-commerce or product design platforms as it enables users to interactively alter 3D models in real-time.

Contents

1. Introduction
2. Tech Stack
3. Features
4. Quick Start

Introduction

This full-stack application creates a dynamic 3D product modification tool by fusing the interactivity of Three.js with the capabilities of the MERN stack (MongoDB, Express, React, and Node.js). The configurator, which was created for e-commerce or product design platforms, gives customers the ability to alter 3D models in real time, providing a rich, dynamic experience. With a completely responsive design, real-time updates, and a safe and scalable backend, this project demonstrates my proficiency in full-stack programming and 3D visualization while providing a useful and entertaining user experience.

Tech Stack

• React JS
• React-Three-Fiber
• CSS
• Node JS
• Express JS
• MongoDB

Features

1. Authentication with JWT: Secure user authentication using JSON Web Tokens (JWT) for login and session management.
   
2. 3D Configurator: Interactive 3D product customization tool allowing users to modify models in real-time.
   
3. Admin Dashboard: Comprehensive admin panel to manage products, categories, and user roles with full control.
   
4. User Dashboard: Personalized user dashboard for managing profiles, orders, and saved configurations.
   
5. Profile View: Dedicated section for users to view and update their profile information.
   
6. Categories & Products Search: Advanced search functionality to filter products and categories for easy navigation.
   
7. Product Management: Add, view, update, and remove products and categories with intuitive admin controls.
   
8. Admin Controls: Full control over site content, including user permissions, products, and categories.
   
9. Private Routing: Secure, role-based access control for different sections of the application using private routes.
   

Start Project

Follow these steps to set up the project locally on your machine.

**Add the following to the .env file

server :

PORT = *********
DEV_MODE =development
MONGO_URL = **********
JWT_SECRET_KEY = **********

client :

REACT_APP_BASE_URL = API_url

Cloning the Repository

git clone https://github.com/NaveenMathramkott/MERN_Ecommecre.git
cd MERN_Ecommecre

Start the server

  cd server
  npm install
   npm run start

Start the Client

  cd client
  npm install
  npm start

Happy Coding