Sonar
TYPE
web
DURATION
3 weeks
COMPLETED
March 2024
LANGUAGE
TypeScript
MISSION BRIEF
Sonar is a unique geo-social platform that allows users to record and share voice messages that are pinned to their real-world locations. Built with modern web technologies, Sonar creates an immersive auditory map where users can leave audio notes, poems, memories, or shout-outs—each anchored in space. Listeners nearby can tune in and discover what's been said in their current area. The platform includes custom-designed map styles like High Contrast, Normal, and Watercolor, with support for dark and light modes, enhancing the experience for different moods and environments.
VISUAL_EVIDENCE
CORE FEATURES
- Record and share voice messages tied to your current location
- Explore voice notes left by users nearby
- Custom map styles: High Contrast, Normal, and Watercolor
- Dark and Light mode support for all maps except Watercolor
- Interactive map interface with pinned voice locations
- Anonymous or signed-in posting
- Mobile responsive design
- Geofencing to control how far messages can be heard
TECH STACK
- >Next.js for server-side rendering and routing
- >Mapbox GL JS for interactive custom map rendering
- >Tailwind CSS for responsive UI with dark/light mode toggling
- >Firebase Authentication for optional user sessions
- >Firestore for storing geolocated audio data
- >Geolocation API to retrieve user position
- >Blob and Web Audio APIs for client-side recording and playback
- >Modular map style engine for switching visual themes
Operational Hurdles
Attaching audio data to precise geographic coordinates
SOLUTION_PROTOCOL: Combined geolocation API with Firestore and Mapbox pins, synchronizing location and voice metadata
Implementing real-time audio discovery based on proximity
SOLUTION_PROTOCOL: Used geohashing and bounding-box filtering to serve nearby messages efficiently
Handling voice uploads and optimizing playback performance
SOLUTION_PROTOCOL: Used Blob storage with audio compression and streaming for smooth mobile experience
Creating visually engaging map themes with accessibility in mind
SOLUTION_PROTOCOL: Designed and implemented custom Mapbox styles with built-in light/dark mode toggling