Skip to content
Ibnu Kasyful Haq
All projects

Web app

In development

Islamic Center Wadi Mubarak

Next.js front-end on Cloudflare Workers reading from headless WordPress. 22 routes, built to a written PRD.

Source ↗
Islamic Center Wadi Mubarak home page
Year
2026
Type
Web app
Context
Client project, freelance
Client
Islamic Center Wadi Mubarak
Industry
Non-profit / Islamic Education
Role
Solo build: architecture, front-end development, deployment

Problem

A foundation running programs, donations, and public reporting needed a site its non-technical staff could maintain. A plugin-stacked WordPress theme could not deliver the speed and transparency pages the organization wanted, and content migration would block delivery for months.

Solution

A decoupled build: Next.js App Router deployed to Cloudflare Workers via OpenNext, reading content from WordPress through WPGraphQL. Editors keep the CMS they already know; visitors get a static-fast site. The front-end was built against typed sample data so all 22 routes could ship before the CMS side existed. CMS integration is now one isolated swap.

What I built

  • All 22 routes from the PRD implemented: programs, donations, transparency, impact, agenda, gallery, search, compliance pages
  • Next.js App Router with strict TypeScript (tsc --noEmit) and Zod-validated content schemas
  • Deployed to Cloudflare Workers with OpenNext and Wrangler
  • Designed for a single-point CMS swap: sample data today, WPGraphQL tomorrow, no rewrite
  • Built to a written PRD, with the PRD as the tie-breaker on any ambiguity

Engineering challenges

01

Shipping a front-end while the CMS was still a blocker

The WordPress setup (taxonomies, custom post types, ACF, WPGraphQL) was a hard dependency for every later phase. Rather than idle, I built the entire front-end against typed sample data and isolated all CMS reads behind one boundary, so the integration became a contained change instead of a rewrite. The delay stopped being a schedule risk.

02

Type safety across a CMS boundary you do not control

CMS content is untrusted input: an editor can leave a field empty or paste the wrong shape. Zod schemas validate content at the boundary, so a bad field surfaces as a handled case rather than a runtime crash in production.

03

Transparency pages for a donation-driven organization

Donation and financial-transparency pages carry a different bar than marketing pages. The information architecture has to make reporting legible and verifiable, because trust is the actual product.

Stack

  • Next.js (App Router)
  • TypeScript
  • Zod
  • Tailwind CSS
  • Headless WordPress (WPGraphQL)
  • Cloudflare Workers
  • OpenNext
  • Wrangler

Screens

Islamic Center Wadi Mubarak
Islamic Center Wadi Mubarak home page, full page
Scroll inside the frame to see the full page