Calm Commute

everyone struggles with something; some struggle with physical disabilities, but some struggle with mental disabilities. Calm Comute helps you survive through these struggles!

Comment

Devpost Submission Content - CalmCommute

Inspiration

As someone who struggles with anxiety and panic attacks, I know firsthand how overwhelming daily commutes can be. Loud noises, crowded streets, and unexpected traffic can trigger my anxiety and sometimes even seizures. Traditional navigation apps like Google Maps or Waze only care about getting you there fast - they don't consider that the "fastest" route might take you through a noisy construction zone or a crowded downtown area that could trigger a panic attack.

I built CalmCommute because I needed a navigation app that actually cares about my mental well-being. I wanted something that would help me find routes that are not just efficient, but also calming and manageable for someone with anxiety. This isn't just a project for me - it's a tool I wish I had every day.

What it does

CalmCommute is a navigation app that prioritizes your mental health over speed. Here's what makes it special:

Stress-Aware Routing: Instead of just showing you the fastest route, CalmCommute visualizes routes with color-coded stress levels. Green segments mean low stress (quiet, calm areas), yellow is moderate, and red indicates high-stress areas (loud, crowded, busy). You can actually see which parts of your journey might be challenging before you start.

Interactive Map Experience: Click on any route segment to see its stress level, or click waypoint markers to zoom in and explore. It's like having a conversation with your route - you can understand it before you commit to it.

"I Need a Break" Feature: This is the feature I'm most proud of. If you're mid-commute and feeling overwhelmed, just click "I need a break" and the app automatically finds the nearest park, cafe, rest area, or gas station and reroutes you there - no questions asked, no confirmation needed. It just takes care of you.

Built-in Breathing Exercises: When you need to calm down, the app shows a smooth 4-7-8 breathing animation right on screen. No need to open another app or remember breathing techniques - it's right there when you need it.

Preference-Based Routing: You can tell the app what matters to you - less traffic, quieter routes, calming scenery, fewer people. It considers these preferences when suggesting routes.

How we built it

I built CalmCommute using React for the frontend and Node.js/Express for the backend. The magic happens through Google Maps Platform APIs:

  • Directions API: Gets the route data
  • Places API: Finds nearby rest stops when you need a break
  • Maps JavaScript API: Powers the interactive map experience

The stress analysis algorithm considers factors like route complexity, typical traffic patterns, and your personal preferences. The interactive features - clickable route segments, waypoint markers, and real-time updates - were built using React state management and Google Maps event handlers.

The breathing exercise uses CSS animations to create a smooth, calming visual that guides you through the 4-7-8 breathing pattern. The auto-reroute feature uses the Places API to search for parks, cafes, restaurants, gas stations, and rest areas within a 2km radius, then automatically calculates a new route.

Challenges I ran into

The biggest challenge was getting the Google Maps APIs set up correctly. There are so many different APIs (Directions, Places, Maps JavaScript) and each one has different requirements for API key restrictions. I spent a lot of time figuring out that HTTP referrer restrictions work for browser-based APIs but not server-side ones - that was a frustrating learning curve!

Another challenge was making the map truly interactive. I wanted it to feel like Google Maps - where you can click things and they respond. Getting the clickable route segments and waypoint markers to work smoothly, with proper zoom and info windows, took a lot of trial and error.

The breathing animation was also tricky - I wanted it to be smooth and calming, not jarring. Getting the timing right for the 4-7-8 pattern (4 seconds in, 7 seconds hold, 8 seconds out) while making it visually appealing was a challenge.

Accomplishments that Im proud of

I'm really proud that I built something that solves a real problem I face every day. This isn't just a hackathon project - it's a tool I'll actually use.

I'm especially proud of the "I need a break" feature. The fact that it automatically finds a rest stop and reroutes you without asking for confirmation means that in a moment of panic or overwhelm, you don't have to think - the app just takes care of you. That was really important to me.

I'm also proud of how interactive the map is. Being able to click on route segments to see stress levels, or click waypoints to zoom in, makes the app feel professional and polished. It's not just displaying a route - it's letting you explore and understand it.

The stress-color-coded visualization is something I haven't seen in other navigation apps, and I think it's genuinely useful for people with anxiety, sensory sensitivities, or anyone who just wants a calmer commute.

What i learned

I learned a ton about Google Maps Platform APIs - there's a lot more to them than I realized! Understanding the difference between browser-based and server-side API calls, and how API key restrictions work, was a big learning experience.

I also learned a lot about building interactive UIs with React. Managing state for map interactions, handling click events, and creating smooth animations all required me to think differently about how React components work together.

Most importantly, I learned that building something for yourself - solving your own problem - makes you more motivated and helps you build better features. Every feature in CalmCommute exists because I needed it.

What's next for CalmCommute

I have big plans for CalmCommute! Here's what I want to add:

Real-time Stress Detection: I want to integrate with fitness trackers or use phone sensors to detect when your heart rate spikes or you're showing signs of stress, and then automatically suggest taking a break.

Machine Learning for Personalization: The app should learn your preferences over time. If you always avoid certain areas or always prefer certain types of routes, it should remember that and suggest them automatically.

Community Features: I'd love to add a way for users to share "calm routes" with each other. Maybe you found a really peaceful way to get to work - share it with others who might benefit!

Better Stress Calculation: Right now the stress levels are somewhat basic. I want to integrate real-time traffic data, noise level data, and crowd density information to make the stress predictions more accurate.

Mobile App: A React Native version so you can use it on the go without needing a browser.

Voice Navigation with Calming Prompts: Instead of just "turn left in 200 feet," the app could say "turn left in 200 feet - you're doing great, this is a quiet area."

But honestly, the most important next step is getting feedback from other people who struggle with anxiety or sensory issues. I built this for myself, but I hope it can help others too. If even one person has a calmer commute because of CalmCommute, that would make all the work worth it.

How I implemented workshops:

using the knowledge i gained from the Ai workshop i was able to use cursor AI to help me debug my code that would take days to fix, cursor AI helped me finish this project on time and help sujest changes and helped me when i was stuck, i tried to limit usage of AI and kept the base code human written since this is my project. not an AI's, though i do not refuse the faact that i used Cursor AI to help debug code when i was stuck

Built with empathy, for people who need a calmer way to navigate the world <3

Built With

Share this project:

Updates