How kinginthenorth12/hacktable_frontforge works
FrontForge turns a natural-language brief into a generated React application through a clarification, architecture, generation, and review workflow. The React studio submits requests to FastAPI, displays streamed progress, and provides a sandboxed preview, code inspection, project history, and export controls. The backend coordinates agents that call the model abstraction, then persists project data and serves saved files. README capabilities are represented even where implementation excerpts were not provided; those UI details are attributed to the sampled studio component, without inferring additional backend wiring.
Main entry points: orchestrator.py Workflow orchestrator · app.py HTTP and SSE API · App.jsx React studio · llm.py Model client and parsing
Components 13
Studio
- React studio
client/src/App.jsx - Sandbox preview
client/src/App.jsx - Code and export UI
client/src/App.jsx
Backend service
- HTTP and SSE API
server/app.py - Project JSON store
server/storage.py
Generation pipeline
- Workflow orchestrator
server/orchestrator.py - Requirement clarification
server/agents/clarification.py - UI architect
server/agents/architect.py - Frontend generator
server/agents/generator.py - Review and repair
server/agents/reviewer.py
Model integration
- Model client and parsing
server/llm.py
Other components
- User
- LLM provider
Connections 21
- User → React studio: submits brief
- React studio → HTTP and SSE API: sends requests
- HTTP and SSE API → Workflow orchestrator: runs pipeline
- Workflow orchestrator → Requirement clarification: analyzes requirements
- Requirement clarification → Workflow orchestrator: returns draft and questions
- Workflow orchestrator → UI architect: designs architecture
- UI architect → Workflow orchestrator: returns blueprint
- Workflow orchestrator → Frontend generator: generates files
- Frontend generator → Workflow orchestrator: returns generated files
- Workflow orchestrator → Review and repair: reviews files
- Review and repair → Workflow orchestrator: returns repaired files
- Requirement clarification → Model client and parsing: invokes model
- UI architect → Model client and parsing: invokes model
- Frontend generator → Model client and parsing: invokes model
- Model client and parsing → LLM provider: sends model requests
- Workflow orchestrator → HTTP and SSE API: emits progress events
- HTTP and SSE API → React studio: streams progress
- HTTP and SSE API → Project JSON store: loads and saves projects
- React studio → Sandbox preview: renders generated app
- React studio → Code and export UI: shows files and controls export
- Code and export UI → HTTP and SSE API: requests project files and export