BruinPOV

Interactive Map
Landing Page

Inspiration

UCLA is full of places that mean different things to different people: a bench where someone made a lifelong friend, a lecture hall tied to academic struggle, or a quiet corner where someone found peace during a difficult time. Yet these stories are invisible.

What it does

We built a web application that combines mapping, media recording, and cloud storage into a single interactive experience. Users can: -Click anywhere on the map.

-Record an audio story directly in the browser.

-Upload the recording.

-Allow others to discover and listen to it later.

How we built it

React + Vite for fast development

Leaflet.js for interactive mapping

Browser MediaRecorder API for audio capture

Component-based UI for map interaction and playback

Supabase Postgres database for metadata storage

Supabase Storage buckets for audio files

Challenges we ran into

Working with the MediaRecorder API required handling microphone permissions, recording lifecycle states, and converting audio blobs into uploadable files. Managing asynchronous recording events while keeping the UI responsive was one of the biggest hurdles.

Accomplishments that we're proud of

Turning an idea into a working product in one sprint, and transforming a conceptual idea into a fully functional, end-to-end web application.

What we learned

Full-stack integration, human centered design, and collaborating development under time constraints. We also learned how powerful spatial context is for storytelling.

What's next for BruinPOV

Next step is improving the storytelling experience itself by adding video support alongside audio recordings, user accounts and profiles, story reactions and bookmarking, search and filtering, and expanding the locations.