VibeMap

Vibe Check your city, discover spaces that match your energy.

Comment

Inspiration

We were motivated by the observation that while maps tell us where things are, they rarely convey how spaces feel. As students and community members, we’ve all experienced places that feel confusing, draining, or uplifting. Traditional reporting tools focus on incidents or problems, which can unfairly label neighborhoods or businesses. Vibemap was created to explore a more human-centered approach, capturing subjective feelings through emojis and soft colors that communicate insights ethically and empathetically.

What It Does

Vibemap allows users to interact with a map by clicking a location, selecting an emoji to represent its “vibe,” and optionally adding a short note. These submissions are stored in real time and aggregated to produce soft heatmaps and emoji markers, reflecting patterns of emotional energy rather than individual reports.

Key features include:

  • Emoji-based reporting for intuitive emotional input
  • Pastel-colored heatmaps representing a spectrum of vibes (from “off-vibe” to “bright”)
  • Thresholded aggregation to prevent single submissions from dominating
  • Real-time updates via Firebase Firestore
  • Lightweight, responsive design using Next.js and Tailwind CSS
  • Map rendering with Leaflet.js and OpenStreetMap

This approach allows users to share emotional experiences safely, while communities and planners can understand public space dynamics without labeling or stigmatizing areas.

Challenges

Building Vibemap presented several challenges:

  • Technical: Integrating real-time updates, heatmaps, and emoji markers in a short timeframe.
  • Ethical design: Avoiding harsh colors or judgmental labels to prevent misinterpretation of vibes.
  • Time constraints: Completing a full-stack location-based app within a hackathon schedule.
  • Team coordination: Dividing frontend, backend, and design tasks while integrating features seamlessly.

What We Learned

Through the process, we gained:

  • Technical skills: Next.js, Tailwind CSS, Leaflet.js, OpenStreetMap, Firebase Firestore, and real-time aggregation logic.
  • Community insights: Design choices like color, wording, and aggregation carry social and ethical implications. Framing data as subjective feelings reduces harm and bias.
  • Teamwork lessons: Effective coordination, balancing technical feasibility with social responsibility, and making design decisions collaboratively under tight deadlines.

What’s Next

Future directions for Vibemap include:

  • Showing time-based trends of emotional patterns throughout the day
  • Enabling community insights and discussions without exposing individual reports
  • Integrating Vibemap as a layer on existing map platforms
  • Piloting the app with youth groups, student organizations, or city planners for real-world feedback

Vibemap is an experiment in empathetic mapping, demonstrating how technology can help communities understand shared experiences of public spaces without amplifying harm or judgment.

Tools & Disclosures

  • Built with Next.js, Tailwind CSS, Leaflet.js, OpenStreetMap, and Firebase
  • AI tools were used for brainstorming, coding and technical writing support
  • No individual data is exposed; all visualizations are aggregated to preserve privacy
Share this project:

Updates