AppBuilder
Turns the description of an idea into real code and a video demo of the product running, with no manual work.
- Role
- Design and full-stack development
- Year
- 2026
- Status
- Personal project
- Client
- Own product
- 2
- product paths
- Video
- automatic demo
- .zip
- runnable code
- PDF/Word
- brief ingestion
Overview
AppBuilder takes a project's requirements — captured through a guided questionnaire or by attaching a brief in PDF or Word — and automatically generates three things: a real code scaffold ready to download and run, a navigable HTML preview, and a video demo recorded by a headless browser walking through the generated interface.
Context
The problem
There's an awkward gap between “I have an idea” and “I can see and touch what it would look like”. A static wireframe doesn't convey the product, and reaching a real prototype costs days of work that often gets thrown away.
The solution
Instead of delivering a wireframe, AppBuilder delivers a runnable artifact and a video you can share with a client or a non-technical stakeholder. The same generation and recording infrastructure serves two different user profiles.
What it does
Non-technical mode
A 7-step visual questionnaire — project type, style, palette, sections, references — producing a page or SPA in a single HTML file plus the video demo.
Technical mode
A stack wizard — frontend framework, backend, architecture, database — producing a complete code repository with Docker Compose and the video demo.
Automatic headless recording
A browser with no interface walks through the generated application: navigating between screens, scrolling and hovering interactive elements, producing a product video without anyone recording anything.
Brief ingestion
Requirements can be attached as PDF or Word instead of filling in the questionnaire, and the system extracts the generation parameters from there.
Technical decisions
- 01
One technical base, two paths
Rather than building two products, the application only forks the requirements capture and reuses the entire generation, preview and recording infrastructure. Adding a new user profile costs a form, not a system.
- 02
Runnable code over visual prototype
The product's edge is that what it delivers actually runs. A scaffold with Docker Compose comes up in one command and serves as the project's real starting point, not as throwaway material.
Stack
Application
- Next.js
- React
- TypeScript
- Node.js
Generation
- Modelos de lenguaje
- Plantillas de scaffold
- Docker Compose
Recording
- Navegador headless
- Captura de video
- Automatización de UI
Ingestion
- Parsing de PDF
- Parsing de Word
Next project