MERN Stack Application - Agent Management System

A full-stack application built with MongoDB, Express.js, React, and Node.js for managing agents and distributing tasks through CSV uploads.

🚀 Features

Backend Features

User Authentication: JWT-based authentication with bcrypt password hashing
Agent Management: CRUD operations for agent management
CSV Processing: Upload and parse CSV/XLSX files with validation
Smart Distribution: Automatic distribution of items among agents
File Validation: Support for CSV, XLS, and XLSX formats
Database Integration: MongoDB with Mongoose ODM

Frontend Features

Modern UI: Responsive design with Tailwind CSS
TypeScript: Full type safety throughout the application
Authentication: Secure login with protected routes
Agent Management: Create, view, and manage agents
CSV Upload: Drag-and-drop file upload with validation
Distribution Overview: View distributed items per agent
Real-time Updates: Dynamic data updates and notifications

📁 Project Structure

CSTechAgents/
├── Backend/                 # Node.js/Express backend
│   ├── Controllers/        # Route controllers
│   ├── Database/          # Database connection
│   ├── Helper/           # Utility functions
│   ├── Middleware/       # Custom middleware
│   ├── Model/           # Mongoose models
│   ├── Routes/          # API routes
│   └── uploads/         # File upload directory
├── Frontend/             # React TypeScript frontend
│   ├── src/
│   │   ├── components/   # React components
│   │   ├── contexts/    # React contexts
│   │   ├── services/    # API services
│   │   └── types/      # TypeScript types
│   └── public/         # Static assets
└── README.md          # This file

🛠️ Tech Stack

Backend

Node.js - Runtime environment
Express.js - Web framework
MongoDB - Database
Mongoose - ODM for MongoDB
JWT - Authentication
bcrypt - Password hashing
Multer - File upload handling
CSV-Parse - CSV file parsing
XLSX - Excel file processing

Frontend

React 19 - UI library
TypeScript - Type safety
React Router - Navigation
Axios - HTTP client
React Hook Form - Form management
React Hot Toast - Notifications
Lucide React - Icons
Tailwind CSS - Styling

🚀 Getting Started

Prerequisites

Node.js (v16 or higher)
MongoDB
npm or yarn

Backend Setup

Navigate to the backend directory:
```
cd Backend
```
Install dependencies:
```
npm install
```

Create a .env file in the Backend directory:

PORT=8001
MONGODB_URI=mongodb://localhost:27017/cstechagents
JWT_Secret=your_jwt_secret_key
JWT_Timeout=1h

Start the backend server:
```
npm start
```

The backend will run on http://localhost:8001

Frontend Setup

Navigate to the frontend directory:
```
cd Frontend
```
Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```

The frontend will run on http://localhost:5173

📋 API Endpoints

Authentication

POST /api/user/register - Register new user
POST /api/user/login - User login
POST /api/user/logout - User logout
GET /api/user/profile - Get user profile

Agent Management

POST /api/agent/new - Create new agent
GET /api/agent/list - Get all agents
GET /api/agent/:id - Get agent items

File Upload

POST /api/upload/upload-csv - Upload CSV file

🎯 Usage

1. Admin Login

Access the application at http://localhost:5173
Login with admin credentials
Secure JWT-based authentication

2. Agent Management

Create new agents with name, email, mobile, and password
View all agents in a responsive grid layout
Click on agents to view details

3. CSV Upload & Distribution

Upload CSV, XLS, or XLSX files
Files must contain columns: FirstName, Phone, Notes
Items are automatically distributed among all agents
View distribution summary after upload

4. Distribution Overview

View items assigned to each agent
Expandable cards showing detailed item information
Real-time statistics and summaries

📊 Database Schema

User Model

{
  username: String,
  name: String,
  email: String (unique),
  password: String (hashed),
  role: String (admin/agent)
}

Agent Model

{
  name: String,
  email: String (unique),
  mobile: String,
  password: String
}

ListItem Model

{
  firstName: String,
  phone: String,
  notes: String,
  assignedTo: ObjectId (ref: Agents)
}

🔒 Security Features

JWT token-based authentication
Password hashing with bcrypt
CORS configuration
File upload validation
Input sanitization
Protected routes

🎨 UI/UX Features

Responsive design for all screen sizes
Modern, clean interface
Drag-and-drop file upload
Real-time notifications
Loading states and animations
Form validation with error messages
Accessible design patterns

🧪 Testing

Backend Testing

cd Backend
npm test

Frontend Testing

cd Frontend
npm test

📦 Deployment

Backend Deployment

Set up MongoDB Atlas or local MongoDB
Configure environment variables
Deploy to Heroku, Railway, or similar platform

Frontend Deployment

Build the production version:
```
npm run build
```
Deploy to Vercel, Netlify, or similar platform

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

Check the existing issues on GitHub
Create a new issue with detailed information
Contact the development team

🎉 Acknowledgments

React team for the amazing framework
MongoDB team for the database solution
Express.js team for the web framework
All contributors and testers

Happy Coding! 🚀

codehariom/CSTechAgents