ReactCRM – Full-Stack CRM with Kanban Pipeline & Real-Time Dashboard
Role: Full-Stack Developer
A modern full-stack CRM app built with Laravel 13 + React 18 featuring a Kanban deal pipeline, real-time activity feed, invoices, and team management.
About This Project
ReactCRM is a complete customer relationship management application built with Laravel on the backend and React on the frontend. It offers a polished Kanban pipeline for deal tracking, a real-time dashboard with revenue charts and deal velocity stats, contact management with search and filtering, task management with drag-and-drop, invoice generation, and team settings. The API follows a consistent JSON response format with global error handling, database transactions on all writes, and sort-whitelisting for security. Open source and ready to deploy.
Impact
Provides a production-ready, open-source CRM that demonstrates modern full-stack development practices — React frontend best practices, REST API design, real-time features, and secure database operations.
Key Features
- Kanban pipeline with drag-and-drop deal stage management
- Real-time dashboard with revenue chart, active leads, and deal velocity
- Live activity feed with auto-refresh
- Contact management with search, filter, sort, and row selection
- Deal tracking through pipeline stages with won/lost marking
- Task management with assign, prioritize, complete, and user/status filters
- Invoice generation with auto numbering and paid status tracking
- Company settings, pipeline stage management, and user role management
- RESTful API with consistent success/error JSON responses
- Global error handling with proper HTTP status codes
- Database transactions on all write operations
- Sort field whitelisting for SQL injection prevention
Complex Features
- Kanban pipeline: Deals move through configurable stages using drag-and-drop (dnd-kit). Each stage shows deal count and total value. Stage transitions trigger status updates in the backend via API calls.
- Real-time activity feed: Dashboard auto-refreshes to show latest activities — new deals, stage changes, completed tasks — without manual page reload.
- API consistency layer: A BaseController provides successResponse() and errorResponse() methods that all API controllers extend. Every endpoint returns a predictable JSON structure with data, message, and meta (pagination) keys.
- Security-first design: Sort parameters are validated against a whitelist to prevent SQL injection. All mutations use database transactions. API authentication uses Laravel Sanctum tokens.
- Frontend architecture: Clean separation of concerns with dedicated api/ modules (Axios clients), context/ for state (AuthContext), hooks/ for reusable logic (useSort), utils/ for constants and formatters, and a centralized routes.jsx file.