📋 Client Lead Management System — Mini CRM

A full-stack CRM (Customer Relationship Management) application built to manage client leads generated from website contact forms. Developed as part of Task 2 of the Future Interns Full Stack Web Development Internship.

---

🚀 Live Demo

View Live (https://crmtask-2.lovable.app)

---

📸 Preview

---

📌 About the Project

This is a Mini CRM system designed to help businesses efficiently manage and track client leads. It provides a clean admin dashboard to view, update, and follow up on leads generated from website contact forms — with secure admin access to protect sensitive data.

---

✨ Features

• 📋 Lead Listing — View all leads with name, email, source, and status at a glance
• 🔄 Lead Status Updates — Update lead status between New, Contacted, and Converted
• 📝 Notes & Follow-ups — Add notes and schedule follow-ups for each lead
• 🔐 Secure Admin Access — Protected dashboard with authentication
• 📊 Dashboard Overview — Quick summary of all lead statuses
• 🗄️ Database Integration — Persistent data storage with MongoDB & MySQL
• 🔗 RESTful APIs — Clean backend APIs built with Node.js & Express

---

🛠️ Tech Stack

Layer	Technology
Frontend	React.js, HTML5, CSS3, JavaScript
Backend	Node.js, Express.js
Database	MongoDB, MySQL
Deployment	Lovable
Authentication	Secure Admin Access

---

📂 Project Structure

client-lead-management/
├── client/                  # React Frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── LeadList.jsx
│   │   │   ├── LeadCard.jsx
│   │   │   ├── LeadForm.jsx
│   │   │   └── Dashboard.jsx
│   │   ├── pages/
│   │   │   ├── Home.jsx
│   │   │   ├── Leads.jsx
│   │   │   └── Login.jsx
│   │   └── App.jsx
│   └── package.json
├── server/                  # Node.js Backend
│   ├── routes/
│   │   ├── leads.js
│   │   └── auth.js
│   ├── models/
│   │   └── Lead.js
│   ├── controllers/
│   │   └── leadController.js
│   ├── middleware/
│   │   └── authMiddleware.js
│   └── index.js
├── .env
├── package.json
└── README.md

---

🔗 API Endpoints

Method	Endpoint	Description
GET	/api/leads	Get all leads
POST	/api/leads	Create a new lead
PUT	/api/leads/:id	Update lead status/notes
DELETE	/api/leads/:id	Delete a lead
POST	/api/auth/login	Admin login

---

⚙️ Getting Started

Prerequisites

• Node.js installed
• MongoDB running locally or MongoDB Atlas
• MySQL installed (optional)
• Git installed

Installation

# Clone the repository
git clone https://github.com/Chandana1707/FUTURE_FS_02.git

# Navigate to project directory
cd FUTURE_FS_02

# Install backend dependencies
cd server
npm install

# Install frontend dependencies
cd ../client
npm install

Environment Variables

Create a .env file in the server directory:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
MYSQL_HOST=localhost
MYSQL_USER=root
MYSQL_PASSWORD=your_password
MYSQL_DATABASE=crm_db

Run the Application

# Start backend server
cd server
npm start

# Start frontend (in a new terminal)
cd client
npm run dev

---

📊 Lead Status Flow

New Lead → Contacted → Converted

Status	Description
🆕 New	Freshly submitted lead
📞 Contacted	Lead has been reached out to
✅ Converted	Lead successfully converted to client

---

🔐 Admin Access

The application includes secure admin authentication:

• JWT-based authentication
• Protected routes for admin dashboard
• Secure login page

---

🎓 Skills Gained

• ✅ CRUD operations with REST APIs
• ✅ Backend integration with Node.js & Express
• ✅ Database management with MongoDB & MySQL
• ✅ Business workflow implementation
• ✅ Authentication & secure access
• ✅ Full stack application development

---

🎓 Internship Details

• Program: Full Stack Web Development Internship
• Organization: Future Interns
• Task: Task 2 — Client Lead Management System (Mini CRM)
• College: CMR Engineering College

---

👩‍💻 Author

Chandana Vilasagaram

• 🔗 LinkedIn
• 🐙 GitHub