ZeyoFlow
A Webflow-style SaaS where a business signs up and builds its own site from modular blocks, with a live visual editor and an AI chat assistant. Split into separate Fastify services — API gateway, identity, tenant management, catalog and templates — each in clean architecture with Inversify DI, backed by Drizzle and Postgres, with a Next.js front end carrying the page builder, tenant dashboard and onboarding. Built as an engineering thesis (Synergistic AI).
- My Role
- Full Stack Developer
- Timeline
- Feb 2025 — May 2025
- Status
- Shipped
ZeyoFlow lets a business sign up, claim its own workspace, and assemble a website from modular blocks without writing code. The visual editor renders every change on a live canvas with direct controls for typography, spacing and layout, and an AI chat assistant sits alongside it to generate and refine UI components through conversation instead of manual configuration.
Under the hood, the platform runs as five Fastify microservices — an API gateway, identity, tenant management, product catalog and a template service — each structured as clean architecture with Inversify handling dependency injection and Drizzle mapping to PostgreSQL. A Next.js application carries everything the user touches: the page builder, the tenant dashboard and a guided onboarding flow. The project was built as an engineering thesis (Synergistic AI).
The problem to solve
A site builder concentrates several hard problems in one product. Every tenant shares the same infrastructure yet needs its identity, workspace and content kept strictly apart; the editor has to reflect every typography, spacing or layout change on a live canvas immediately, not after a save-and-reload cycle; and the AI assistant has to produce components that fit the block system rather than arbitrary output. Folding all of that into one monolith would have tangled tenant logic, catalog data and template handling into a single codebase — the concerns had to be separated from the first commit.
How it was built
The backend is split into five Fastify services behind an API gateway: identity handles authentication, tenant management owns the workspaces, and separate services carry the product catalog and the templates. Every service follows the same clean-architecture layout — domain, use cases, adapters — with Inversify wiring the dependencies, which keeps business rules testable and each service's persistence behind its own boundary. Drizzle provides typed access to PostgreSQL throughout.
On the front end, a single Next.js app hosts the page builder — a live canvas with typography, spacing and layout controls — alongside the tenant dashboard and guided onboarding, while the AI chat assistant turns conversational requests into UI components that are generated and then refined iteratively.
What it does
Modular block builder
Pages are assembled from reusable blocks on a live canvas, with direct controls for typography, spacing and layout instead of hand-written CSS.
AI component assistant
A chat assistant generates UI components from conversational requests and refines them through follow-up messages inside the editor.
Multi-tenant workspaces
Each business operates in its own tenant, owned by a dedicated tenant-management service and administered through the dashboard.
Guided onboarding
A step-by-step flow walks a new business from sign-up into a configured workspace, ready to start building.
Dedicated template service
Site templates live in their own microservice, keeping template storage and delivery decoupled from the builder and the rest of the platform.
Product catalog service
A separate catalog service manages each tenant's products behind its own API boundary.
Built with
Frontend
The builder, dashboard and onboarding form one heavily interactive React surface, and Next.js supplies its routing, rendering and app structure for a product whose entire output is web pages.
One typed language spans five services and the front end, with Drizzle's inferred types keeping database rows, API payloads and editor state aligned.
Utility classes correspond directly to the builder's typography, spacing and layout controls, so component styles stay composable and consistent across generated blocks.
Backend
A lightweight HTTP framework that is cheap to instantiate five times over — once per microservice — and whose plugin model maps cleanly onto clean-architecture adapters.
Data
Tenants, users, catalog entries and templates are relational data with real integrity constraints, and Postgres enforces them while Drizzle keeps the schema in code.
As an in-memory store, Redis is the usual complement to a Postgres-backed Node service stack for caching and short-lived state — data that is cheap to lose but expensive to refetch.
MongoDB's document model handles nested, schema-flexible JSON that fits awkwardly into fixed relational tables, complementing the strictly structured data PostgreSQL covers.