AutoRoute+

• 

  Output Display

• 

  Input screen

Inspiration

Commuters today only get one type of suggestion from map apps: the fastest route. But people don’t always want fast. Sometimes they want:

• the safest path
• the quietest streets
• the cleanest air
• the most scenic experience AutoRoute+ was born from the idea that commuting should feel personal, intentional, and human, not just optimized for speed.

What it does

AutoRoute+ is a smart, personalized routing web app that:

• Lets users choose their city, region, transportation mode, and route type
• Generates routes using a multi-city mock mobility database
• Provides explanations for each waypoint (noise level, scenic value, traffic flow, etc.)
• Includes a clean UI with:
• - Login screen
• - Route creation screen
• - Route result display
• - Dark mode Everything runs fully client-side — no backend needed. ## How we built it HTML, CSS, JavaScript for the structure, design, and logic A custom locations database covering:
• Washington → Arlington, Georgetown
• New York → Manhattan, Brooklyn
• A separate explanations database mapping each waypoint to a human-readable insight
• JS functions to:
• - Load regions based on selected city
• -Generate routes based on user preferences
• - Display dynamic expandable route cards
• • Persist navigation across pages

• A minimal UI framework with responsive styling and dark mode support

  Challenges we ran into

• Creating a multi-page flow only using front-end code

• Making the dark mode toggle work across screens

• Ensuring the routing algorithm selected correct waypoints

• Designing a modern UI without breaking layout consistency

• Mapping dozens of waypoints to meaningful explanations

• Debugging display issues when switching screens

  Accomplishments that we're proud of

• Fully functional routing prototype built from scratch

• Clean and modern UI with smooth screen transitions

• Multi-city routing with multiple transport modes

• Automatically generated waypoint explanations

• Intuitive user flow (Login → Preferences → Route)

• No backend required — everything works locally

• Easily extendable for more cities or modes

  What we learned

• How to architect front-end projects with multiple screens

• How to build modular mock databases

• Best practices for route selection algorithms

• The importance of UI consistency and user experience

• How to rapidly prototype a full product for a hackathon

• Why personalization in transportation is essential

  What's next for AutoRoute+

  Integrate real-time city data (traffic, noise, AQI) Add AI-powered route scoring Expand the database to more major cities Add user accounts to save commute preferences Mobile app version for iOS/Android Weather-aware routing recommendations Add safety-based routing (streetlights, foot traffic, crash data) “Mood-based” route modes (quiet, scenic, low stress)

Built With

• css
• html
• javascript