Skip to content
Logo
arrow_backBackKembali
WebLive open_in_new

Lectura — Academic Presentation

Lectura was born out of a real-world classroom need: the fragmentation of teaching tools. Most educators waste time switching between presentation software, infinite whiteboards, and text-based curriculum planners. Lectura solves this by unifying all three workspaces — Wiki-Study, Presentation, and Canvas — into a single-page application built on strict engineering principles.

Three Connected Modes

  • Wiki-Study Mode — structures curriculum topics, syllabus timelines, and student gradebooks, featuring an AI generation engine for quizzes and flashcards.
  • Presentation Mode — renders Markdown into interactive Reveal.js slides with LaTeX math (MathJax 3), structural diagrams (Mermaid.js), and integrated virtual laser pointers.
  • Canvas Mode — an infinite vector sketchboard built for live annotations, card inserts, and print-to-PDF options, synced directly to local storage.

Architecture

Lectura Client SPA (ES Modules) Wiki-Study | Presentation (Reveal.js) | Canvas Whiteboard 5-Layer Clean JS Frontend Architecture 11-Layer Cascade CSS (@layer Stack) Firebase Auth API Native Node.js HTTP Server Zero-Dependency Routing Engine CSRF, RateLimit, request-guard, storage-guard HTTP REST / JSON SQLite 3 (better-sqlite3) Class Data, Grades, Canvas Coordinates SQLite Query Gemini & Groq APIs AI Quiz & Lesson Plan Generation AI Prompt Request

5-Layer JS & 11-Layer CSS Architecture

To maintain a complex SPA without UI frameworks, I structured the frontend into a 5-Layer Clean Architecture: Domain (constants, EventBus), Infrastructure (API client, style loaders), Application (rendering engines, layout translators), UI (DOM controls, layouts), and Interactions (drawing engines, touch gestures). Circular dependencies are eliminated using an EventBus for decoupled communications. The style system utilizes an 11-layer CSS Cascade stack using native @layer rules to isolate vendor files, tokens, layout presets, component variations, and utility classes, resolving specificity conflicts at compile-time.

Native Server & Database Sync

The backend is built as a zero-dependency native Node.js HTTP server (no Express.js) utilizing ES Modules. Requests go through modular middlewares: Origin-checking CORS, CSRF protection, IP rate-limiting, and payload sanitizing request-guards. Persistent data — including class structures, grades, and sketch vector coordinates — are saved in a high-performance SQLite 3 database driven by the synchronous better-sqlite3 driver.

Tooling & Impact

Lectura compiles using esbuild for JavaScript compression and postcss for styling sheets consolidation. Unit tests run on vitest to secure parsing logic. Today, Lectura provides a unified digital environment for educators, eliminating visual formatting overhead and reducing lesson preparation times by an estimated 85%.

Stack
Node.jsSQLiteReveal.jsMathJaxMermaid.jsesbuildPostCSS
▸ 3 Connected Modes▸ SQLite Sync▸ 5-Layer JS & 11-Layer CSS