Skip to content
personal project· ongoingProject 02 / 10

App Generator — Visual Page Builder

Metadata-driven visual page builder — design multi-page React apps in a browser editor, persist BuilderNode JSON in MongoDB via Deno API, and export deployable React + Vite SPAs as zip files with AI-assisted editing.

  • React 19
  • TypeScript
  • Deno
  • Oak
  • MongoDB
  • Vite
  • Redux Toolkit
  • Tailwind CSS
  • Vitest
  • @dnd-kit

Visual editor — E-commerce store with AI assistant

App Generator visual page builder showing drag-and-drop canvas, HTML elements palette, multi-page tabs, and AI UI Creator chat panel

01

Problem

Building custom landing pages and multi-page apps required repetitive React scaffolding — each project needing similar routing, layouts, and component structures.

02

Solution

Built App Generator — a low-code platform with 7 template kits, 34 page templates, drag-drop canvas editor, motion authoring, auto-save, React export codegen, and AI UI Creator for validated project edits.

03

Architecture

React 19 + Vite editor with Redux, @dnd-kit canvas, and client-side React codegen. Deno 2 + Oak REST API with MongoDB BuilderNode trees, JWT auth, and LLM proxy for AI editing (Anthropic/OpenAI/Ollama).

04

Business impact

Enables rapid creation of deployable React applications from visual design — reducing scaffolding time from days to hours.

Decisions

Technical decisions

  1. 01Deno for secure TypeScript-native backend runtime
  2. 02BuilderNode JSON trees over imperative code generation
  3. 03Client-side export over server-side zip generation for MVP simplicity
  4. 04Structured ProjectEditOp validation for AI edits

Features

Feature breakdown

  • Visual Canvas Editor
  • 7 Template Kits
  • 34 Page Templates
  • Motion Authoring
  • React Export
  • AI UI Creator
  • Auto-save
  • Multi-page Projects

Responsibilities

  • Architected BuilderNode metadata schema and validation (client + server)
  • Built visual editor with template kits, canvas, layers, and properties panels
  • Implemented Deno API for projects, auth, collaborators, and AI edit ops
  • Developed React export pipeline with deduplicated layouts, blocks, and routing codegen

Challenges

  • Designing BuilderNode schema flexible enough for diverse page layouts and motion effects
  • Validating AI-generated edit ops before persisting to prevent schema corruption

Performance considerations

  • Lazy-loaded block components in canvas
  • Debounced auto-save with retry on failure

Lessons learned

  • Client-side codegen with golden fixture tests (verify:export) ensures export reliability
  • AI editing requires stepped preview (Keep/Discard) before database persistence

Future roadmap

  • Canvas preview mode and undo/redo
  • Real-time collaboration
  • Backend export API and social auth
  • Template marketplace

Related engineering library

Explore more← All projectsEngineering library →