Getting Started
Architecture
Understand the technical foundation of Platphorm Design, including component structure, state management, and data flow patterns.
System Overview
High-level architecture diagram
┌─────────────────────────────────────────────────────────────────────────┐ │ PLATPHORM DESIGN │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌───────────────────────── PRESENTATION ─────────────────────────────┐ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │ │ │ │ │ Toolbar │ │ Canvas │ │ Panels │ │ AI Assistant │ │ │ │ │ └────┬─────┘ └────┬─────┘ └────┬─────┘ └─────────┬─────────┘ │ │ │ └───────┼─────────────┼─────────────┼──────────────────┼────────────┘ │ │ │ │ │ │ │ │ ┌───────┴─────────────┴─────────────┴──────────────────┴────────────┐ │ │ │ APPLICATION LAYER │ │ │ │ │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │ │ │ │ │Design Store │ │Canvas Engine│ │Export System│ │ AI Client │ │ │ │ │ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └─────┬─────┘ │ │ │ └─────────┼────────────────┼────────────────┼───────────────┼───────┘ │ │ │ │ │ │ │ │ ┌─────────┴────────────────┴────────────────┴───────────────┴───────┐ │ │ │ DATA LAYER │ │ │ │ │ │ │ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────────────┐ │ │ │ │ │ IndexedDB │ │ Cache │ │API Client │ │ Network Client │ │ │ │ │ └─────┬─────┘ └─────┬─────┘ └─────┬─────┘ └────────┬────────┘ │ │ │ └────────┼──────────────┼──────────────┼─────────────────┼──────────┘ │ │ │ │ │ │ │ ├───────────┴──────────────┴──────────────┴─────────────────┴────────────┤ │ API LAYER │ │ │ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────────────────┐│ │ │/api/v1/* │ │ /api/mcp │ │/api/health│ │ Webhook Handlers ││ │ └─────┬─────┘ └─────┬─────┘ └─────┬─────┘ └───────────┬───────────┘│ │ │ │ │ │ │ ├────────┴──────────────┴──────────────┴────────────────────┴────────────┤ │ PLATPHORM NETWORK │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ SVG │ │ Docs │ │ Sheets │ │ Emoji │ │ Codex │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────────────────┘
Architecture Layers
1Presentation Layer
React components, UI elements, and user interactions
Canvas ComponentToolbarPanels (Layers, Properties, Export)AI Assistant UI
2Application Layer
Business logic, state management, and feature coordination
Design StoreCanvas EngineExport PipelineAI Integration
3Data Layer
Persistence, caching, and external data sources
IndexedDB PersistenceLocal Storage CacheAPI ClientNetwork Services
4API Layer
REST endpoints, MCP protocol, and external integrations
/api/v1/* routesMCP ServerWebhook HandlersHealth Checks
State Management
State Architecture
How state flows through the application
Design StateReact Context + IndexedDB
Current design document with elements, canvas settings, and metadataUI StateReact State (useState/useReducer)
Selected tool, zoom level, panel visibility, active selectionPersistence StateCustom Hook (useDesignPersistence)
Auto-save status, sync status, version historyAI StateAI Assistant Component State
Suggestions, generation status, interaction historyData Flow Pattern
Unidirectional data flow with optimistic updates
// Read Flow: Data retrieval pattern
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Component │ ──▶ │ Hook │ ──▶ │ Store │
│ (useData) │ │ (useDesign) │ │ (IndexedDB) │
└─────────────┘ └─────────────┘ └─────────────┘
▲ │
│ │
└───────────────────────────────────────┘
Data returned
// Example implementation
function useDesignData(designId: string) {
const [design, setDesign] = useState<Design | null>(null)
useEffect(() => {
// 1. Check memory cache
// 2. Check IndexedDB
// 3. Fetch from API if needed
loadDesign(designId).then(setDesign)
}, [designId])
return design
}Component Architecture
Key component hierarchy and responsibilities
app/
├── page.tsx # Main editor entry point
├── layout.tsx # Root layout with providers
│
└── docs/ # Documentation section
├── layout.tsx # Docs navigation wrapper
└── [slug]/page.tsx # Dynamic doc pages
components/
├── design/
│ ├── canvas.tsx # SVG canvas with pan/zoom
│ ├── toolbar.tsx # Drawing tools selection
│ ├── layers-panel.tsx # Layer management
│ ├── properties-panel.tsx # Element properties editor
│ ├── export-panel.tsx # Export configuration
│ ├── ai-assistant.tsx # AI chat interface
│ └── integrations-panel.tsx # Network services
│
├── ui/ # shadcn/ui components
│ ├── button.tsx
│ ├── card.tsx
│ └── ...
│
└── providers/
└── theme-provider.tsx # Dark/light mode
lib/
├── design/
│ ├── types.ts # TypeScript interfaces
│ ├── store.ts # State management
│ ├── canvas-utils.ts # Canvas calculations
│ └── index.ts # Public exports
│
├── api/
│ ├── client.ts # API client
│ ├── middleware.ts # Request handling
│ └── index.ts
│
└── utils.ts # Shared utilities
hooks/
├── use-design-persistence.ts # Auto-save hook
├── use-canvas.ts # Canvas state hook
└── use-i18n.ts # InternationalizationTechnology Stack
Core technologies and their roles
Frontend
- Next.js 15 - React framework with App Router
- React 19 - UI component library
- TypeScript - Type safety
- Tailwind CSS - Utility-first styling
- shadcn/ui - Component primitives
Data & State
- IndexedDB - Client-side persistence
- React Context - Global state
- SWR - Data fetching & caching
- Zod - Schema validation
Canvas & Graphics
- SVG - Vector rendering
- Canvas API - Raster export
- html-to-image - DOM capture
API & Integration
- REST API - CRUD operations
- MCP Protocol - AI agent interface
- Webhooks - Event notifications
Security Architecture
Security measures and best practices
Input Validation
All API inputs validated with Zod schemas. SVG content sanitized to prevent XSS.
Rate Limiting
API endpoints protected with rate limiting (100 req/hour anonymous, 1000 req/hour authenticated).
Content Security Policy
Strict CSP headers prevent unauthorized script execution and data exfiltration.
Next Steps
- Learn about the Canvas Engine
- Explore Design Elements
- Understand Export System