Architex: System Design Practice Platform

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

tldr: A system design practice platform built around Excalidraw. Students draw a design, submit it, and get a rating with written feedback. The draft, submit, grade workflow lives on the server, so the client can’t skip a step.

Problem

System design is taught with diagrams, but diagrams usually travel as screenshots in a chat. There is no draft history, no clear moment when work is handed in, and no single place for feedback. I wanted one tool where a student picks a scenario (a rate limiter, a URL shortener, a payment processor), draws the design, submits it, and gets it back graded.

Constraints

• Diagrams are large, arbitrary JSON. An Excalidraw scene is a list of elements with positions, bindings, and styles. The backend has to accept it without trusting its shape.
• The workflow is enforced server-side. A design moves DRAFT → SUBMITTED → GRADED. After submission the student can’t edit it, and only an admin can grade it.
• Deployment stays trivial. A course project gets run on a reviewer’s laptop, so no database server and no container stack.

Decisions

• Excalidraw as the canvas. It ships as a React component and exports clean scene JSON, so the editor was a dependency, not a subproject.
• Two roles, checked on every route. Users write designs and admins review them. The JWT carries the role, middleware verifies it, and the design routes answer 403 when an admin tries to edit a draft or a user opens someone else’s work.
• SQLite with CHECK constraints. Roles (USER, ADMIN), design status, scenario difficulty, and the 1 to 5 rating are constrained in the schema, so a bad value fails at the database even if a route check is missed.
• One JSON string per diagram. The whole scene is stored in a single field instead of being split into tables of shapes. The API rejects anything that isn’t a stringified elements array.

Outcome

Students draft, submit, and read feedback. Admins filter submissions by status and grade them. Storing each scene whole kept a save to one row and one query, at the cost of never querying inside a diagram with SQL. For a review workflow that was the right trade: nobody asks the database which designs contain a load balancer.