Hearth

Predict. Prevent. Protect

Comment

Inspiration

Globally, over 300 million people experience absolute homelessness, and about 3.4 billion people — over 40% of the world's population — are affected by a severe housing crisis marked by soaring costs, inadequate living conditions, and lack of basic services. In the United States alone, over 653,000 people experience homelessness on any given night, and one in five is a child. Cities spend an average of $45,000 per homeless individual every year on emergency shelters, hospital visits, and legal fees, yet they spend almost nothing on prevention. At the same time, potholes, broken drainage pipes, and neglected infrastructure cost cities millions more, leaving citizens waiting months for basic repairs. We realized something fundamental: the problem isn't a lack of resources. It's a lack of connection. Citizens don't have a direct way to report issues to the right officials. Officials don't have a unified platform to track and respond to problems in real time. Departments operate in silos. Problems fall through the cracks. That's why we built Hearth — a dual-purpose civic platform that connects citizens directly with city officials to solve both housing crises and infrastructure issues, starting locally but built for the world.

What It Does

Hearth is a three-portal platform that serves everyone in the ecosystem. The Landing Page introduces the problem and solution with emotional storytelling. The Citizen Portal allows users to report housing or infrastructure issues, upload photos, and track status in real time. The Officer Portal provides a live map with color-coded dots, dispatch teams, and PDF report generation. Key features include a live map with color-coded dots where Red means Pending, Orange means Dispatched, Yellow means In Progress, and Green means Resolved. It also includes an Amazon-Style Status Tracker with four stages: Submitted, Dispatched, In Progress, and Resolved. Citizens can upload photos as evidence, officials can send SMS alerts to outreach teams, and PDF reports can be generated for city officials. Citizens can rate resolution through a satisfaction survey, and issues auto-reopen if unsatisfied. The Mayor Analytics Dashboard tracks money saved, resolution times, and satisfaction rates.

How We Built It

Hearth is a full-stack, three-portal platform with real-time communication between citizens and officials. The frontend was built with React 18, Vite, Tailwind CSS, Framer Motion, Leaflet for maps, and Recharts for analytics. The backend uses Python FastAPI with WebSockets for real-time updates. We deployed the frontend on Vercel and the backend on Render. For AI and animation, we used Google Veo 3.1, Nano Banana, ElevenLabs for voiceover, and CapCut for video editing. Our development process started with planning user stories for citizens, officers, and mayors. We then built the FastAPI backend with REST endpoints and WebSocket for real-time updates. The React frontend was developed with Tailwind CSS and Framer Motion animations. We integrated Leaflet for free, no-API-required map visualization. Finally, we deployed the backend to Render and frontend to Vercel, and created an explainer video using AI tools.

Challenges We Ran Into

Building a platform that connects citizens and officials in real time came with its own set of challenges. Implementing WebSockets for instant communication between the citizen and officer portals required careful handling of connection states and reconnection logic. Deploying the full-stack application across two different platforms — Vercel for frontend and Render for backend — meant managing CORS configurations and environment variables to ensure seamless communication between services.

For the explainer video, we faced additional hurdles. AI video generation safety filters repeatedly blocked our story because it involved a child in vulnerable situations. To work around this, we switched to generating static images using Nano Banana, animated them in CapCut, and added a narrated voiceover to bring the story to life. Character consistency across scenes was another challenge, which we solved by using reference images and Google Veo's Ingredients to Video feature to keep characters looking the same throughout. Free tier limitations forced us to strategically combine multiple free tools including Canva for editing

Accomplishments That We're Proud Of

We built a fully functional, deployed, end-to-end platform with three portals including Landing, Citizen, and Officer. We integrated real-time map tracking with color-coded status indicators. We created an Amazon-style status tracker that builds citizen trust. We connected housing and infrastructure issues into one unified platform. We demonstrated $41,500 in cost savings per family through prevention. We produced a 5-minute emotional explainer video using AI tools. We deployed the project live and fully accessible. We built a complete authentication system for 10+ officials. We implemented photo upload, PDF export, and SMS simulation features.

What We Learned

User experience matters — citizens need a simple, mobile-friendly interface while officials need a powerful, data-driven dashboard. Real-time data is everything — WebSockets and live maps transform static reports into actionable insights. Transparency builds trust — when citizens can track their issue like an Amazon package, they feel heard. Prevention is cheaper than reaction — our cost analysis shows that cities save $41,500 per family by preventing homelessness before it happens. Collaboration is key — connecting citizens, officials, and departments requires a platform that speaks everyone's language. AI tools are powerful but have limits — safety filters protect users but can block legitimate storytelling, and we learned to adapt creatively.

What's Next for Hearth

We plan to build mobile apps for Android and iOS. We want to add advanced analytics dashboard with predictive AI. We will implement SMS and Email notifications for citizens. We plan to add multi-city support with city-specific data. We want to integrate with real city APIs including 311 systems and housing databases. We will add AI-powered risk prediction to identify at-risk families earlier. We plan to add multi-language support for diverse communities. We will implement real-time resource allocation based on map data. Thank you for your time and attention. Hearth is our vision for smarter, safer, more responsive cities. Predict. Prevent. Protect.

Built With

Share this project:

Updates