The Problem
As a freelancer, I often relied on fragmented stack for daily operations: a CMS for the portfolio, a separate CMS for tracking leads, another for project management, and a different gateway for invoicing.
The disconnected workflow created a lot of friction, slowed down client onboarding and disjointed client experience. Managing leads, tracking tasks and handling billing across multiple platforms takes away valuable time from actual development work.
Fragmented Workflow
Disjointed Experience
My Role & Responsibilities
As a Fullstack Engineer and Designer, I architected and developed the entire ecosystem from teh ground up. This included designing the UI/UX, building the marketing storefront, developing the secure admin dashboard and client portals, and implementing the backend infrastructure and API.
Architecting a unified platform with shared backend services
Building a responsive, high-converting marketing frontend using Next.js
Developing secure role-based portals for CRM, project managment and invoicing
Integrating Paystack for seamless invoice payments directly within the client portal
Solution Architecture
To solve the fragmentation problem, I built a centralized hub with three distinct interfaces, all powered by a single, robust Express/MongoDB backend:
A high-performance Next.js application that showcases work, case studies, and services to attract leads. Inquiries from the contact form are directly funneled into the CRM, eliminating manual data entry.
A protected internal workspace to manage the entire business lifecycle. It features a CMS for blogs and case studies, a CRM for managing clients and leads, and a project management suite with drag-and-drop task tracking and automated invoicing.
A dedicated, secure space for clients. Here, they can view project progress, access final deliverables, and securely pay invoices via Paystack, establishing a premium and transparent agency-client relationship.
Technical Decisions
Next.js, Zustand & React Query for the Frontend, Express Backend & MongoDB
I utilized Next.js to leverage Server-Side Rendering (SSR) for the marketing pages, ensuring optimal SEO and fast initial load times. Zustand provided a lightweight solution for global state management (handling auth state and UI themes), while Tailwind CSS alongside Shadcn UI enabled rapid, consistent, and accessible component styling across all three interfaces. For the highly interactive Admin and Client portals, I relied on React Query for efficient data fetching, caching, and optimistic UI updates.
Building the entire stack in JavaScript allowed for rapid iteration and seamless data flow. The modular Express architecture utilizes JWT for robust Role-Based Access Control (RBAC), ensuring strict data isolation between the public, admin, and client environments.
The Outcome
100%
Consolidated Operations
Replaced 4+ separate tools with one unified hub
Premium
Client Onboarding
From lead capture to a secure portal for delivrables and billing
99%
Performance Score
Optimized marketing pages with Next.js