Softsite | Digital Agency Cluj-Napoca
Softsite | Digital Agency Cluj-Napoca
Contact

CDA — Headless CMS Platform

A full-stack business website on a headless WordPress + Next.js architecture — the client's team publishes in WordPress, visitors get a pre-rendered React frontend, and a typed GraphQL API is the only thing between them

CDA — Headless CMS Platform
Back to PortfolioWebsite Design & Development
Next.jsReactTypeScriptTailwind CSSWordPressGraphQL

The Challenge

CDA needed a site their own team could run day to day — services, case studies, job listings and news changing constantly, without a developer in the loop — but not at the cost of speed or search visibility. A conventional WordPress theme would have given them the editing experience and none of the performance; a hand-coded React site would have given them the performance and no way to publish.

Our Solution

We split the site in two. WordPress stays the editing environment: seven custom post types with ACF Pro field groups, registered through must-use plugins, plus a Global Content Blocks options page that toggles reusable sections on and off across any page. Next.js 15 reads it over WPGraphQL through a single centralised query library, pre-renders every service, case study and job page at build time, and keeps them current with hourly ISR. The frontend ships to Vercel, WordPress runs on WP Engine, and neither layer knows anything about the other beyond the schema.

CDA Website — Headless CMS Platform

A full-stack, production-grade business website built on a headless WordPress + Next.js architecture. The platform decouples content management from the frontend entirely — editors work in a familiar WordPress admin, while visitors get a blazing-fast, modern React experience.

All data flows between the two layers over a typed GraphQL API. The site is live on Vercel (frontend) and WP Engine (backend), serving as the primary digital presence for CDA.

Download Project Doc

Tech Stack

LayerTechnology
Frontend FrameworkNext.js 15 (App Router)
UI LibraryReact 19
StylingTailwind CSS 4
LanguageTypeScript 5
Data FetchingApollo Client 4 + GraphQL
CMSWordPress (Headless)
CMS APIWPGraphQL + ACF Pro
Frontend HostingVercel
Backend HostingWP Engine

Architecture

┌──────────────────────┐      GraphQL API      ┌──────────────────────┐
│                      │ ◄───────────────────► │                      │
│   Next.js 15         │                       │   WordPress CMS      │
│   (Frontend)         │                       │   (Headless Backend) │
│                      │                       │                      │
└──────────┬───────────┘                       └──────────┬───────────┘
           │                                              │
       Vercel CDN                                    WP Engine
  (Global Edge Network)                       (Managed WordPress)

The frontend has zero awareness of WordPress internals. Every page is either statically generated at build time or uses Incremental Static Regeneration (ISR) with hourly revalidation — meaning content updates in WordPress propagate to the live site automatically, without a full redeploy.

Key Features

Content Architecture

  • 7 custom post types via WordPress must-use plugins: Services, Case Studies, Team Members, Job Listings, Blog Posts, Technologies, Policies
  • Advanced Custom Fields (ACF Pro) for rich, structured content on every post type
  • Global Content Blocks system: reusable, toggle-controlled sections managed from a single WordPress Options page

Frontend Pages

  • Homepage dynamically assembled from WordPress global blocks with per-block toggle control
  • Services — overview with filtering + individual service pages with rich structured content
  • Case Studies — filterable portfolio with challenge/solution/results layout
  • Jobs — live listings with location and experience filtering
  • News/Blog, About, Contact, Team, Knowledge Hub, ROI Calculator, Policies — fully CMS-driven

Performance & SEO

  • Static generation (generateStaticParams) for all dynamic routes — every service, case study, and job page pre-rendered
  • ISR with 1-hour production revalidation keeps content fresh without cold builds
  • Next.js Image Optimization — automatic WebP/AVIF, responsive sizing, lazy loading
  • Dynamic SEO metadata — titles, OG, Twitter Cards sourced from WordPress per page
  • Auto-generated sitemap.xml and robots.txt

Developer Experience

  • Centralized GraphQL query library — all queries in one place, no scattered fetch calls
  • Environment auto-detection in next.config.js — single codebase runs locally and in production
  • Custom WordPress theme (cdatheme) exposes page templates mapped to each content type
  • ESLint + TypeScript across the frontend for type-safe, consistent code

What This Project Demonstrates

  • Headless CMS architecture — separating content management from frontend delivery at production scale
  • GraphQL API design — structured, typed queries connecting WordPress ACF fields to React components
  • Next.js App Router patterns — layouts, dynamic routes, server components, ISR, and static generation working together
  • Full-stack ownership — custom WordPress plugin/theme development on the backend, modern React SPA patterns on the frontend
  • Real-world deployment — multi-environment configuration, CDN delivery, managed hosting, and automated content propagation

Full project documentation with implementation details

Download .md File

The Results

0
custom post types the client edits without touching code
0%
of dynamic routes pre-rendered at build time
  • Content published in WordPress reaches the live site within the hour — no redeploy, no developer
  • Per-page SEO metadata, Open Graph cards, sitemap.xml and robots.txt all generated from the CMS
  • One codebase runs locally and in production — the environment is detected, never hand-switched

Ready to build something that converts?

No obligations. Let's discuss your project and find the best solution together.

Related Articles

Related Projects

Explore more projects in this category