Mini Compiler

A browser-based Java mini compiler that performs Lexical, Syntax, and Semantic analysis on Java source code — built as a frontend-only web application with no backend required.

---

Overview

Context: Compilers are one of the most fundamental systems in computer science, yet understanding how they work internally — from raw source code to structured, validated output — remains abstract for most students.

Problem: Learning compiler theory in isolation (lectures, textbooks) makes it difficult to visualize what each compilation phase actually does to your code. Students needed a hands-on tool that makes the three core phases of compilation tangible and interactive.

---

What I Built

Key Features

• Lexical Analysis — Tokenizes Java source code character-by-character using a Finite State Machine (FSM), classifying tokens into keywords, identifiers, literals, operators, separators, and comments. Reports precise line/column errors for unknown characters, unterminated strings, and malformed numbers.
• Syntax Analysis — Implements a Recursive Descent Parser based on a Java-like Context-Free Grammar (CFG). Validates token sequences against grammar rules and builds an Abstract Syntax Tree (AST), reporting structural errors when grammar rules are violated.
• Semantic Analysis — Walks the AST to enforce meaning-level rules: type checking, duplicate/undeclared variable detection, operator compatibility, condition type validation, and scope resolution.
• Adaptive Layout System — Three switchable panel layouts (file left, file top, file right) with manual panel resize support via drag handles.
• Light / Dark Mode — Full theme toggle with CSS variable-driven theming, persisted via localStorage.
• File Upload — Accepts .java and .txt files via the OS file dialog; displays file content in a styled code viewer.

Tech Stack

Layer	Technology
Frontend	Vanilla JavaScript (ES Modules)
Markup	HTML5
Styling	CSS3 (Custom Properties, Grid, Flexbox)
Runtime	Browser (no backend, no framework)
Dev Server	http-server (Node.js)

Challenges Solved

1. ES Module architecture without a bundler — The project uses native ES Modules (import/export) directly in the browser, which requires serving over HTTP (not file://). All three analyzer modules (lexical.js, syntax.js, semantic.js) are cleanly separated by concern and imported into a single controller (app.js), keeping the codebase modular without any build step.

2. Recursive Descent Parser with operator precedence — Implementing correct operator precedence in a hand-written parser (without parser-generator tools like ANTLR) required carefully layering grammar rules from lowest to highest precedence: LogicalOr → LogicalAnd → Equality → Relational → Additive → Multiplicative → Unary → Primary. Getting this wrong produces subtle parsing failures that are hard to debug.

---

Results & Impact

• Successfully analyzes all three compiler phases end-to-end in the browser with no server-side processing
• Detects and reports errors with precise line and column numbers across all three phases
• Handles real Java constructs: classes, methods, variable declarations, control flow (if, while, for), expressions, and type assignments
• Zero external runtime dependencies — runs entirely on native browser APIs

---

Getting Started

# 1. Clone the repository
git clone https://github.com/MarlanAlfonso/Mini-Compiler.git
cd mini-compiler

# 2. Install a local dev server (only needed once)
npm install -g http-server

# 3. Start the server
http-server .

# 4. Open in browser
# Go to: http://127.0.0.1:8080

Do not open index.html directly via file:// — ES Modules will fail to load due to browser CORS restrictions. Always use the dev server.

---

Project Structure

mini-compiler/
├── index.html                  # Entry point
└── src/
    ├── assets/
    │   └── logo.png
    ├── controller/
    │   └── app.js              # UI controller, event handling, state management
    ├── model/
    │   ├── lexical.js          # Lexical analyzer (tokenizer / FSM)
    │   ├── syntax.js           # Syntax analyzer (recursive descent parser)
    │   └── semantic.js         # Semantic analyzer (type checker, scope resolver)
    ├── utils/
    │   └── helpers.js          # Utility functions
    └── view/
        └── style.css           # All styles, themes, layout

---

What I Learned

• Implemented a Finite State Machine (FSM) for lexical analysis — understanding how character-level state transitions map to token recognition patterns
• Built a Recursive Descent Parser from scratch — gaining deep intuition for how operator precedence, grammar rules, and look-ahead token matching work together
• Gained hands-on experience with AST construction and traversal — seeing how an Abstract Syntax Tree represents program structure and how to walk it for semantic checks
• Improved understanding of CSS Grid and layout systems — implementing a flexible multi-layout panel system with dynamic switching and drag-to-resize
• Learned the importance of serving ES Modules over HTTP — and how browser security policies (CORS) affect module-based frontend architecture