SpiderChip
Key Features
- Custom Language & Runtime: A Python-inspired language parsed with
recursive-descent and executed locally in the browser for instant feedback.
- Interactive Visualization: A 2xN grid shows variable "chips" and a spider
avatar that animates each operation.
- Story Integration: "Memos" and dialogue moments unlock narrative context
between coding levels.
- Sandbox Mode: Fully configurable puzzle setup (variable names, inputs/outputs,
and object types (stacks,queues)) for exploration beyond core curriculum.
- Persistent Progress: User code and completion stats saved via Express/Prisma ->
PostgreSQL; JWT-secured API ensures seamless sync across sessions.
Background & Workflow
SpiderChip is a web-based programming tutorial game designed to teach 6th-10th grade students the
basics of real programming. The game combines a guided narrative (memos and visual-novel
dialogues) with interactive puzzles, allowing students to learn high-level programming concepts
in a gamified context.
After creating an account, players can navigate to the level selection page, the code sandbox
page, or the about page. From the level selection page, users can begin solving the puzzles and
reading the story beats. Each puzzle presents a VS Code style code editor alongside a "spider"
visualizer that steps through and animates the code. Hints, step-through execution, error
highlighting, and a "skip" option help struggling users. The sandbox mode lets users craft and
test their own custom puzzles.
Architecture & Tech Stack
Frontend: React (TSX) + Monaco editor + ReactMarkdown; dynamic UI powered by
CSSTransition for slide-in panels and Axios/Firebase for API calls.
Backend: Node.js/Express in TypeScript, stateless JWT auth, Prisma ORM over
PostgreSQL (AWS RDS), containerized with PM2 & Nginx reverse proxy on EC2.
Testing & CI: Jest + Test containers for backend; snapshot tests for React; Vite
for fast frontend builds; GitHub Actions for automated pipelines.
Deployment: Originally hosted at spiderchip.ddns.net (Docker on EC2), with Prisma
migrations and static asset serving via Ngix (no longer active)
Demo Information
Deployment of the demo is handled on Vercel.com. Due to the limitations of deployment, users are not
able to create accounts. Instead, user progress is stored in local storage, which users have the
ability to clear if they wish.
Future Work
- Instructor dashboards for classroom management
- Collaborative, multi-user coding challenges
- Rich artwork and smoother spider animations
- Expanded puzzle library and lesson-plan support
Credits & Team
Hannah Koehler - Frontend, UI/UX Design
Colin McGee - Puzzle Design, Custom Language, Story Beats, Level Completion Logic
Shreyas Shivakumar - Backend, DevOps, User Authentication, AWS Hosting
Daniel Tolbert - Backend, Data Management
