A comprehensive lead management and CRM system for tracking and converting prospects. This project consists of two separate applications:
- Frontend: React application with TypeScript and Tailwind CSS
- Backend: Node.js API with Express and MongoDB
Note: The frontend and backend are completely separate projects that can be developed, deployed, and maintained independently.
- Lead Management: Add, edit, delete, and track leads
- Advanced Filtering: Search by name, email, phone, and filter by status
- Responsive Design: Works on desktop and mobile devices
- Real-time Updates: Instant feedback with toast notifications
- RESTful API: Clean backend architecture with MongoDB
- Form Validation: Client-side validation with user-friendly error messages
- React 18 with TypeScript
- Tailwind CSS for styling
- shadcn/ui components
- React Router for navigation
- React Query for data fetching
- Node.js with Express
- MongoDB with Mongoose
- RESTful API design
- Input validation and error handling
- Rate limiting and security headers
See backend/README.md for complete backend documentation.
- Node.js 18+ and npm
- MongoDB (local or cloud instance)
- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:5173 in your browser
- Navigate to the backend directory:
cd backend- Install dependencies:
npm install- Create a
.envfile:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/leadcrm
NODE_ENV=development- Seed the database with sample data:
npm run seed- Start the backend server:
npm run devThe API will be available at http://localhost:5000
Clone this repository and start developing locally with your preferred IDE.
# Clone the repository
git clone <YOUR_GIT_URL>
# Navigate to the project directory
cd canvashub-core
# Install frontend dependencies
npm install
# Backend is in separate directory
# To set up backend:
# cd backend && npm install && npm run seed && npm run devcanvashub-core/ # Frontend project
├── src/ # React source code
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── services/ # API services
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions
├── public/ # Static assets
└── backend/ # Backend project (separate)
├── models/ # MongoDB models
├── routes/ # API routes
├── seed.js # Database seeding script
└── server.js # Express server
Note: The backend is now completely separate from the frontend and can be developed, deployed, and maintained independently.
The application comes with 12 sample leads that include:
- Various statuses (New, Follow-Up, Qualified, Converted)
- Different qualifications (High School, Bachelors, Masters, PhD, Other)
- Multiple interest fields (Web Development, Mobile Development, Data Science, Digital Marketing, UI/UX Design)
- Various sources (Website, Social Media, Email Campaign, Cold Call)
- Different job interests (Full-time, Part-time, Freelance, Internship)
To populate the database with sample data:
cd backend
npm run seedGET /api/leads- Get all leads with search and filteringPOST /api/leads- Create a new leadPUT /api/leads/:id- Update a leadDELETE /api/leads/:id- Delete a lead
Build the frontend for production:
npm run buildThe built files will be in the dist directory and can be deployed to any static hosting service.
The backend can be deployed to any Node.js hosting platform:
- Set environment variables for production
- Run
npm startto start the production server - Ensure MongoDB connection is configured for production
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request