UNISPACE

University of Melbourne students waste hours searching for study spaces. Libraries fill up silently, building occupancy is invisible, and there's no way to know which spaces have the amenities you need or how busy they'll be in an hour.

Built a privacy-first PWA with real-time occupancy heatmaps across 18 campus buildings. Client-side geofencing ensures GPS never leaves the device, while a crowd reporting system and multi-source data fallback chain keep the map useful even with zero active users.

UniSpace is a progressive web app that shows students where to find a seat on campus. The pilot campus is the University of Melbourne, Parkville, covering 18 buildings across the full campus.

Open the app and you see a full-viewport Mapbox map with building polygons color-coded by occupancy: green (empty), yellow (moderate), red (packed). Tap a building and a bottom sheet shows floor-by-floor breakdown, amenities, noise levels, and a 24-hour prediction chart. The "Find me a spot" feature recommends the best available space filtered by what you need (power outlets, quiet zones, group tables, accessibility) and how far you want to walk.

No account required. GPS coordinates never leave your device. Zone detection runs client-side via Turf.js point-in-polygon, and only a zone_id is broadcast. Session IDs rotate every 30 minutes. Zero telemetry. Users can report occupancy on a 1-5 scale with noise levels, save favorite spaces, and receive push notifications when spaces free up.

Data sources use a fallback chain: live crowdsourced occupancy, Google current popularity, EWMA predicted occupancy, Google typical popularity, or no data. The system gets smarter as more students use it.

Frontend is React 19 with TypeScript, Vite 8, and Tailwind CSS v4, built as a PWA. Mapbox GL JS renders the dark-v11 base map with custom building polygon layers and category-colored pins with clustering. State management uses Zustand with localStorage persistence.

The privacy layer is the core architectural constraint. All geofencing runs client-side using Turf.js point-in-polygon. The device determines which zone the student is in locally, then broadcasts only the zone_id to Supabase Realtime. No coordinates are ever sent to the server.

Backend runs on Supabase: PostgreSQL with Row Level Security (anonymous read-only, service-role writes), Realtime channels for live occupancy updates, and Deno Edge Functions for zone aggregation and Google Places API integration. Database schema: campuses > buildings > building_zones > zone_occupancy, plus prediction tables, Google caches, and user alerts.

Charts use Recharts for 24-hour occupancy predictions with historical pattern analysis. Animations use Framer Motion for bottom sheet transitions and map interactions. Google Places API provides baseline popularity data and floor-level views.