How vanshmishra26/compiler-design-project works
This is a stateless, full-stack visualizer for a small C-like compiler. A user edits source in the browser and requests compilation; the backend returns phase results and trace steps, which the interface presents as tokens, a parse tree, semantic symbols, TAC, and optimization views. The full-pipeline orchestration and frontend request path are visible in sampled source; the README documents the additional compiler and visualization capabilities represented here. Some component wiring and phase internals are based on documented capabilities and exact paths in the tree, not inspected excerpts.
Main entry points: page.tsx Visualizer page · pipeline.py Pipeline runner · compile.py Compile routes · pipelineStore.ts Pipeline state
Components 25
Source and state
- Visualizer page
frontend/app/page.tsx - Code editor
frontend/components/CodeEditor.tsx - Pipeline state
frontend/store/pipelineStore.ts - Compile client
frontend/lib/api.ts
Compilation service
- FastAPI app
backend/app/main.py - Compile routes
backend/app/routers/compile.py - Pipeline runner
backend/app/pipeline.py - Optimize route runner
backend/app/optimizer_runner.py
Compiler phases
- Lexer
backend/app/engine/lexer.py - Parser and AST
backend/app/engine/parser.py - AST nodes
backend/app/engine/ast_nodes.py - Semantic analysis
backend/app/engine/semantic.py - TAC generation
backend/app/engine/tac.py - Optimizer
backend/app/engine/optimizer.py - Compiler errors
backend/app/engine/errors.py
Pipeline views
- Token stream
frontend/components/TokenStream.tsx - Parse tree
frontend/components/ParseTreeGraph.tsx - Symbol table
frontend/components/SymbolTablePanel.tsx - TAC view
frontend/components/TACView.tsx - Optimization view
frontend/components/OptimizationView.tsx - Graph layout
frontend/lib/treeLayout.ts - Phase tabs
frontend/components/PhaseTabs.tsx - Playback controls
frontend/components/PlaybackControls.tsx - Error display
frontend/components/ErrorBanner.tsx
Other components
- Engineer
Connections 32
- Engineer → Visualizer page: edits and compiles
- Visualizer page → Code editor: renders
- Visualizer page → Pipeline state: reads and updates
- Code editor → Pipeline state: updates source
- Visualizer page → Compile client: requests compilation
- Compile client → FastAPI app: POST source
- FastAPI app → Compile routes: dispatches routes
- Compile routes → Pipeline runner: runs full pipeline
- Compile routes → Pipeline runner: runs phase requests
- Compile routes → Optimize route runner: runs optimize request
- Pipeline runner → Lexer: tokenizes source
- Pipeline runner → Parser and AST: parses tokens
- Pipeline runner → Semantic analysis: analyzes AST
- Pipeline runner → TAC generation: generates TAC
- Pipeline runner → Optimizer: optimizes TAC
- Optimize route runner → Optimizer: optimizes source
- Parser and AST → AST nodes: builds AST
- Semantic analysis → AST nodes: annotates AST
- Pipeline runner → Compiler errors: packages phase errors
- Pipeline runner → Compile client: returns phase results
- Visualizer page → Token stream: displays lex result
- Visualizer page → Parse tree: displays parse result
- Visualizer page → Symbol table: displays semantic result
- Visualizer page → TAC view: displays TAC result
- Visualizer page → Optimization view: displays optimization
- Parse tree → Graph layout: lays out AST
- Optimization view → Graph layout: lays out DAG
- Visualizer page → Phase tabs: renders phase selection
- Phase tabs → Pipeline state: changes phase
- Visualizer page → Playback controls: renders step controls
- Playback controls → Pipeline state: changes playback state
- Visualizer page → Error display: displays compiler errors