Library Seat Finder
A live floor map of the college library showing which reading-room seats are free, so students stop walking three floors to find out.
- Role
- Frontend and interaction design
- Year
- 2024
- Instruments
- React
- TypeScript
- SVG
- Supabase Realtime
- Tailwind CSS
IOverview
An interface exercise that turned into something genuinely useful: rendering the library's reading rooms as an interactive floor plan, with seat state updating in real time as people check in and out.
IIThe problem
During exam weeks the library fills unpredictably. The only way to find a seat is to walk each floor, and the floors that look empty from the stairwell usually aren't.
IIIThe approach
An SVG floor plan where each seat is a node bound to a realtime subscription. Occupancy is colour-coded with a pattern fallback so the map still reads for colour-blind users, and the whole thing is keyboard navigable — arrow keys move between seats, Enter claims one.
Key features
- Interactive SVG floor plan per level
- Realtime seat state without polling
- Colour plus pattern encoding for accessibility
- Full keyboard navigation across the map
- Occupancy trend by hour to help plan a visit
Moreobservations
Campus Event Platform
A single place for a college to publish events, take registrations and check attendees in — replacing the spreadsheet-and-WhatsApp workflow most departments run on.
Design System Starter
A small, opinionated component library — tokens, primitives and documentation — built to keep my own projects visually consistent instead of restyling buttons every time.