A modern, intelligent Customer Relationship Management system built with the MERN stack, designed to streamline lead management, automate workflows, and provide powerful analytics for growing businesses.
- Lead Management: Create, update, and track leads with detailed project descriptions
- User Authentication: Role-based access control (Admin/User) with JWT authentication
- Contact Form: Professional contact form with project requirement capture
- Admin Dashboard: Comprehensive dashboard with analytics and lead management
- Real-time Analytics: Interactive charts showing lead growth and project distribution
- Session Persistence: Automatic login restoration across page refreshes
- Multiple Submissions: Allow multiple lead submissions from the same email
- Project Categorization: Intelligent categorization of project types from descriptions
- Responsive Design: Mobile-first design that works seamlessly on all devices
- Loading States: Professional loading spinners and skeleton screens
- Toast Notifications: User-friendly feedback system
- React 18: Modern React with hooks and functional components
- React Router: Client-side routing with protected routes
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- Recharts: Data visualization library for analytics charts
- Axios: HTTP client for API requests
- React Context: State management for authentication
- Node.js: JavaScript runtime environment
- Express.js: Web application framework
- MongoDB: NoSQL database for data storage
- Mongoose: MongoDB object modeling for Node.js
- JWT: JSON Web Tokens for authentication
- bcryptjs: Password hashing for security
- dotenv: Environment variable management
- nodemon: Auto-restart server during development
- Git: Version control system
- Node.js (v14 or higher)
- MongoDB Atlas account or local MongoDB installation
- Git
git clone <repository-url>
cd leadflow-crm# Navigate to server directory
cd server
# Install dependencies
npm install
# Create .env file
cp .env.example .envUpdate the .env file with your credentials:
# MongoDB Connection URI
MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/<database>?retryWrites=true&w=majority
# Server Configuration
PORT=5000
NODE_ENV=development
# JWT Configuration
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
JWT_EXPIRE=30d
# Admin Credentials
ADMIN_EMAIL=your-admin-email@example.com
ADMIN_PASSWORD=your-admin-password# Navigate to client directory
cd ../client
# Install dependencies
npm installcd server
npm startcd client
npm startThe application will be available at:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
- Sign Up: Create a new account with your email and password
- Login: Access your personalized dashboard
- Submit Projects: Use the contact form to submit project requirements
- Track Progress: View your submitted projects and their status
- Admin Login: Use admin credentials to access the admin dashboard
- Lead Management: View, update, and manage all submitted leads
- Analytics: Access comprehensive analytics with interactive charts
- User Management: Monitor user activity and project submissions
- Email: admin@example.com
- Password: admin123
Note: To set up your own admin account, run node seedAdmin.js after configuring your .env file with your preferred admin credentials.
POST /api/auth/login- User loginPOST /api/auth/signup- User registration
GET /api/leads- Get all leads (Admin only)POST /api/leads- Create new leadGET /api/leads/:id- Get single leadPUT /api/leads/:id- Update leadDELETE /api/leads/:id- Delete leadPOST /api/leads/:id/notes- Add note to lead
GET /api/health- Server health status
leadflow-crm/
|-- client/ # React frontend
| |-- public/
| |-- src/
| | |-- components/ # Reusable components
| | |-- context/ # React context providers
| | |-- pages/ # Page components
| | |-- services/ # API services
| | |-- App.js # Main App component
| | |-- index.js # App entry point
| |-- package.json
|-- server/ # Node.js backend
| |-- controllers/ # Route controllers
| |-- models/ # Database models
| |-- middleware/ # Custom middleware
| |-- routes/ # API routes
| |-- .env # Environment variables
| |-- .gitignore # Git ignore file
| |-- index.js # Server entry point
| |-- package.json
|-- README.md # Project documentation
- Lead Growth Chart: 7-day trend visualization of lead submissions
- Project Distribution: Pie chart showing project type breakdown
- Statistics Cards: Total leads, new leads today, conversion rate
- Real-time Updates: Charts update automatically with new data
- Detailed View: Complete lead information with project descriptions
- Status Tracking: New, Contacted, Converted, Lost status management
- Notes System: Add internal notes for each lead
- Bulk Actions: Multiple lead management capabilities
- JWT Authentication: Secure token-based authentication
- Role-Based Access: Admin and user role separation
- Password Hashing: Secure password storage with bcrypt
- Input Validation: Comprehensive input sanitization and validation
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please contact:
- Email: sangabharath302@gmail.com
- Phone: +91 7780180734
- Location: India
- React team for the excellent framework
- Tailwind CSS for the utility-first CSS framework
- Recharts for the data visualization library
- MongoDB for the robust database solution
- All contributors and users of this project