# kinginthenorth12/hacktable_frontforge architecture

> Architecture diagram of the GitHub repository kinginthenorth12/hacktable_frontforge, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kinginthenorth12/hacktable_frontforge
- Repository: https://github.com/kinginthenorth12/hacktable_frontforge

## Overview

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: [`server/orchestrator.py`](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/orchestrator.py) (Workflow orchestrator), [`server/app.py`](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/app.py) (HTTP and SSE API), [`client/src/App.jsx`](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx) (React studio), [`server/llm.py`](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/llm.py) (Model client and parsing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_studio["Studio"]
  node_studio_ui["React studio<br/>[App.jsx]"]
  node_preview["Sandbox preview<br/>[App.jsx]"]
  node_inspector["Code and export UI<br/>[App.jsx]"]
end

subgraph group_service["Backend service"]
  node_api["HTTP and SSE API<br/>[app.py]"]
  node_project_store[("Project JSON store<br/>[storage.py]")]
end

subgraph group_pipeline["Generation pipeline"]
  node_workflow["Workflow orchestrator<br/>[orchestrator.py]"]
  node_clarifier["Requirement clarification<br/>[clarification.py]"]
  node_architect["UI architect<br/>[architect.py]"]
  node_generator["Frontend generator<br/>[generator.py]"]
  node_reviewer["Review and repair<br/>[reviewer.py]"]
end

subgraph group_model["Model integration"]
  node_llm["Model client and parsing<br/>[llm.py]"]
end

node_user(("User"))
node_model_provider{{"LLM provider"}}

node_user -->|"submits brief"| node_studio_ui
node_studio_ui -->|"sends requests"| node_api
node_api -->|"runs pipeline"| node_workflow
node_workflow -->|"analyzes requirements"| node_clarifier
node_clarifier -->|"returns draft and questions"| node_workflow
node_workflow -->|"designs architecture"| node_architect
node_architect -->|"returns blueprint"| node_workflow
node_workflow -->|"generates files"| node_generator
node_generator -->|"returns generated files"| node_workflow
node_workflow -->|"reviews files"| node_reviewer
node_reviewer -->|"returns repaired files"| node_workflow
node_clarifier -->|"invokes model"| node_llm
node_architect -->|"invokes model"| node_llm
node_generator -->|"invokes model"| node_llm
node_llm -->|"sends model requests"| node_model_provider
node_workflow -->|"emits progress events"| node_api
node_api -->|"streams progress"| node_studio_ui
node_api -->|"loads and saves projects"| node_project_store
node_studio_ui -->|"renders generated app"| node_preview
node_studio_ui -->|"shows files and controls export"| node_inspector
node_inspector -->|"requests project files and export"| node_api

click node_studio_ui "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx"
click node_preview "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx"
click node_inspector "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx"
click node_api "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/app.py"
click node_project_store "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/storage.py"
click node_workflow "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/orchestrator.py"
click node_clarifier "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/clarification.py"
click node_architect "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/architect.py"
click node_generator "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/generator.py"
click node_reviewer "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/reviewer.py"
click node_llm "https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/llm.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_studio_ui,node_preview,node_inspector,node_user toneBlue
class node_api,node_project_store toneAmber
class node_workflow,node_clarifier,node_architect,node_generator,node_reviewer toneMint
class node_llm toneRose
class node_model_provider toneIndigo
```

## Components

### Studio

- [React studio](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Sandbox preview](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Code and export UI](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/client/src/App.jsx): `client/src/App.jsx`

### Backend service

- [HTTP and SSE API](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/app.py): `server/app.py`
- [Project JSON store](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/storage.py): `server/storage.py`

### Generation pipeline

- [Workflow orchestrator](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/orchestrator.py): `server/orchestrator.py`
- [Requirement clarification](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/clarification.py): `server/agents/clarification.py`
- [UI architect](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/architect.py): `server/agents/architect.py`
- [Frontend generator](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/generator.py): `server/agents/generator.py`
- [Review and repair](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/agents/reviewer.py): `server/agents/reviewer.py`

### Model integration

- [Model client and parsing](https://github.com/kinginthenorth12/hacktable_frontforge/blob/main/server/llm.py): `server/llm.py`

### Other components

- **User**
- **LLM provider**

## Connections

- 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