Project Overview
It’s a little confusing this project was named after the website but it was easier than coming up with another name. I found being able to work on a website or application locally to be an important part of the process. For minor changes making the updates directly on staging or production is fine, but when it comes to full scale development, working on the project locally does the greatest benefits.
Some developers prefer a docker based solution such as DDEV, while I admit I haven’t used this myself, I always found solution stacks like XAMPP easier to work with. Since most of websites is WordPress based, matching environments wasn’t really an issue.
The Challenge
The client’s existing workflow was fragmented across multiple platforms — billing lived in one tool, client communication in another, and reporting was done manually in spreadsheets. This led to data inconsistencies, missed follow-ups, and hours of manual reconciliation each week.
Key requirements included:
- Automated client onboarding with customizable intake forms
- Subscription management with tiered pricing and usage-based billing
- Real-time analytics dashboard with exportable reports
- Role-based access control for team members and clients
- Integration with existing payment processors and CRM tools
The Solution
I designed and built a monolithic Next.js application backed by a PostgreSQL database, with Stripe handling payment processing. The architecture prioritises simplicity and maintainability — server components handle data fetching, while client components manage interactive UI elements like the drag-and-drop form builder.
Tech Stack
Frontend
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Recharts for data visualisation
- React Hook Form + Zod validation
Backend
- Next.js API Routes + Server Actions
- PostgreSQL with Prisma ORM
- Redis for session caching
- Stripe Billing API
- Resend for transactional email
Infrastructure
- Vercel (hosting + CI/CD)
- Supabase (managed Postgres)
- GitHub Actions
- Sentry for error tracking
- Playwright for E2E testing
Results
60%
Reduction in onboarding time
3x
Faster monthly reporting
$24k
Annual savings from automation
Key Takeaways
This project reinforced the value of keeping architecture simple. By choosing a monolithic Next.js app over a microservices approach, the team gained velocity without sacrificing scalability. The Stripe integration alone replaced two separate billing tools, and the custom form builder eliminated the need for a third-party form service.
The client has since expanded the platform to serve over 200 active accounts, with zero architectural changes needed — a testament to building the right foundations from day one.