DigiBuilder:
The SaaS Engine
"Engineering a platform that doesn't just build websites, but orchestrates dynamic digital ecosystems using JSON schemas."
The Technical Challenge
The core objective was to move away from hard-coded pages. I developed a headless architecture where the entire UI is a reflection of a Supabase JSON tree. This allows for zero-redeploy updates and complete user autonomy over their store's layout.
Middleware Edge Routing
Intercepting requests at the edge to serve dynamic user slugs instantly.
Component Registry
A modular system where React components are mapped to database IDs.
Role-Based Access
Granular permissions for page-level visibility and editor controls.
Dynamic Page Architect
Managing routes in a SaaS environment is complex. I built an intuitive interface where users manage page hierarchy, dynamic slugs, and meta-tags. The system automatically syncs these changes with the Next.js middleware for instant live routing.
Modular Registry Engine
Using a custom Registry Pattern, users can inject pre-built components (Hero, FAQ, Products) into any page with a single click. Every component is fully editable via a JSON property editor, providing a true No-Code experience.
Design System & Global Branding
A robust styling engine that injects CSS variables globally. Users can manipulate the entire brand identity—from HEX palettes to typography—and see changes reflected across desktop and mobile mockups in real-time.
Built for Scale
// Example of the JSON-UI Logic
{
"page_id": "home_01",
"layout": [
{ "id": "hero_v2", "props": { "title": "Summer Sale", "bg": "#000" } },
{ "id": "product_grid", "props": { "limit": 8, "category": "new" } }
]
}