Urban Calm Finder

An AI-powered tool to help neurodivergent individuals find calm routes and places by detecting and avoiding overstimulating urban zones.

Comment

Inspiration

I wish someone had made this app the day I arrived to live and work in downtown San Francisco. Sometimes I just want to escape the Salesforce tower, Battery Street, or the financial district. I find myself consistently looking for an ‘escape route.’ Other times, I’d just be indoors to avoid sensory overload. The inspiration behind the Urban Calm Finder came from my lived experience and a desire to make urban environments more accessible and less stressful, particularly for neurodivergent individuals. Cities are often a barrage of sensory information, from loud traffic to bright lights and unpredictable crowds, which can be overwhelming. I saw an opportunity to use technology not just for A-to-B navigation, but to find paths with the least resistance from a sensory perspective. The core idea was to create a tool that acts as an empathetic guide, helping users find pockets of peace and navigate their city with more confidence and less anxiety.

What it does

Urban Calm Finder is a responsive Progressive Web Application that helps users discover quiet, low-stimulation places and movement routes. Here’s the user journey:

Search: A user enters a starting location (or uses their device's geolocation) and selects the type of calm place they're looking for, like a 'Quiet Park' or a 'Cozy Cafe', with an option for custom input.

AI Analysis: The application sends this request to the Google Gemini API. The AI, acting as a "neuro-inclusive urban planner," analyses the area to find a suitable destination and generates a walking route that avoids major roads and other sources of sensory stress.

Display Results: The result is displayed on a results page featuring: An interactive Google Map showing the destination marker and the recommended route polyline. Details about the place, including its name and address. An AI-generated "Calm Reason" explaining why that specific spot was chosen. Community-sourced ratings on factors like noise, crowds, and visual stimulation. Turn-by-turn directions for the calm route.

Offline Capabilities This can be used in areas with little or no Internet connectivity

Save Result Users can save the results of their favourite spot and path.

Community Feedback: Users can submit their 1-to-5-star ratings for the sensory experience of a place, which helps refine future suggestions for the entire community.

AR View (Experimental) An Augmented Reality feature uses the phone's camera and motion sensors to provide an overlay that helps the user find the direction of their destination in the real world.

How we built it

The application is a full-stack project built with a modern, integrated toolset:

Frontend: The user interface is built with React and TypeScript, providing a robust and type-safe foundation. Tailwind CSS for rapid, utility-first styling to create a clean, responsive, and accessible design, including a dark mode.

Generative AI: The core logic is powered by Google's Gemini API (gemini-2.5-flash). We engineered a detailed system prompt and a strict responseSchema to ensure the AI returns reliable, structured JSON data containing the route, destination details, and qualitative explanations.

Mapping: We used the Google Maps JavaScript API to visualise the data. This includes rendering custom-styled maps for light and dark themes, drawing the route with Polyline, and marking the destination with MarkerF.

Backend & Database: The backend is composed of Vercel Serverless Functions that handle community feedback. The data itself is stored and managed in a Supabase (PostgreSQL) database, which the serverless functions interact with to fetch average ratings and submit new ones.

Augmented Reality: The AR view is built using standard Web APIs, including navigator.geolocation for location, navigator.mediaDevices for camera access, and DeviceOrientationEvent for compass/motion data.

Challenges we ran into

Consistent AI Output: Initially, getting the AI to consistently return perfectly formatted JSON with all necessary fields (especially a valid routePath array) was a challenge. This required significant prompt engineering, refining the systemInstruction, and creating a very specific responseSchema. Wallbacks were also built in, like creating a simple destination marker if the routePath was unexpectedly empty.

Serverless Function Deployment: Encountered a recurring "File not found" error with our API routes on deployment. This is a common issue where serverless environments fail to bundle dependencies correctly. We solved this by restructuring our project and co-locating the shared Supabase client library within the /api directory, ensuring it was always bundled with the functions that required it.

Cross-Browser AR: Implementing the AR feature was complex due to inconsistencies in how different browsers and devices handle permissions and report sensor data (e.g., compass heading on iOS vs. Android). The code required conditional checks and fallbacks to create a functional, if experimental, experience.

Accomplishments that we're proud of

A Truly Innovative Use of AI: Incredibly proud of applying a powerful generative AI to a nuanced, socially impactful problem. Instead of just another chatbot, an AI-powered tool that performs a complex spatial and qualitative analysis to improve people's lives.

A Polished and Empathetic UX: A seamless, intuitive, and calming user experience from start to finish. Features like the smooth page transitions, animated loader, clear error handling, responsive design, and thoughtful dark mode were all intentional choices to create a low-stress environment.

Building a Community Feedback Loop: The integration of Supabase to allow users to rate places is a major accomplishment. It transforms the app from a static tool into a dynamic, community-driven platform that gets smarter and more reliable with every piece of feedback.

Full-Stack Integration: Successfully weaving together the frontend (React), AI (Gemini), mapping (Google Maps), and a database backend (Supabase) into a single, cohesive application was a significant technical achievement.

What we learned

The Power of Structured AI Output: How crucial and powerful the responseSchema feature is for building real-world applications with AI. Forcing the AI to conform to a strict data structure is the key to moving from novel demos to reliable, data-driven products.

Serverless Architecture Nuances: Firsthand experience in debugging common serverless deployment issues. Lessons about project structure and dependency management for these environments.

Designing for a Specific Need: Building with a clear user group (neurodivergent individuals) in mind guided every decision. It reinforced the lesson that the most impactful products often come from deep empathy and a focus on solving a specific, meaningful problem.

What's next for Urban Calm Finder

With many ideas for the future, and are excited about the potential to grow the platform:

In-person assessment and certification Introduce "The Neuro-Inclusive" stickers and pins to physically map public and private spaces and certify them 'neuro-inclusive'. These data will be synced with the Google Maps team so map users can understand the neuro-inclusivity or otherwise of their intended path and destination.

Deeper Personalisation: Allow users to specify why they need calm (e.g., "avoid loud noises," "avoid bright lights," "avoid crowds") and feed these preferences into the Gemini prompt for hyper-personalised routes.

Time-Sensitive Suggestions: Integrate with Google Maps' "Popular Times" data to suggest routes and places that are calm at the specific time of the search.

User Accounts & Saved Places: Introduce user profiles to allow people to save their favourite calm spots and routes for quick access.

Expanded Categories: Add more niche categories based on user feedback, such as "sensory-friendly playgrounds," "quiet museums," or "pet-friendly calm spots."

Enhanced AR Navigation: Evolve the AR view from a simple pointer to full-fledged turn-by-turn directions, overlaying the route path onto the camera feed.

Built With

  • ar
  • geminiai
  • geminiapi
  • mapsjavascriptapi
  • react
  • supabase
  • tailwindcss
  • typescript
  • vercel
  • vite
Share this project:

Updates