Hi, I'm Hannah!

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

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

• Set up and styled the frontend UI (buttons, wireframes, hover effects, fonts, color scheme)
• Created game assets: LevelSelectButtons, LevelDetailsPopUp paper, PuzzleVisualization chips
• Implemented logout flow and core UI for level selection and PuzzleUI (inputs, visualization, output, pause menu)
• Built and animated the PuzzleVisualization component
• Conducted MR reviews and UI-related bug fixes

Colin McGee

• Defined project goals and designed the custom language (parser, linter, runtime engine)
• Authored the language manual, story lore, memos, and dialogue scripts
• Designed all puzzles and integrated them (including hints, sandbox mode, skip/clean-view, animations)
• Implemented level completion logic, code saving/loading, and robust PuzzleUI features
• Fixed bugs and enhanced performance (scrolling, animation speed selection, etc.)

Shreyas Shivakumar

• Built the backend service with Node.js/Express and Prisma ORM
• Implemented authentication, middleware, error handling, and API endpoints
• Configured Jest with Testcontainers for backend tests and added snapshot tests for the frontend
• Initialized the Monaco code editor and set up Axios for API communication
• Provisioned AWS infrastructure: RDS database, EC2/PM2 hosting, Nginx reverse proxy with SSL, and CI pipeline

Daniel Tolbert

• Selected the technology stack and set up the development database via Supabase
• Defined database models and connected them to backend object types
• Implemented the About page and core backend data services (level select, progress save/load)
• Reviewed merge requests and contributed to backend architecture

Background & Workflow

Architecture

This project uses Django's ORM to model Pets, Conditions, Vaccines, Users (Owners, Vets, Admin), and FeedItems. Django's authentication and permission framework is used to enforce access rules. PostgreSQL relational tables is used to provide performant queries. On the frontend, JavaScript and AJAX are used to power dynamic "Add Condition" and "Add Vaccine" forms.

Demo Information

Deployment of the demo is handled on Render.com. Due to the limitations of deployment, users are not able to upload files or pet photos.

Future Work

• Messaging/Request service that allows users to request non-emergent advice from verified veterinarians.
• In-app notifications
• Mobile-first responsive redesign.
• Support file uploading