Home

I build reliable platforms that ship fast and scale.

I’m Mohamed Bebba, a full-stack engineer based in Germany, focused on building modern visual editors, scalable microservices, and reliable infrastructure. I care deeply about clean data models, strong developer experience, and production-grade deployments.

Next.js • TypeScript • Prisma • Docker/K8s • Three.js • Security-minded

Selected Projects

Website Builder Platform

A modern visual website editor built from scratch: Strong, database-driven data models, breakpoints, live preview, publishing pipeline, and deployment automation.

Next.js • TypeScript • Prisma • DnD • SSR/SSG

Zero-Trust Private Infra

VPN-only microservices, hardened firewall rules, audit-friendly logs, and a one-way publishing flow to a public web server.

WireGuard • iptables/UFW • Loki/Grafana • CI/CD

3D Product Configurator

Interactive 3D configurator with drag-and-drop, textures/materials, performance optimizations, and clean component architecture.

React Three Fiber • Three.js • TypeScript • UX

Built with my own Website Builder

Create, manage, and publish websites in seconds.

DATABASE-DRIVEN • VISUAL EDITOR • PUBLISHING PIPELINE

From Postgres to pixel-perfect pages — in one flow.

My editor is built on a schema-driven page architecture: layouts and components are persisted in Postgres, composed into a normalized page graph, and rendered deterministically for preview and production. This enables instant editing, accurate previews, and stable SSR/SSG output.

Schema-driven pages • Breakpoints • Inline editing • One-click publish • SSR / SSG

Demo: editing → preview → publish

Here’s a quick walkthrough of the builder in action: inline text editing, responsive breakpoints, a clean inspector, and a publishing pipeline that turns database content into production pages.

• Drag & drop components and layouts • Inline rich-text editing with safe output • Breakpoints: Desktop / Tablet / Mobile • Auto-save (debounced saves, offline-safe queue, conflict detection)
• Change history (undo/redo, activity log, restore previous versions)
• CMS collections, Dynamic pages and Localization
…and much more —from design systems and automation to enterprise security, extensibility, and scale.

Postgres • Prisma • Next.js • TypeScript • Publishing Pipeline

Dynamic Collections, Powered by Structured Data

Bind Fields Directly to Your Design

CMS & Dynamic Data Binding

Connect any CMS field directly to any component. Bind text, images, links, colors, or entire layouts to live data — and your pages update automatically when the content changes.

• Connected Content Link any CMS field to any element — text, images, buttons, and styles. • Build Once, Publish Everywhere One layout creates unlimited pages from your content. • Visual Data Binding Make anything dynamic by connecting it to a field — no code.
• Data-Powered UI Titles, media, links, prices, and layouts come from live content.
• Dynamic Pages Auto-generate routes like /blog/{slug} or /products/{id}.
• Auto-Filled Lists Grids, galleries, and sliders fill themselves from your CMS.
• Multi-Language One design, all languages.
• Instant Updates Edit once, update everywhere.
• Smart Rules Show or hide elements based on content.
• API-First CMS Use your content across websites, apps, and automations.

Postgres • Prisma • Next.js • TypeScript • Publishing Pipeline

Connect domains, manage DNS, and ship with HTTPS—without leaving the editor

Control titles, URLs, SEO, and social previews at page level

EDITOR UI • LAYOUTS • COMPONENTS

Drag building blocks. Ship real pages.

These are the two core libraries inside my builder. Layouts define structure (grid / flex / sections). Components provide content blocks (text, media, forms). Both are persisted in Postgres and rendered from the same schema for preview and publishing — so what you edit is what you ship.

• Layout presets: Grid / Flex / Sections / Patterns • Component library: basic UI, typography, media, forms • Schema-driven rendering from Postgres (preview + publish) • Consistent design language and fast editor workflows

MEDIA • VIDEO • IMAGE

Visual media editing that stays true to your design.

Design media the same way you design layouts — Control every detail visually and intuitively. Adjust size, fit, position, playback, and appearance without leaving the canvas — no hidden
transforms, no editor-only hacks.

• Drag and resize directly on the page
• Precise control over fit, position, and dimensions
• Video playback options: autoplay, loop, muted, controls
• Instant preview that matches the live site

EDIT WITH CONFIDENCE • PREVIEW INSTANTLY • SHIP FAST

Built with love, precision, and a shipping mindset — Mohamed Bebba.

I design and engineer production-grade systems — from visual editors and scalable backends to secure, automated infrastructure. Every project is built to be reliable, maintainable, and ready to ship.