personal project · ongoing
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.
Visual editor — E-commerce store with AI assistant
Problem
Building custom landing pages and multi-page apps required repetitive React scaffolding — each project needing similar routing, layouts, and component structures.
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.
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).
Business Impact
Enables rapid creation of deployable React applications from visual design — reducing scaffolding time from days to hours.
Technical Decisions
- Deno for secure TypeScript-native backend runtime
- BuilderNode JSON trees over imperative code generation
- Client-side export over server-side zip generation for MVP simplicity
- Structured ProjectEditOp validation for AI edits
Feature Breakdown
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