Headless Admin CMS
An authenticated dashboard from which the firm updates services, publishes articles, edits homepage content, and adjusts global settings · with no developer in the loop for routine change.
Loading
CMS & Compliance
Chartered Accountancy
A premium, performant, and strictly compliant web platform for a professional accountancy firm, featuring a dynamic headless CMS, a secure admin portal, and programmatic adherence to regulatory advertising guidelines.
01 · Stack
| Layer | Technologies | Key libraries |
|---|---|---|
| Frontend Framework |
|
|
| UI & Styling |
|
|
| Backend / Runtime |
|
|
| Database & Cache |
|
|
| Authentication |
| · |
| Hosting & Infrastructure |
|
|
| Content & Data Processing |
|
|
Premium frosted glassmorphism tuned for professional services, light mode by default · the register the audience expects from a practice, not the dark editorial treatment a studio would choose for itself. Utility composition through clsx and tailwind-merge, with variants via class-variance-authority.
Public pages (landing, about, services, articles) are cleanly separated from the secure internal admin routes, so the marketing surface and the editorial tool share primitives without sharing a bundle. Framer Motion supplies restrained entrance animation only.
React hooks with Server Components handling fetching and caching. CMS forms are built on react-hook-form with zod resolvers, so validation rules are declared once and enforced on both sides.
Mobile-first and fully responsive, installable as a PWA, with automated SEO metadata and JSON-LD structured data emitted per page.
The interface itself is engineered to comply with professional advertising guidelines. It enforces a pull model only · the firm may inform, never solicit · alongside restricted logo usage, dynamic last-updated timestamps, and stringent external link management in the footer and layout shells.
A headless CMS architecture on Next.js Server Components and API routes, with Firebase providing the serverless data and storage layer.
Firestore content domains modelled around what an editor actually edits, rather than around page routes · which is what allows a page's sections to be reordered without a schema change.
Firebase Auth restricted by a Firestore-backed admin whitelist, so only pre-authorised email addresses can reach /admin at all. firestore.rules and storage.rules enforce public read-only access with authenticated-only write and delete, independently of the application layer.
Serverless API routes handle secure data synchronisation, media uploads into Firebase Storage, and the complex CMS mutations that require server-side validation before they touch published content.
04 · Features
An authenticated dashboard from which the firm updates services, publishes articles, edits homepage content, and adjusts global settings · with no developer in the loop for routine change.
Drag-and-drop ordering for services via @dnd-kit/core, Markdown-driven rich text through react-markdown, and real-time data visualisation with export to PDF and spreadsheet via recharts, jspdf, and xlsx.
Programmatic safeguards in lib/compliance actively scan content against regulatory standards before publication · stripping superlatives and blocking prohibited patterns such as unauthorised testimonials.
05 · Standout engineering
Every project has two problems that determined whether it worked. These were theirs.
The architecture adheres to professional advertising guidelines intrinsically rather than by policy. It actively prevents prohibited content patterns from being published at all, while still delivering a high-end modern experience · compliance implemented as a property of the system instead of a rule someone has to remember.
A bespoke CMS on Firestore and Next.js, eliminating recurring third-party CMS subscription cost while providing an admin interface tailored to this firm's actual editorial workflow, with granular access control that an off-the-shelf product would not have permitted.
06 · Engineering practice
├── src/ │ ├── app/ │ │ ├── (auth)/ # Sign-in │ │ ├── admin/ # Whitelist-gated CMS │ │ ├── api/ # Secure sync + media upload │ │ └── ... # Public routes │ ├── components/ │ │ ├── admin/ │ │ ├── seo/ # Metadata + JSON-LD emitters │ │ └── ui/ # CVA primitives │ ├── hooks/ │ └── lib/ │ ├── auth/ │ ├── compliance/ # The publication gate │ └── firebase/ ├── firestore.rules ├── storage.rules └── next.config.ts
Strict TypeScript 5, ESLint 9, and custom seeding scripts (scripts/seed-firestore.js) that reproduce a full content environment from scratch.
Vercel with Turbopack, deploying to the edge automatically on every push.
07 · Impact
Optimised for fast largest-contentful-paint and minimal layout shift through Server Components, Turbopack, and controlled font and image loading.
Static rendering combined with Firestore edge caching handles traffic spikes at near-zero latency and minimal operating cost · which matters for a practice whose traffic is seasonal around filing deadlines.
Contact
The best fit is a business that needs a system to hold up under real use · not a template with your logo on it.
