A modern frontend application for lead management, built with Next.js 16, React 19, and TypeScript
📌 Note: This is the frontend application that consumes APIs from the LeadFusion Node.js Backend
Features • Tech Stack • Getting Started • Project Structure • API Documentation
- Lead Tracking - Comprehensive lead lifecycle management
- Campaign Integration - Associate leads with marketing campaigns
- CSV Import - Bulk lead import functionality
- Lead Status Workflow - Track payment status, return status, and lead progression
- Real-time Updates - Socket.io integration for live lead updates
- Personal Dashboard - View your leads, campaigns, and billing info
- Campaign Management - Create and manage your marketing campaigns
- Billing Control - Track spending and manage payments
- Settings - Personal profile and preferences
- FAQ & Support - In-app help and feedback system
- Live Chat - Real-time communication support
- User Management - Full user administration with verification controls
- Lead Analytics - Comprehensive lead tracking and reporting
- Campaign Oversight - Monitor and manage all campaigns
- Location Management - Geographic targeting and coverage
- Activity Logs - Full audit trail of system activities
- System Settings - Platform-wide configuration
- JWT-based Authentication - Secure token management
- Remember Me - Extended 30-day sessions
- Role-based Access Control - Admin/User permission levels
- Email Verification - Secure account activation
- Password Recovery - Forgot password flow with secure reset
- Session Monitoring - Cross-tab session synchronization
- Redis Caching - Optimized auth token caching
- Real-time Balance Tracking - Current account balance display
- Payment Processing - Secure payment integration
- Transaction History - Full payment audit trail
- Pay Now Feature - Single-click lead payment
- Google Maps Integration - Interactive map-based location picking
- Geographic Targeting - State and zip code coverage
- Leaflet Maps - Alternative mapping solution
- Socket.io Integration - Live updates and notifications
- In-app Chat - User-to-admin communication
- Notification System - Real-time alerts
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.x | React Framework |
| React | 19.x | UI Library |
| TypeScript | 5.x | Type Safety |
| Tailwind CSS | 4.x | Styling |
| Redux Toolkit | 2.x | State Management |
| MUI (Material-UI) | 7.x | UI Components |
| Formik + Yup | Latest | Form Management |
| Recharts | 3.x | Data Visualization |
| Socket.io Client | 4.x | Real-time Communication |
- Node.js 18+ (see
.nvmrc) - npm or pnpm
- LeadFusion Backend API running (see leadfusion-api)
-
Clone the repository
git clone https://github.com/leadfusionhq/leadfusion.git cd leadfusion -
Install dependencies
npm install # or pnpm install -
Set up environment variables
cp .env.example .env
Configure the following in
.env:NEXT_PUBLIC_BASE_URL=http://localhost:3000 NEXT_PUBLIC_BACKEND_API_URL=http://localhost:8080 NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
-
Run the development server
npm run dev # or pnpm dev -
Open your browser
Navigate to http://localhost:3000
# Using Docker Compose
docker-compose up -d
# Or build manually
docker build -f Dockerfile.dev -t leadfusion-dev .
docker run -p 3000:3000 leadfusion-devleadfusion/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API Routes
│ │ │ ├── auth/ # Authentication endpoints
│ │ │ └── admin/ # Admin-only endpoints
│ │ ├── admin/ # Admin pages
│ │ ├── dashboard/ # User dashboard pages
│ │ ├── login/ # Auth pages
│ │ ├── register/
│ │ └── ...
│ │
│ ├── components/ # React Components
│ │ ├── admin-dashboard/ # Admin UI components
│ │ │ ├── campaigns/
│ │ │ ├── leads/
│ │ │ ├── user-management/
│ │ │ └── ...
│ │ ├── user-dashboard/ # User UI components
│ │ │ ├── campaigns/
│ │ │ ├── leads/
│ │ │ ├── billing-control/
│ │ │ └── ...
│ │ ├── auth/ # Auth components
│ │ ├── common/ # Shared components
│ │ ├── Layout/ # Layout components
│ │ └── ...
│ │
│ ├── redux/ # Redux state management
│ │ ├── auth/ # Auth slice & actions
│ │ └── store.ts
│ │
│ ├── hooks/ # Custom React hooks
│ ├── context/ # React Context providers
│ ├── services/ # Business logic services
│ ├── utils/ # Utility functions
│ ├── types/ # TypeScript definitions
│ ├── middleware/ # API middleware
│ ├── models/ # MongoDB models
│ └── mails/ # Email templates
│
├── public/ # Static assets
├── docker-compose.yml # Docker configuration
├── Dockerfile # Production Dockerfile
├── Dockerfile.dev # Development Dockerfile
└── package.json
# Development
npm run dev # Start development server
# Production
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLintThe project uses strict TypeScript configuration. See tsconfig.json for details.
ESLint is configured via eslint.config.mjs with Next.js recommended rules.
When adding new dependencies, install types with:
npm i --save-dev @types/package-name- Fork the repository
- Create your 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
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please contact the development team or open an issue on GitHub.
- GitHub Issues: Report a bug