Concrete demo
The screenshot and live site show extracted flyer cards, not an abstract product mockup.
Pablo Zavala · AI Safety Evaluation · Research Engineering
CMU Event Compass: Claude Hackathon Prototype
A prototype that turns a photo of a campus poster wall into structured, personalized listings. Claude vision extracts one listing per flyer, a deterministic in-browser ranker orders the results by chosen interests, and the app ships as a static export with no backend.
Claude vision extracts flyer cards; static export runs with a sample board and no backend
The demo proves the sample-board extraction workflow, not live campus coverage.
Role: Hackathon builder: extraction flow, ranking logic, and static demo.
How to Inspect This Work
Model use
Claude vision performs JSON-schema extraction with bounding boxes, while ranking stays deterministic in the browser.
Deployment limit
The public demo uses a sample board and no backend, so it proves the extraction workflow rather than live campus coverage.
Case Study
Problem
Campus opportunities often live on physical poster walls, so students miss events, jobs, and studies outside their usual buildings.
Setup
The prototype starts from a photo of a poster wall and turns the flyers into structured event cards.
Method
Claude vision extracts JSON-schema flyer records with bounding boxes, then a deterministic browser-side ranker orders the results.
Result
The live static demo runs with a sample board, no backend, and no API key.
Limitation
It is a hackathon prototype, so the public demo uses a sample board rather than live campus ingestion.
Evidence
The public repository and GitHub Pages demo show the extraction flow and static export.
Key Outcomes
- Built with Claude at the CMU Claude Hackathon in November 2025
- Vision extraction with JSON-schema structured outputs, including per-flyer bounding boxes
- Static export with no backend; live demo on GitHub Pages
Methods
- Claude vision
- Structured outputs
- Next.js static export
- Deterministic ranking