Skip to content
All projects
Web & Full StackPrivate

Mavi Bahçem: Decoupled Next.js & PHP CMS Architecture

A highly optimized, statically generated web platform utilizing a strictly decoupled architecture. It pairs a bespoke Next.js frontend with a secure, lightweight PHP/MySQL backend to minimize infrastructure costs while maximizing edge performance.

Tech stack

Frameworks & libraries

Performance & metrics

  • Zero runtime database latency for content delivery due to absolute static artifact generation
  • Bypasses recurring headless CMS costs by exploiting inexpensive shared hosting for static serving and localized API routing
  • Near-instantaneous TTFB (Time to First Byte) combined with heavy CSS optimization

Why I built it

Monolithic CMS solutions introduce unnecessary execution overhead, while premium headless CMS SaaS platforms incur recurring API costs. I engineered this hybrid architecture to achieve the sub-second performance of a modern Static Site Generator (SSG) without sacrificing the cost-efficiency of traditional shared hosting (Hostinger). It serves as a personal archive ('Mavi Bahçem') featuring a highly artistic, programmatic UI inspired by 'The Wind Rises'.

Architecture & decisions

The system is built on a decoupled paradigm. The backend is a custom PHP API secured via JWT, interacting with a normalized MySQL/InnoDB database that manages relational data across Posts, Comments, Subscribers, and a Guestbook. The frontend is a Next.js 15 application utilizing Static Site Generation. To bridge the dynamic content gap, I constructed a custom CI/CD pipeline: content mutations in the PHP admin panel trigger a webhook to GitHub Actions, which recompiles the static Next.js tree and pushes the optimized build artifacts back to the Hostinger server via SSH.

Key features

  1. 01Strictly decoupled Next.js 15 SSG frontend and lightweight PHP REST API
  2. 02Automated CI/CD deployment pipeline utilizing GitHub Actions and secure SSH tunneling
  3. 03JWT-secured administrative dashboard for content and relational database management
  4. 04Dynamic client-side hydration for user interactions (Comments, Guestbook, Newsletter)
  5. 05Bespoke Tailwind CSS v4 implementation featuring programmatic, hardware-accelerated UI animations

Technical review

This project solves the hosting cost-to-performance ratio problem at the architectural level. By treating standard shared hosting purely as a static file server and an isolated database endpoint, and offloading all compilation overhead to GitHub Actions, the system achieves enterprise-grade delivery speeds on budget infrastructure. The frontend strictly adheres to a cohesive 'Starry Night' aesthetic, utilizing advanced CSS gradients, dynamic React state for category hydration, and modern typography to maintain a fluid user experience.