Skip to content

J-Libraries/AI-System-Design-Builder-Client

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package.json
package.json
 
 
vite.config.ts
vite.config.ts
 
 

Repository files navigation

AI System Design Platform — Frontend (Client)

A modern, professional React + TypeScript web app that lets you generate complete system designs — architecture diagrams, SOW, LLD, API contracts, database schemas, wireframes, and task breakdowns — from a single prompt. Powered by Sarvam AI via the backend server.

Table of Contents

Overview

The AI System Design Platform frontend is a full-featured React Single Page Application (SPA). Users describe their product and requirements through a guided form, then watch as the AI generates a complete system design in real-time via WebSocket. The completed design is presented in a rich multi-tab workspace.

Core user flow:

Fill in design form  ──▶  AI generates design in stages (streamed via WebSocket)
                                        │
                         ┌─────────────▼─────────────────────────────┐
                         │         Workspace Tabs                     │
                         │  System Design Diagram  │  HLD  │  LLD    │
                         │  API Contracts  │  DB Schema  │  SOW      │
                         │  Task Breakdown  │  Wireframes  │  Data Flow │
                         └────────────────────────────────────────────┘
                                        │
                              Export PDF / SOW PDF / CSV

Tech Stack

Category Library / Tool
Framework React 18 + TypeScript
Build Tool Vite 6 (with SWC)
Routing React Router v7 (lazy-loaded routes)
State Management Zustand
Diagram Rendering React Flow (ReactFlow)
Charts & Diagrams Recharts, Mermaid
WebSocket SockJS + STOMP (@stomp/stompjs)
UI Components Radix UI (full suite)
Icons Lucide React
PDF Export jsPDF + html2canvas
Styling TailwindCSS + custom CSS (index.css)
Fonts Inter (Google Fonts)

Project Structure

AI System Design Platform/
├── index.html                     # App shell (loads Inter font, mounts #root)
├── vite.config.ts                 # Vite config: dev server, proxy, aliases
├── package.json
└── src/
    ├── main.tsx                   # React entry: RouterProvider
    ├── App.tsx                    # Root app wrapper
    ├── routes.tsx                 # Lazy-loaded route definitions
    ├── index.css                  # Global styles & Tailwind tokens
    ├── mock-data.ts               # Mock data for development/testing
    │
    ├── pages/
    │   ├── CreateDesign.tsx       # Home page: design generation form
    │   └── Workspace.tsx          # Main workspace: diagram + document tabs
    │
    ├── components/
    │   ├── DiagramCanvas.tsx      # React Flow diagram (nodes, edges, animation)
    │   ├── DocumentTabs.tsx       # Master tab container for all document sections
    │   ├── DocumentTabLayout.tsx  # Shared tab layout wrapper
    │   ├── NodeDetailsPanel.tsx   # Sidebar showing clicked node details
    │   ├── StageTimeline.tsx      # Live AI stage progress timeline
    │   ├── ProgressBar.tsx        # Bottom generation progress bar
    │   ├── MermaidDiagram.tsx     # Mermaid JS diagram renderer
    │   ├── ComponentStudio.tsx    # Component breakdown / LLD viewer
    │   ├── DiagramPreviewCard.tsx # Compact diagram thumbnail card
    │   ├── WorkspaceErrorBoundary.tsx
    │   │
    │   ├── HLDTab.tsx             # High-Level Design tab
    │   ├── LLDTab.tsx             # Low-Level Design tab
    │   ├── ApiTab.tsx             # API Contracts tab
    │   ├── DatabaseTab.tsx        # Database Schema tab
    │   ├── DataFlowTab.tsx        # Data Flow Scenarios tab
    │   ├── ScalingTab.tsx         # Scaling Strategy tab
    │   ├── FailureTab.tsx         # Failure Handling tab
    │   ├── TradeoffTab.tsx        # Architecture Tradeoffs tab
    │   ├── OverviewTab.tsx        # Design overview/summary tab
    │   │
    │   ├── figma/                 # Figma-export / screen preview components
    │   └── ui/                    # Radix UI-based shared UI primitives
    │
    ├── services/
    │   ├── api.ts                 # All REST API calls (fetch-based)
    │   └── websocket.ts           # WebSocket service (STOMP/SockJS)
    │
    ├── store/
    │   └── designStore.ts         # Zustand global state store
    │
    ├── types/
    │   └── index.ts               # All TypeScript interfaces & types
    │
    ├── utils/
    │   └── export.ts              # PDF / PNG export helpers
    │
    └── styles/                    # Additional style modules

Prerequisites

Tool Minimum Version
Node.js 18+
npm 9+
Backend (Spring Boot) Running on port 8080

You must have the backend server running before starting the frontend. See the backend README.

Getting Started

1. Clone the Repositories

# Clone the frontend (this repo)
git clone https://github.com/J-Libraries/AI-System-Design-Builder-Client.git
cd AI-System-Design-Builder-Client

# Clone the backend (in a separate terminal / folder)
git clone https://github.com/J-Libraries/AI-System-Design-Builder.git

2. Install Dependencies

npm install

3. Configure Environment Variables

Create a .env file in the project root:

# URL of the running backend server
VITE_API_BASE_URL=http://localhost:8080
VITE_WS_BASE_URL=http://localhost:8080

# To bind the dev server to all network interfaces (for LAN access):
# VITE_DEV_HOST=0.0.0.0

# To override the backend origin for the dev proxy:
# VITE_BACKEND_ORIGIN=http://192.168.1.100:8080

Note: In development, Vite proxies /api and /ws requests through to the backend automatically (configured in vite.config.ts), so setting VITE_API_BASE_URL to an empty string or your dev backend URL both work.

4. Start the Dev Server

npm run dev

The app opens automatically at http://localhost:3000.

5. Build for Production

npm run build

The production-ready output is placed in the build/ directory. Serve it with any static file server:

npx serve build

Pages & Routing

Route Component Description
/ CreateDesign Home page — design generation form
/workspace/:designId Workspace Main workspace for a generated design
* CreateDesign Fallback — redirects to home

Routes are lazy-loaded for optimal bundle splitting.

Key Components

CreateDesign Page

The home screen / form where users define their product:

Field Description
Product Name The name of the product/system
Functional Requirements List of features (add multiple)
Non-Functional Requirements Performance, reliability expectations
Expected DAU Daily active users
Region Deployment region (e.g. us-east-1)
Scale SMALL / MEDIUM / LARGE / HYPERSCALE
Target Platform WEB / MOBILE / BOTH
Design Domain BACKEND / FRONTEND / MOBILE / SERVER_ARCHITECTURE / DEVOPS
Tech Stack Preferred technologies
Database Database choice
Server Type REST / GraphQL etc.
Container Strategy Docker, Kubernetes, etc.

On submission the form calls POST /api/design/generate, receives a designId, and navigates to /workspace/:designId.

Workspace Page

The main design workspace. Displays either:

  • The interactive system design diagram (React Flow canvas), or
  • One of the document tabs (HLD, API, LLD, etc.)

Includes a stage timeline at the top showing AI generation progress and a progress bar at the bottom.

DiagramCanvas

React Flow-based interactive architecture diagram:

  • Draggable, zoomable nodes
  • Type-based automatic styling & icons
  • Click a node to open NodeDetailsPanel
  • Request flow animation — simulate request traffic through your system
  • Export to PNG

NodeDetailsPanel

Right-hand sidebar displayed when a diagram node is clicked:

  • Node description & technology
  • High-Level Design (HLD)
  • Low-Level Design (LLD)
  • Scaling strategy
  • Failure handling

StageTimeline

Displays the 10 AI generation stages with live status indicators (PENDING → IN_PROGRESS → COMPLETED):

SOW → HLD → COMPONENT_BREAKDOWN → LLD → DATA_FLOW →
SCALING_STRATEGY → FAILURE_HANDLING → DIAGRAM_METADATA → TASK_BREAKDOWN → WIREFRAME

Document Tabs

The workspace exposes the following tabs after generation completes:

Tab Content
System Design Interactive React Flow architecture diagram
Overview Executive summary of the design
HLD High-Level Design narrative
LLD Low-Level Design details per component
API Contracts Endpoint definitions (method, path, request/response)
Database Entity schemas and relationships
Data Flow Scenario-based data flow descriptions
Scaling Horizontal / vertical scaling strategies
Failure Handling Failure modes and mitigation patterns
Tradeoffs Architecture tradeoff analysis
SOW Statement of Work document
Task Breakdown Module-level tasks with time estimates per seniority
Wireframes AI-generated UI screen mockups (HTML/CSS preview, iterable via chat)
Component Studio Deep dive into each component's build order and dependencies

State Management

Zustand (src/store/designStore.ts) manages all global UI state:

State Slice Type Description
designId string | null Active design UUID
productName string Product name for display
progress number Overall generation progress (0–100)
currentStage string Name of the currently active stage
stages Stage[] Status of all 10 AI generation stages
diagramMetadata DiagramMetadata | null Nodes and edges for React Flow
document SystemDesignDocument | null Full generated document
activeTab DocumentTab Currently selected workspace tab
selectedNode NodeData | null Node selected in the diagram
isAnimating boolean Whether request-flow animation is active

Services

REST API Client

src/services/api.ts wraps all backend REST calls:

Function Method Endpoint
generateDesign(request) POST /api/design/generate
regenerateDesign(id, request) POST /api/design/{id}/regenerate
listDesigns() GET /api/design
getDesignRequest(id) GET /api/design/{id}/request
deleteDesign(id) DELETE /api/design/{id}
getDesignDocument(id) GET /api/design/{id}/document
updateDesignDocument(id, doc) PUT /api/design/{id}/document
downloadDesignPDF(id, name) GET /api/design/{id}/export/pdf
downloadSowPDF(id, name) GET /api/design/{id}/export/sow/pdf
downloadTaskBreakdownCsv(id, name) GET /api/design/{id}/export/task-breakdown/csv
iterateWireframe(id, prompt) POST /api/design/{id}/wireframe/iterate

WebSocket Service

src/services/websocket.ts provides a WebSocketService class using SockJS + STOMP:

import { wsService } from './services/websocket';

// Connect and subscribe to a design's live updates
await wsService.connect(designId, (message) => {
  // message.type: 'STAGE_UPDATE' | 'PROGRESS_UPDATE' | 'DIAGRAM_UPDATE' | 'COMPLETE' | 'ERROR'
  console.log(message);
});

// Disconnect when done
wsService.disconnect();

Connection Details:

Property Value
SockJS URL {VITE_WS_BASE_URL}/ws
Subscribe topic /topic/design/{designId}
Reconnect delay 5 000 ms
Heartbeat 4 000 ms in / 4 000 ms out

Environment Variables

Variable Default Description
VITE_API_BASE_URL http://10.10.1.75:8080 Backend REST base URL
VITE_WS_BASE_URL http://10.10.1.75:8080 Backend WebSocket base URL
VITE_BACKEND_ORIGIN http://localhost:8080 Dev proxy backend origin (overrides Vite proxy)
VITE_DEV_HOST 0.0.0.0 Host the dev server binds to

For typical local development just set VITE_API_BASE_URL and VITE_WS_BASE_URL to http://localhost:8080.

Backend Integration

This frontend requires the AI System Design Builder backend to be running.

Quick backend start:

cd systemdesign
./mvnw spring-boot:run

The Vite dev server proxies all /api/** and /ws/** requests to the backend automatically — no CORS setup needed during development.

WebSocket Message Format:

// Stage progress update
{ type: 'STAGE_UPDATE', stage: 'HLD', status: 'COMPLETED', payload: { ... } }

// Overall progress
{ type: 'PROGRESS_UPDATE', progress: 45, stage: 'LLD' }

// Diagram data ready
{ type: 'DIAGRAM_UPDATE', diagramMetadata: { nodes: [...], edges: [...] } }

// Generation complete
{ type: 'COMPLETE', document: { ... } }

// Error
{ type: 'ERROR', message: 'Generation failed' }

AI Generation Pipeline (Stages)

The backend generates the design in 10 sequential stages, each streamed to the client:

# Stage What's Generated
1 SOW Statement of Work
2 HLD High-Level Architecture
3 COMPONENT_BREAKDOWN Component list & responsibilities
4 LLD Low-Level Design per component
5 DATA_FLOW Data flow scenarios
6 SCALING_STRATEGY Scaling approaches
7 FAILURE_HANDLING Failure modes & mitigations
8 DIAGRAM_METADATA React Flow nodes & edges
9 TASK_BREAKDOWN Dev tasks with hour estimates
10 WIREFRAME UI screen HTML/CSS mockups

Node Types & Diagram Styling

Diagram nodes are automatically styled by type:

Node Type Theme Color Examples
database Purple PostgreSQL, MongoDB, Redis
server / service Blue API Server, Auth Service
client / frontend Green Web App, Mobile Client
api Yellow REST Gateway, GraphQL
cache Orange Redis Cache, CDN
queue Pink Kafka, RabbitMQ, SQS
loadbalancer Cyan AWS ALB, Nginx

Export Features

Export Format Trigger
Full System Design PDF Download PDF button in workspace
Statement of Work PDF Export SOW button
Task Breakdown CSV Export CSV button in Task Breakdown tab
Architecture Diagram PNG Export PNG button on diagram canvas

Related Repositories

Repo Description
This repo React + Vite frontend client
AI-System-Design-Builder Spring Boot backend (AI orchestration, REST API, WebSocket)

Figma Design Reference

The original UI design is available on Figma:
AI-System-Design-Platform on Figma

License

MIT

About

It is an AI based system design builder Platform where I can build System Design, SOW, MVP, API Listing, with just 1 prompt, Client

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages