# CDA Website — Headless CMS Platform

## Overview

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, deployed on **Vercel** (frontend) and **WP Engine** (backend), and serves as the primary digital presence for CDA — showcasing their services, client success stories, team, careers, and more.

---

## Tech Stack

| Layer | Technology |
|---|---|
| Frontend Framework | Next.js 15 (App Router) |
| UI Library | React 19 |
| Styling | Tailwind CSS 4 |
| Language | TypeScript 5 |
| Data Fetching | Apollo Client 4 + GraphQL |
| CMS | WordPress (Headless) |
| CMS API | WPGraphQL + ACF Pro |
| Frontend Hosting | Vercel |
| Backend Hosting | WP 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** registered via WordPress must-use plugins: Services, Case Studies, Team Members, Job Listings, Blog Posts, Technologies, and Policies
- **Advanced Custom Fields (ACF Pro)** power rich, structured content for every post type — hero sections, statistics, feature grids, process steps, and more
- **Global Content Blocks** system: reusable, toggle-controlled content sections (Approach Block, Values Block, Technologies Slider, News Carousel, Why CDA Block, Newsletter Signup) managed from a single WordPress Options page and rendered across any page

### Frontend Pages
- **Homepage** — dynamically assembled from WordPress global blocks with per-block toggle control
- **Services** — overview with filtering by service type + individual service pages with rich structured content
- **Case Studies** — filterable portfolio with client details, challenge/solution/results layout
- **Jobs** — live job listings with location and experience filtering + individual job detail pages
- **News / Blog** — article pages with dynamic slug routing
- **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 is pre-rendered
- **ISR** (1-hour production revalidation) keeps content fresh without cold builds
- **Next.js Image Optimization** — automatic WebP/AVIF conversion, responsive sizing, lazy loading, priority hints for above-fold images
- **Dynamic SEO metadata** — titles, descriptions, Open Graph, and Twitter Cards sourced from WordPress per page
- Auto-generated **sitemap.xml** and **robots.txt**

### Developer Experience
- Centralized GraphQL query library (`src/lib/graphql-queries.js`) — all queries in one place, no scattered fetch calls
- Environment auto-detection in `next.config.js` — single codebase runs locally (XAMPP) and in production (Vercel + WP Engine) without manual config switching
- Custom WordPress theme (`cdatheme`) exposes page templates mapped to each content type, with ACF-to-GraphQL field registration
- ESLint + TypeScript across the frontend for type-safe, consistent code

---

## What This Project Demonstrates

- **Headless CMS architecture** — separating content management from frontend delivery at a 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