MERN Stack Authentication with Role-Based Access Control

I'll help you set up a MERN stack application with authentication and role-based user management using MUI for the frontend design and Vite for the React setup. Let's start with the basic structure and authentication components.

"^4.6.0",

"eslint-plugin-react-refresh": "^0.4.3", "vite": "^4.4.5" } }

2. Install dependencies:

   npm install
3. Make sure MongoDB is running locally or update the .env file with your MongoDB connection string.

4. Start the server:

   npm run dev

Frontend Setup

1. Navigate to the client directory:

   cd client

2. Install dependencies:

   npm install

3. Start the Vite development server:

   npm run dev

Application Structure

This application follows a typical MERN stack architecture:

1. React Frontend with Vite:

   • Material UI components for a clean, responsive design
   • React Router for navigation
   • Protected routes based on user roles
   • Context API for state management

2. Express Backend:

   • JWT-based authentication
   • Role-based access control
   • RESTful API endpoints

3. MongoDB Database:

   • User model with role-based permissions
   • Relationships between users (resellers and their users)

Key Features Implemented

1. Authentication:

   • User registration
   • User login
   • JWT authentication
   • Protected routes

2. Role-Based Access Control:

   • Three roles: user, reseller, and admin
   • Different dashboards and permissions based on roles
   • Navigation based on user role

3. User Management:

   • User creation
   • User suspension
   • User profile management

Next Steps

Based on your requirements, here are some features we should implement next:

1. Campaign Management:

   • Create campaign forms and workflows
   • Filtering and approval systems
   • File upload handling

2. Credit System:

   • Credit allocation for users
   • Credit usage tracking
   • Purchase and refund functionality

3. Reporting:

   • User activity reports
   • Campaign statistics
   • Credit usage analytics

4. Admin Tools:

   • Advanced user management
   • System configuration
   • Audit logs

Would you like me to focus on implementing any specific feature next?

Please make sure to add the following environment variables to your project:

Great! Now that we have the environment variables set up, let's continue building the application by implementing the campaign management functionality. This is a core feature of your application that will allow users to create and manage campaigns, while resellers and admins can review and approve them.

Campaign Management Implementation

I've implemented the campaign management functionality for your MERN stack application. This includes:

Backend Components:

1. Campaign Model: A comprehensive MongoDB schema for campaigns with fields for:

   • Basic info (title, description)
   • Status tracking (draft, pending, approved, rejected, active, completed)
   • Campaign types (regular, demo)
   • User and reseller relationships
   • File attachments
   • Credit tracking
   • Approval workflow data

2. Campaign Routes: RESTful API endpoints for:

   • Creating campaigns with file uploads
   • Retrieving campaigns (with role-based filtering)
   • Updating campaign status
   • Approving/rejecting campaigns

3. File Upload Handling: Using Multer middleware to:

   • Store uploaded files securely
   • Validate file types and sizes
   • Associate files with campaigns

Frontend Components:

1. User Campaign Management:

   • Campaign listing page with status indicators
   • Campaign creation form with file uploads
   • Campaign detail view

2. Reseller Campaign Management:

   • Campaign approval workflow
   • Status filtering
   • Rejection with reason

Key Features:

1. Role-Based Access Control:

   • Users can create and view their own campaigns
   • Resellers can view and approve/reject campaigns from their users
   • Admins have full access to all campaigns

2. Credit System Integration:

   • Regular campaigns cost credits (10 credits per campaign)
   • Demo campaigns are free
   • Credit validation before campaign creation

3. File Management:

   • Support for multiple file types (images, documents, videos)
   • File size limits (10MB per file)
   • Maximum 5 files per campaign

Next Steps

With the authentication and campaign management functionality in place, we can now focus on:

1. Credit Management System:

   • Credit purchase workflows
   • Credit allocation to users
   • Credit usage reporting

2. Admin Dashboard Enhancements:

   • System-wide campaign management
   • Advanced user management
   • Analytics and reporting

3. User Interface Refinements:

   • Campaign editing functionality
   • Campaign status updates
   • File preview capabilities

Would you like me to implement any of these next steps, or would you prefer to focus on a different aspect of the application?