Compiler Pipeline Visualizer
Compiler Pipeline Visualizer
Back to Visualizer Workspace
SOFTWARE ARCHITECTURE SPECIFICATION

Compiler Pipeline Visualizer Documentation

Complete Phase 1 Architecture, REST API Reference, Database Schema, and Team Deliverables.

Phase 1 Team Work Split & Ownership

Ebin (Backend Lead)

Core Engine & DB
  • Next.js 14+ TypeScript project architecture
  • Neon PostgreSQL schema with connection pooling & Prisma ORM
  • Lexical Analyzer (tokenization, regex, coordinates, error recovery)
  • Symbol Table class with hierarchical scoping
  • API route `/api/compile/lex`

Kevin (Backend)

Syntax & Semantics
  • Recursive descent parser for C-like language with operator precedence
  • Abstract Syntax Tree (AST) structure generation
  • Semantic Analyzer (type checking, redeclaration, undefined symbols)
  • Comprehensive Error Management System with code snippets
  • API routes `/api/compile/syntax`, `/api/compile/semantic`, `/api/compile/:id/errors`

Aadi (Frontend)

Layout & Editor
  • Next.js App Router layout with Tailwind CSS styling
  • Monaco Editor integration with C-like syntax highlighting
  • Editor shortcuts (`Ctrl+Enter` compile) and localStorage persistence
  • Control panel with compile buttons, font size, and preset templates
  • Responsive 2-column layout wrapper

Joel (Frontend)

Visualizer & State
  • Pipeline Visualizer flow framework with 6 phase cards
  • TokenList component with syntax badge highlighting, search, and type filters
  • SyntaxTreeViewer with interactive collapsible AST tree nodes
  • SymbolTableViewer with scope filtering and column sorting
  • Context-aware InfoPanel and Zustand global state management

REST API Reference

POST/api/compile/lex

Tokenizes source code string into an array of lexical tokens with coordinates.

// Request Body { "sourceCode": "int x = 10;" } // Response Body { "success": true, "tokens": [ { "id": "tok-1", "type": "KEYWORD", "value": "int", "line": 1, "column": 1 }, { "id": "tok-2", "type": "IDENTIFIER", "value": "x", "line": 1, "column": 5 }, { "id": "tok-3", "type": "OPERATOR", "value": "=", "line": 1, "column": 7 }, { "id": "tok-4", "type": "NUMBER_LITERAL", "value": "10", "line": 1, "column": 9 }, { "id": "tok-5", "type": "DELIMITER", "value": ";", "line": 1, "column": 11 } ] }
POST/api/compile/syntax

Parses tokens or source code into a hierarchical Abstract Syntax Tree (AST).

POST/api/compile/semantic

Runs type checking, scope resolution, and populates the scoped symbol table.

POST/api/compile/pipeline

Executes the complete compilation pipeline end-to-end and persists results into the database.

GET/api/compile/:sessionId/errors

Retrieves all compilation errors, warnings, and code snippets for a session.

Database Schema (PostgreSQL / Neon)

compilation_sessions

id (UUID PK), user_id, source_code, created_at

lexical_tokens

id (UUID PK), session_id (FK), type, value, line, column

syntax_tree

id (UUID PK), session_id (FK), tree_json

symbol_table

id (UUID PK), session_id (FK), name, type, scope, metadata

compilation_errors

id (UUID PK), session_id (FK), phase, error_msg, severity, line, column

intermediate_code (Phase 2)

id (UUID PK), session_id (FK), ir_code, line_number

Compiler Pipeline Visualizer • Software Architecture Project • Phase 1 Complete