Landing Page
Maps
Search
Add content
Raise baloon
Baloon Responses and reactions
Baloon Question
Post Responses

🚀 Livehoods

🧠 Inspiration

Livehoods was born from a desire to foster stronger, more connected local communities in an increasingly digital world. We envisioned a platform that transcends traditional social media by rooting interaction in place.

My goal was to create a real-time pulse of the neighborhood — where discovery is intuitive, expression is effortless, and the map becomes alive with people, questions, and shared moments.

📍 What it does

Livehoods is a hyperlocal, map-based social platform that brings the city to life through real-time, community-driven interaction.

Key Features:

🗺️ Explore in 3D: Navigate an immersive 3D map with terrain, landmarks, and hotspots
🎈 Ask with Balloons: Raise floating question balloons at real locations
📸 Share Live Moments: Post real-time photos, videos, and location updates
🔍 Discover Local Gems: Uncover businesses, landmarks, and hidden favorites
🚨 Receive Real-Time Alerts: Get notified of urgent updates or events nearby
❤️ Engage and React: Use emoji reactions and replies to posts and questions
🤝 Connect with Neighbors: Follow people and explore shared interests and zones

🛠️ How we built it

We built Livehoods using a modern, scalable full-stack:

Frontend: React 18 + TypeScript, styled with Tailwind CSS
3D Mapping: Mapbox GL JS with 3D terrain, camera transitions, and custom markers
State Management: Zustand for fast, modular state handling
Animations: Framer Motion for smooth and expressive UI interactions
Backend & Database: Supabase with PostgreSQL, Realtime, and Auth
Serverless Functions: Supabase Edge Functions to securely connect with Google Places API
Deployment: Hosted on Netlify with CI/CD for rapid iteration

⚠️ Challenges we ran into

Real-Time Sync: Making sure all users saw the same updates live on the map
3D Interactions: Managing camera transitions, clicks, and custom layers in Mapbox
Authentication + RLS: Setting up Supabase RLS while keeping the UX smooth and safe
Performance Optimization: Keeping the app fast despite many live elements on the map
Novel UX Concepts: Designing the “question balloons” to feel intuitive within a map interface

🏆 Accomplishments we're proud of

🌍 Built a stunning 3D map interface with real-time content flow
🎈 Created the balloon Q&A metaphor that blends fun with function
🚀 Delivered a fully operational live social map experience
🔒 Successfully implemented Supabase Auth, Realtime, and Edge Functions
✨ Achieved a modern, polished UI with smooth interactions and animations
🧪 Included a demo mode that works without Supabase credentials

📚 What I learned

In-depth use of Mapbox GL JS for dynamic geospatial interfaces
Mastery of the Supabase ecosystem, including Edge Functions and RLS
Structuring large-scale React apps with Zustand and Tailwind CSS
Iterative design process for user-centric features with real-world metaphors
Building a real-time connected frontend + backend stack that scales

🕰️ Personal Reflection

Two years ago, I tried to build Livehoods with a team of four developers. We spent six months wiring APIs, building auth, and integrating maps — but couldn’t launch due to performance and stability issues.

This version, built with tools like Supabase and Bolt, came together faster, stronger, and more aligned with the original vision.
Sometimes, the idea is right — you just need the right tools and timing.