Skip to content
Ibnu Kasyful Haq
All projects

Web app

In development

SMK Citra Bangsa Mandiri

Headless WordPress school site on Next.js 15, with an editorial redesign and a front-end that survives a CMS outage.

Source ↗
SMK Citra Bangsa Mandiri home page
Year
2026
Type
Web app
Context
Client project, freelance
Client
SMK Citra Bangsa Mandiri Purwokerto
Industry
Education
Role
Solo build: architecture, redesign, front-end development, deployment

Problem

A vocational school needed a site that looked credible to prospective parents and stayed editable by staff with no technical background, while remaining reliable on school infrastructure where the CMS is not guaranteed to be up.

Solution

Next.js 15 (App Router) with SSR/ISR reading the WordPress REST API for posts, programs, events, and facilities, plus a server-side proxy for form submissions. Every CMS read falls back to verified local data, so the site renders correctly even when WordPress is unreachable.

What I built

  • Oxford-inspired editorial redesign, deliberately not a school-template look
  • Headless WordPress via REST API with custom post types (posts, programs, events, facilities)
  • Graceful degradation: all CMS reads fall back to local data if WordPress is down or unconfigured
  • Server-side contact form proxy to Contact Form 7 or WPForms, with no credentials in the browser
  • GSAP-driven motion
  • Deployed to Cloudflare Workers via OpenNext

Engineering challenges

01

A front-end that must not go down with the CMS

Every CMS read goes through one module that tries WordPress first and falls back to verified local content. A CMS outage degrades freshness, not availability. The site never shows an error page because a plugin update went wrong.

02

Placeholder content that does not lie

Fallback data holds only verified facts (real address, real accreditation, the six real program keahlian) and no invented statistics. Placeholder content has a habit of surviving to production; making it factual means the worst case is stale, not false.

03

Keeping form submissions server-side

The contact route proxies to WordPress from the server rather than posting from the browser, so CMS endpoints and credentials are never exposed to the client.

Stack

  • Next.js 15 (App Router)
  • React
  • JavaScript
  • Tailwind CSS
  • GSAP
  • Headless WordPress (REST API)
  • Cloudflare Workers
  • OpenNext

Screens

SMK Citra Bangsa Mandiri
SMK Citra Bangsa Mandiri home page, full page
Scroll inside the frame to see the full page