Re-Engineering a Legacy PHP Monolith into a Modern CMS-Powered Platform
Solo Full-Stack Developer
Vivekanand Seva Mandal is a large non-profit serving communities across Mumbai. Their web presence was stuck in a PHP monolith — slow, unmaintainable, and impossible for non-technical editors to update. I rebuilt it from scratch with a modern headless CMS architecture that puts content control back in the hands of the organization's team.
A Legacy System Holding Back a Growing Organization
The existing PHP monolith was a classic legacy nightmare: hard to update, slow to load on mobile, and completely dependent on a developer for any content change. The organization's editorial team couldn't publish events, update donation pages, or manage multilingual content without filing engineering requests.
Every content update required developer intervention — no self-service capability
Mobile performance was poor, hurting organic search visibility and reach
No multilingual support despite serving diverse language communities
Donation invoice generation had race conditions under concurrent submissions
Editorial quality was inconsistent — no automated checks on published content
Decoupled Architecture with Editorial Empowerment
The core insight was that this organization needed a system where non-technical editors could publish confidently, while the engineering layer handled performance, SEO, and data integrity automatically. Payload CMS gave me code-first schemas with a polished admin UI, and Next.js 14 RSC delivered the performance.
Payload CMS with Code-First Schemas
Defined all content structures as TypeScript code — collections for events, blogs, receipts, donations. Payload generates the admin panel automatically from these definitions, giving editors a polished interface without custom UI work.
ISR with Webhook-Driven Invalidation
Connected Payload's afterChange hooks to Next.js on-demand revalidation. When an editor publishes content, the frontend cache clears within 500ms — no manual redeployment, no stale content.
Lexical AST Quality Gates
Built automated editorial checks that analyze the Lexical rich-text JSON AST before publishing — checking reading level, minimum content length, heading structure, and alt text presence.
Concurrency-Safe Invoicing
Implemented sequential invoice number generation using MongoDB atomic operations to prevent duplicate IDs under concurrent donation submissions, with Resend API for instant receipt emails.
System Architecture
Interactive architecture map — click any node to trace its connections.
Data Flows (click a node to filter)
From Monolith to Modern Stack
The migration happened incrementally — no big bang cutover. Each section of the site was rebuilt and validated before replacing its PHP counterpart.
Phase 1: Infrastructure & CMS
Set up Next.js 14 with Payload CMS in a Docker environment. Defined content schemas, configured the admin panel, and established the ISR revalidation pipeline.
Phase 2: Content Migration
Migrated all existing content from the PHP database into Payload collections. Built multilingual routing support and content localization fields.
Phase 3: Performance & SEO
Optimized Core Web Vitals with React Server Components, image optimization, and static generation. Achieved 40% Lighthouse improvement over the PHP site.
Phase 4: Donation & Invoicing
Built the donation flow with concurrency-safe invoice generation, Resend API receipts, and the admin dashboard with multi-breakpoint Live Preview (375/768/1440px).
A Self-Service Content Platform
The final platform gives the organization's team full control over their content while automatically handling the technical complexity of performance, SEO, and data integrity.
Self-service CMS where editors publish events, blogs, and donation campaigns without developer help
Automated ISR invalidation — content goes live within 500ms of editor save
Multi-breakpoint Live Preview (375px / 768px / 1440px) for confident publishing
Concurrency-safe donation invoicing with atomic MongoDB operations and instant email receipts
Lexical AST analysis for automated editorial quality gates before publish
Measurable Transformation
The migration delivered quantifiable improvements across performance, editorial velocity, and operational reliability.
What I Took Away
“Code-first CMS eliminates the content modeling gap”
With Payload CMS, the content schema IS the code. No separate admin configuration to maintain, no drift between what the code expects and what the CMS delivers. TypeScript end-to-end.
“ISR revalidation needs to be push-based, not time-based”
Time-based ISR (revalidate: 60) means stale content for up to 60 seconds. Push-based invalidation via afterChange hooks means content is always fresh — and you never waste compute on unnecessary rebuilds.
“Editorial quality gates build trust”
Automated checks on content structure (headings, alt text, reading level) meant editors could publish confidently without fear of breaking the site or publishing subpar content.
Tech Stack
Frontend
CMS
Database
Infrastructure
Email & Payments
Crafting a Performance-First Fashion Brand Experience
Dhaga.org • 2024