Projects
hackathon
data visualization
social impact

Building Vulnerability Atlas: 16 Hours to Transform How We Track Homelessness Data

How our team built an AI-powered solution at Hackfrontier 2025 to transform annual homeless population data into real-time monthly insights using Next.js, Mapbox, and Oxen.ai.

Jay Giang
July 10, 2025
7 min read
Building Vulnerability Atlas: 16 Hours to Transform How We Track Homelessness Data
Key takeaways
  • Rapid prototyping at hackathons can produce real solutions: we built a full-stack data visualization app overnight that addresses a critical social issue.
  • AI tools like Oxen.ai can transform unstructured city data into actionable insights, enabling monthly tracking of homeless populations versus annual reports.
  • The right tech stack matters: Next.js 15, React 19, Mapbox GL, and TypeScript enabled us to build a production-ready app under extreme time constraints.
  • Cross-functional teams excel under pressure: combining diverse skills in data science, frontend, backend, and UX led to our comprehensive solution.

What if we could track homeless populations monthly instead of yearly? This question drove our team to build Vulnerability Atlas during an intense 16-hour sprint at Hackfrontier 2025: Borderless Builders.

🚀 Try Vulnerability Atlas

🎯 Live Demo Available

Explore the interactive map, view time-lapse data, and see AI-powered insights

🔗 Launch Vulnerability Atlas Demo

The Setting

Hackfrontier brought together over 100 developers at Brain Corp in San Diego this July. The event, organized by ArkusNexus, Startup San Diego, and the Data Science Alliance, challenged teams to build solutions for real social problems.

Our team came together with one goal: tackle the Data Science Alliance challenge to help alleviate homelessness in San Diego. With diverse backgrounds in frontend development, data science, and UX design, we were ready to build something meaningful.

Team photo at Hackfrontier

Photo courtesy of SD Startup

The Challenge: Annual Data in a Monthly Problem

The Data Science Alliance presented us with a sobering statistic: 10,605 persons experienced homelessness in San Diego in 2024, with a 3% year-over-year increase. The challenge was to recommend new homeless service types and optimal deployment locations across San Diego County.

The core problem? Cities only receive comprehensive homeless population data once a year through point-in-time counts. But homelessness isn't static: it fluctuates monthly based on weather, economic conditions, and available services. We needed a way to bridge this data gap.

Available Resources:

  • 3 years of point-in-time count data (2023-2025)
  • Locations of current homeless services from 211 San Diego- Rent/housing burden data
  • Public transportation routes
  • Population demographics

Our Solution: Vulnerability Atlas

We envisioned Vulnerability Atlas as a real-time dashboard that city planners and service providers could use to make data-driven decisions about resource allocation. But how could we generate monthly insights from annual data?

The breakthrough came when we discovered San Diego's Get-It-Done system, a platform where citizens report city issues, including homeless encampments. These reports contained descriptions that, with the right analysis, could provide monthly population estimates.

Key Innovation: AI-Powered Data Extraction

This is where Oxen.ai became our secret weapon. Instead of manually reviewing thousands of complaint descriptions, we used Oxen.ai's platform to:

  1. Process natural language descriptions from Get-It-Done reports
  2. Extract population estimates using our intelligent scoring algorithm:
    • Priority: When descriptions contained specific numbers (e.g., "3 homeless individuals"), Oxen.ai extracted those exact values
    • AI Weighting: For descriptive language, we trained the system with contextual keywords on a 1-20 scale:
      • "large encampment" → 15-20 people
      • "encampment" → 8-12 people
      • "several tents/people" → 4-7 people
      • "small tent setup" → 2-3 people
      • "individual/person" → 1 person
  3. Generate monthly population estimates by geographic location

Oxen.ai dashboard showing our data processing

Technical Deep Dive: Building at Hackathon Speed

The Tech Stack

Choosing the right tools for a hackathon is crucial. We needed modern, reliable technologies that would let us move fast without sacrificing quality:

  • Next.js 15 with App Router: Latest framework features for optimal performance
  • React 19: Cutting-edge React with improved concurrent features
  • TypeScript: Type safety prevented countless bugs during rapid development
  • Mapbox GL JS: Professional-grade map visualization
  • D3.js: Data interpolation and color scaling for heat maps
  • Proj4: Converting coordinates from San Diego's EPSG:2230 to standard WGS84
  • Framer Motion: Smooth animations for the time-lapse feature
  • SWR: Efficient data fetching with built-in caching
  • Tailwind CSS v4: Rapid UI development with utility classes
  • Papa Parse: Robust CSV parsing for data ingestion

Architecture Highlights

Architecture Overview

Data Processing Pipeline

Our backend processed multiple data sources:

  1. Point-in-time counts → Zipcode-based choropleth base layer
  2. Get-It-Done reports → Individual location markers with AI-derived population estimates
  3. Transit data → Overlay showing accessibility
  4. Service locations → Categorized by type (shelter, food, health, employment)

Vulnerability Atlas showing the layered visualization

Building Under Pressure: The Development Sprint

Hour 0-2: Formation and Planning

After the challenge presentation at 4 PM, we quickly assembled our team and brainstormed approaches. The key was to divide tasks effectively:

  • Frontend team started on the map interface
  • Data team began processing CSV files
  • Backend team set up API endpoints
  • One member focused on Oxen.ai integration

Hour 3-8: Core Development

Pizza arrived at 6 PM, but we barely noticed. The room buzzed with focused energy as:

  • The map came to life with Mapbox
  • API routes started serving processed data
  • Oxen.ai began returning insights from complaint descriptions
  • The UI took shape with Tailwind CSS

Hour 9-12: Integration Challenges

Post-midnight brought integration challenges:

  • Coordinate system mismatches (solved with Proj4)
  • Performance issues with large datasets (fixed with data aggregation)
  • Time-lapse synchronization (resolved with React state management)

Hour 13-16: Polish and Prepare

As dawn broke, we:

  • Added the recommendation engine
  • Implemented smooth animations
  • Prepared our demo presentation
  • Fixed last-minute bugs

Key Features We Delivered

1. Dynamic Heat Map Visualization

  • Zipcode-based choropleth showing population density
  • Color interpolation indicating severity levels
  • Real-time updates as users change time periods

2. Time-Lapse Functionality

View population changes from 2023-2025 with smooth transitions, revealing seasonal patterns and trends.

3. Multi-Layer Data Display

  • Base layer: Point-in-time count data
  • Dot overlay: Get-It-Done reports sized by AI-predicted populations
  • Transit routes: Showing accessibility
  • Service locations: Categorized by type with filtering

4. AI-Powered Recommendations

Based on population density, transit access, and existing services, our system recommends:

  • Optimal locations for new services
  • Types of services needed (shelter, food, healthcare)
  • Capacity requirements

Note: This recommendation feature is conceptual and not yet implemented, but represents our vision for the platform's future capabilities.

5. Monthly Insights Dashboard

Transform annual data into monthly estimates, enabling more responsive service planning.

Impact and Learnings

Technical Achievements

  • Built a production-ready application during the hackathon
  • Successfully integrated AI for data processing
  • Created an intuitive interface for complex data
  • Demonstrated the power of modern web technologies

Social Impact Potential

Vulnerability Atlas could help San Diego:

  • Respond to homeless population changes in near real-time
  • Optimize service placement based on actual need
  • Track the effectiveness of interventions
  • Allocate resources more efficiently

Personal Growth

This hackathon reinforced several key lessons:

  1. AI amplifies capabilities: Oxen.ai turned unstructured text into actionable data
  2. Team synergy matters: Our diverse skills created a sum greater than its parts
  3. Pressure creates focus: Time constraints forced rapid decision-making
  4. Purpose drives performance: Working on a social issue motivated us through the night

Acknowledgments

This incredible experience wouldn't have been possible without:

The Bigger Picture: From Hackathon to Real World

Hackathons aren't just about winning prizes (though that's nice too!). They're about pushing boundaries, learning new technologies, and sometimes creating solutions that can make a real difference.

Vulnerability Atlas started as a hackathon project, but its potential extends far beyond those initial hours. With further development, it could become a tool that helps cities across the country better serve their most vulnerable populations.

Ready to Build Something Impactful?

This hackathon reminded me why I love being a developer: the ability to create solutions that matter. Whether it's a weekend sprint or a months-long project, the right combination of technology, teamwork, and purpose can create remarkable results.

Need help building data-driven applications or integrating AI into your business? I specialize in rapid prototyping, modern web development, and creating solutions that make a difference.

Let's discuss your next project and see how we can transform your ideas into reality.


Built with: Next.js 15, React 19, TypeScript, Mapbox GL, D3.js, Oxen.ai, and a lot of caffeine.

JG

Jay Giang

Full-Stack Developer & AI Specialist

Based in San Diego, I help businesses leverage AI and modern web technologies to automate processes and accelerate growth.