← Portfolio Kalaam — Architecture
Source Code Hindi · Marathi Bengali · Telugu Odia any supported lang PHASE 1 Cleaning earlyCleaning() keyword substitution lang → norm tokens PHASE 2 Scanning character-level scan → cleaned_sourcedata[] whitespace · literals PHASE 3 Tokenizing 20 Push* functions → typed tokens[] TypeChecking pass PHASE 4 Interpretation walk tokens[] execute vs memory{} build ExecutionStack[] OUTPUT kalaam{} output · isError ExecutionStack[] TimeTaken norm chars tokens execute output Learning Mode — ExecutionStack[] is the key innovation Every operation appends to ExecutionStack[]. The UI replays it step-by-step in the student's language — teaching how the interpreter evaluates the code. No teacher required.
PWA Shell Vue 2 + Quasar · CodeMirror (custom syntax mode) · Service Worker offline cached · installable · mobile-first UI 100% offline · no API calls kalaam Interpreter Core npm package · v2.3.3 · zero runtime deps Compile(source, languageKeywords) → kalaam{} calls हिंदी Hindi चर, यदि, वरना जबतक, प्रिंट मराठी Marathi चल, जर, नाहीतर जोपर्यंत, छाप বাংলা Bengali চল, যদি, অন্যথায় যতক্ষণ, প্রিন্ট తెలుగు Telugu వేరియబుల్, ఉంటే వరకు, ముద్రించు ଓଡ଼ିଆ Odia ଚଳ, ଯଦି, ନହେଲେ ଯ ପର୍ଯ୍ୟ, ପ୍ରିଣ୍ଟ languageKeywords
Key Design Decisions
Core Architecture
Zero runtime dependencies
The kalaam npm package has zero runtime dependencies. The interpreter is pure JavaScript — no parser framework, no tokenizer library, no runtime engine. This keeps the bundle tiny, works completely offline, and means any environment that runs JS can run Kalaam.
pure JSnpmzero deps
Multi-language Design
Add a language = 1 keyword map entry
The interpreter is language-agnostic. Phase 1 (Cleaning) substitutes language-specific keywords into normalized tokens before any parsing begins. Adding Hindi, Marathi, Bengali, Telugu, or Odia required no parser changes — just one keyword map object per language.
keyword substitution5 languagesextensible
Learning Innovation
ExecutionStack — the interpreter teaches itself
Every operation the interpreter performs appends to ExecutionStack[]. The PWA UI replays this stack line-by-line in the student's language, showing what each line does and why. Students learn not just to write code but how the computer evaluates it — without a teacher or internet.
ExecutionStack[]step replayno teacher
Deployment
PWA with service-worker cache — truly offline
The Vue 2 + Quasar PWA is service-worker cached on first load. After that, no internet is needed — the app, interpreter, and all language assets run entirely from the device. Designed for tier-3 city students with intermittent connectivity and no laptop.
Quasar PWAservice workeroffline-first
Editor
CodeMirror with custom Kalaam syntax mode
The code editor uses CodeMirror with a custom syntax mode written specifically for Kalaam. It highlights Hindi/Marathi/etc. keywords, strings, and comments in real-time. The mode understands the normalized token structure from Phase 1, giving accurate syntax coloring for all 5 languages.
CodeMirrorcustom syntax mode5 language highlight
Public API
Single clean entry point — Compile()
The package exposes one public function: Compile(sourcecode, languageKeywords) which returns { output, ExecutionStack, isError, TimeTaken }. The caller decides which language keyword map to pass. The interpreter doesn't know or care which language is active — it only sees normalized tokens after Phase 1.
Compile()language-agnostic corenpm v2.3.3