ReactCRM is a modern, open-source Customer Relationship Management application built with Laravel 13 on the backend and React 18 on the frontend. It delivers a polished Kanban pipeline for deal tracking, a real-time dashboard with revenue charts, contact management, task boards, invoice generation, and team settings — all wrapped in a clean, responsive UI powered by Tailwind CSS.
Whether you are a small business looking for a self-hosted CRM or a developer seeking a well-architected reference project, ReactCRM is designed to be production-ready and fully open source.
Tech Stack
Backend: Laravel 13 / PHP 8.3, MySQL, Laravel Sanctum, RESTful JSON API
Frontend: React 18 with Vite 8, React Router DOM v7, Axios, Tailwind CSS 3, Recharts, dnd-kit, react-hot-toast
Key Features
Auth & User Management: Login, register, profile update, password change, and account deletion with Sanctum API token authentication.
Dashboard: Revenue chart with historical data visualization, active leads and deal velocity statistics, live activity feed with auto-refresh for real-time updates.
Pipeline (Kanban Board): Drag-and-drop deals between configurable pipeline stages using dnd-kit. Each stage shows deal count and total value. Create, edit, and move deals with instant API sync. Mark deals as won or lost with status tracking.
Contacts: Full CRUD with search, filter by status, sortable table, row selection, and server-side pagination.
Tasks: Create, assign, prioritize, and mark tasks complete. Filter by user and status. Kanban-style task board view.
Invoices: Auto-generated invoice numbers, mark invoices as paid, track outstanding amounts. Invoice management tied to deals and contacts.
Settings: Company information management, configurable pipeline stages, user management with role changes.
What Makes This Project Stand Out
Consistent API design — A BaseController provides successResponse and errorResponse methods that every API controller extends. All endpoints return a predictable JSON structure with data, message, and meta keys for pagination.
Global error handling catches all exceptions with proper HTTP status codes and consistent error formatting.
Security-first approach — Sort field whitelisting prevents SQL injection. All mutations use database transactions. API authentication via Sanctum tokens.
Clean frontend architecture with separate api modules for Axios clients, context for state management, hooks for reusable logic, utils for constants and formatters, and a centralized routes file.
Reusable UI components like Modal, Button, Pagination, and ConfirmDialog built once and used across all pages.
Fully open source with complete source code available on GitHub for learning, customization, and self-hosting.
Live Demo
You can try the live demo at https://crm.milinddaraniya.com/. Register a new account and explore the full feature set — dashboard, pipeline, contacts, tasks, invoices, and settings.
The complete source code is available on GitHub at https://github.com/mkdaraniya/laravel-react-crm with installation instructions in the README.
Architecture Highlights
The backend follows a clean Laravel API structure with controllers under app/Http/Controllers/Api/, form request validation, and API resource transformers. The frontend uses React with Vite for fast builds, React Router for client-side routing, and Tailwind CSS for utility-first styling.
Key architectural decisions include service layer separation with consistent JSON responses, database transactions on all write operations for data integrity, sort field whitelisting to prevent injection attacks, and frontend state managed through React Context with a clean API layer abstraction.
Conclusion
ReactCRM demonstrates modern full-stack development practices — from React frontend best practices and REST API design to real-time features and secure database operations. It is a complete, production-ready CRM that you can deploy, customize, or use as a learning resource.
Check out my portfolio at https://milinddaraniya.com/portfolio for more projects, or get in touch at https://milinddaraniya.com/contact if you would like to discuss building something similar for your business.