🚀 AgentFlow: MERN Stack Task Distribution App

AgentFlow is a powerful full-stack web application built with the MERN stack (MongoDB, Express.js, React.js, Node.js) designed for administrators to manage a team of agents and efficiently distribute tasks. The application features secure admin authentication, agent management capabilities, and a seamless process for uploading customer lists (via CSV/XLSX) which are automatically and evenly distributed among available agents.

---

🌐 Live Demo & Resources

Resource	Link
🌍 Live Application	View Deployed App

---

✨ Key Features

🔐 Secure Authentication System

• JWT-based admin authentication
• Password hashing with bcrypt
• Protected routes and middleware

👥 Agent Management

• Create and manage team agents
• View comprehensive agent listings
• Assign and track agent workloads

📂 Intelligent File Processing

• Support for .csv, .xlsx, and .xls formats
• Robust file type validation
• Error handling for malformed files

🤖 Automated Task Distribution

• Core Feature: Intelligent parsing and distribution
• Equal distribution among up to 5 agents
• Smart remainder handling (sequential assignment)
• Real-time task allocation

📊 Dynamic Dashboard

• Clean, organized layout
• Real-time agent and task overview
• Interactive data visualization

🎨 Premium UI/UX

• Modern, responsive design with Tailwind CSS
• Stunning 3D animated background (Three.js + React Three Fiber)
• Real-time notifications with Sonner
• Mobile-first responsive design

---

🛠️ Tech Stack

Category	Technologies
Frontend
3D Graphics	React Three Fiber, Drei
Backend
Database
Authentication	JWT, bcrypt.js
File Processing	Multer, csv-parser, xlsx
Deployment

---

📂 Project Architecture

mern-agent-app/
├── 🗂️ backend/
│   ├── 📁 config/           # Database & app configuration
│   ├── 📁 controllers/      # Request handlers & business logic
│   ├── 📁 models/           # MongoDB schemas & models
│   ├── 📁 routes/           # API endpoint definitions
│   ├── 📁 middleware/       # Authentication & validation
│   ├── 🔐 .env             # Environment variables
│   └── 🚀 server.js        # Express server entry point
└── 🗂️ frontend/
    ├── 📁 src/
    │   ├── 📁 components/   # Reusable React components
    │   ├── 📁 pages/        # Application pages/views
    │   ├── 📁 hooks/        # Custom React hooks
    │   ├── 📁 services/     # API communication layer
    │   ├── ⚛️ App.jsx       # Root component
    │   └── 🎯 main.jsx      # Application entry point
    ├── 🔐 .env.local        # Frontend environment variables
    └── ⚡ vercel.json       # Vercel deployment configuration

---

🚀 Quick Start Guide

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or later) - Download
• npm or yarn package manager
• MongoDB - Local instance or MongoDB Atlas (free tier available)

🛠️ Installation Steps

1️⃣ Clone the Repository

git clone https://github.com/Chaithanyaina/Agent_Manager.git
cd mern-agent-app

2️⃣ Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

# Database Configuration
MONGO_URI=your_mongodb_connection_string

# Security
JWT_SECRET=your_super_secret_key_for_jwt_tokens

# Server Configuration
PORT=5000

# Default Admin Credentials (created on first server start)
ADMIN_EMAIL=**************@gmail.com
ADMIN_PASSWORD=**************

3️⃣ Frontend Setup

cd ../frontend
npm install

Create a .env.local file in the frontend directory:

# Backend API Configuration
VITE_API_URL=http://localhost:5000/api

▶️ Running the Application

Start Backend Server

cd backend
npm run server

🌐 Backend runs on: http://localhost:5000

Start Frontend Development Server

cd frontend
npm run dev

🌐 Frontend runs on: http://localhost:5173

🎉 Access Your Application

1. Open your browser to http://localhost:5173
2. Login with your admin credentials from the .env file
3. Start creating agents and distributing tasks!

---

🚀 Deployment Guide

This application uses a split deployment strategy for optimal performance:

🔧 Backend Deployment (Render)

1. Push to GitHub: Ensure your code is in a GitHub repository
2. Create Render Service:
   • Go to Render and create a new "Web Service"
   • Connect your GitHub repository
3. Configure Settings:

   Root Directory: backend
   Build Command: npm install
   Start Command: npm start
   

4. Environment Variables: Add all variables from your local backend/.env plus:

   FRONTEND_URL=https://your-frontend-app.vercel.app

⚡ Frontend Deployment (Vercel)

1. Create Vercel Project: Connect the same GitHub repository
2. Automatic Detection: Vercel will auto-detect Vite configuration
3. Environment Variables: Add:

   VITE_API_URL=https://your-backend.onrender.com/api

4. SPA Routing: The included vercel.json handles page refresh routing

---

🔧 Configuration Details

Environment Variables Reference

Backend (.env)

Variable	Description	Example
MONGO_URI	MongoDB connection string	mongodb+srv://user:pass@cluster.mongodb.net/db
JWT_SECRET	Secret key for JWT tokens	your-256-bit-secret
PORT	Server port	5000
ADMIN_EMAIL	Default admin email	ad**************le.com
ADMIN_PASSWORD	Default admin password	sec**********d

Frontend (.env.local)

Variable	Description	Example
VITE_API_URL	Backend API endpoint	http://localhost:5000/api

---

💬 Support & Contact

• 📧 Email: chaithanyainaganti@gmail.com

---

🌟 If you found this project helpful, please give it a star! ⭐

Built with ❤️ using the MERN Stack