Skip to content

~/project

Architex: System Design Practice Platform

A platform for practicing system design. Draw architecture diagrams in Excalidraw, submit them for review, get graded.

  • React
  • Vite
  • Tailwind CSS
  • Node.js
  • Express
  • SQLite
  • JWT
  • Excalidraw

Role: University project · IT354 · Year: 2025 · Status: shipped

tldr: A practice platform for system design built around Excalidraw. The draft, submit, review, score workflow is enforced server-side with role-based rules so the state machine can’t be driven from the client. Express with SQLite keeps deployment trivial.

University project with full role-based workflows: drafts, submissions, reviews, and scoring.

Executive summary

  • Project Role: Lead Full-Stack Developer (University Project)
  • Tech Stack: React, Node.js, Express, SQLite, Excalidraw, JWT
  • Challenge: Validating, serializing, and persisting complex diagram-based user submissions securely in real-time.

The problem

System design classrooms lack automated tools to submit, review, and evaluate vector diagram schemas. Students need to draw architecture maps and map structural links directly inside a web interface. The backend must ingest these complex vector canvases, validate the submission integrity, and manage workflows (draft, submitted, graded) without allowing unauthorized grade modifications or malicious payload execution via injection.

Constraints

  • Payload Validation Constraints: Vector diagram states exported from canvas modules are large, arbitrary JSON schemas. The backend must validate the structural integrity of these schemas without blocking Node.js event loops.
  • Role-Based Security Requirements: The grading state machine (draft → submitted → graded) must be strictly enforced. Students should never be able to mutate grade attributes or edit diagrams once submitted.
  • Storage Limits: Diagrams must be stored in a compact, indexable form to support fast page load times during peer review sessions.

Technical decisions

  • Excalidraw Integration: Selected Excalidraw for its lightweight, customizable React component library. It allows export of clean JSON scene data representing elements and bounds.
  • Express.js with JWT Security: Used Express.js for REST API endpoints. Enforced stateless JWT sessions containing role descriptors (student, instructor, admin) to authorize route levels securely.
  • SQLite for Relational Mapping: Used SQLite for instant file-based persistence. It easily maps scenario descriptors, student IDs, grading weights, and raw diagram strings within a unified relational structure.

Trade-offs and results

  • Canvas Serialization Strategy: Chose to store the entire Excalidraw canvas scene as a single compressed string field rather than parsing individual nodes into relational tables. While this limits native SQL querying of diagram shapes, it significantly reduced write complexity and database execution time.
  • Results: Successfully verified multi-role flows with zero security leaks. Handled hundreds of concurrent student submissions with responsive load times under 200ms per canvas.