CRM & Wizard Panel
An all-in-one agency delivery cockpit connecting leads, projects, Kanban tasks, creative reviews, and a secure client portal into one platform.
The Backstory
Why this system was engineered, what existed previously, and the core operational bottlenecks it solves.
CRM Wizard is the internal project-management and CRM system built for the organization to run client work end-to-end — connecting lead intake, projects, Kanban tasks, creative reviews, website tracking, a client portal, and financial audit history in a single cockpit.
Before CRM Wizard, a project's lifecycle was scattered across a CRM for leads, a task tool for delivery, a chat app for client updates, and spreadsheets for time and invoicing. CRM Wizard folds all of that into one system with **role-specific views for coordinators, sales, designers, developers, account managers, and clients**, so everyone sees exactly the slice of the pipeline relevant to them.
The Challenge
- 01.Agencies were juggling 5+ separate tools for CRM, tasks, creative approvals, and client updates.
- 02.Delivery context was lost during handoffs from sales to developers — deal details, scope notes, and client preferences didn't travel with the project.
- 03.No dedicated client portal, creating constant friction over status checks and "is this done yet" messages.
- 04.Manual time tracking and milestone auditing made billing and reporting slow and error-prone.
The Solution
- 01.Engineered an all-in-one agency cockpit linking leads, tasks, and client feedback under a single client identity.
- 02.Built intuitive Kanban pipelines with embedded task timers and blockers so delivery status is always visible, not reported.
- 03.Created client-facing portals for reviewing creative proofs, tracking project status, and viewing financial history.
- 04.Implemented real-time delivery pulse indicators and audit timelines so managers can see agency-wide health at a glance.
Modular Capabilities
Lead-to-Delivery Lifecycle
A 6-stage pipeline (Lead → Qualified → In Flight → Review → Delivered → Closed) that carries scope and context automatically between stages.
Timer-Aware Kanban Board
Drag-and-drop task board with built-in timers per task and blocker tagging for stuck work.
Creative Design Store
Designers upload proofs, clients approve or request revisions directly against the asset.
Asset Tracking
Every client's live URLs, domain renewal dates, and hosting details tracked against their project record.
Client Portal
Clients get a scoped view — status, approvals, invoices — without seeing internal agency data.
Audit Logging
Every stage change, approval, and payment event is timestamped and reportable.
Technical Deep Dive
Built on Next.js 15 App Router with server actions for mutations — deal-stage updates and Kanban moves write directly to MongoDB and revalidate the relevant cache path, keeping updates sub-50ms without a separate API layer.
Role-based rendering at the route level: coordinators, designers, developers, and clients hit different layout shells from the same data source, so permissions are enforced server-side rather than hidden with client-side conditionals.
MongoDB collections modeled around a single `clientId` — leads, timers, portal records, and audit logs all key off it, which is what makes cross-module reporting (e.g. "time spent per client this month") a straightforward aggregation instead of a multi-system join.
Client portal writes are intentionally narrow — clients can approve/comment/pay, not edit core project data — enforced via a separate, more restrictive server action set rather than reusing the internal ones with extra checks bolted on.
Project Gallery
Agency Kanban Velocity
Live Kanban board — active deals value and task timer velocity indicator
Operations Monitor Dashboard
Mongoose collections/node cache view — lead deals, timer timecards, client portal records
Source Rules Configuration Core
Server action code — advancing a deal stage with cache revalidation
Business & Velocity Value
Direct outcomes, architecture speedups, and developer feedback delivered in production.
Post-Mortem Takeaways
Unified Data Models
Linking leads, projects, and task timers to a single client identity streamlines permission boundaries and reporting.
Role-Specific Views
Separate views for coordinators, developers, designers, and clients keep interfaces clean and focused.
Server Action Performance
Next.js App Router server actions deliver sub-50ms mutations and instant state sync across tabs.
Internal organization tool built for active client delivery. Links above are placeholders — swap in the real URL once cleared to share.
Have a similar project in mind?
Let's build a scalable, high-performance solution from architecture to deployment.