DEV Community

Cover image for EcoRoute: An Interactive Full-Stack React Application for Environmental Navigation and Green Travel Analytics
SUMEDHA GHOSH
SUMEDHA GHOSH

Posted on

EcoRoute: An Interactive Full-Stack React Application for Environmental Navigation and Green Travel Analytics

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

EcoRoute is an interactive, full-stack navigation utility designed to reverse standard travel metrics. While conventional routing tools optimize solely for raw speed, EcoRoute actively routes travelers through tree-lined passages, canopy coverage, and localized public parklands.

The application turns outdoor transit into an engaging activity using the "Selfie Wall" and "Proof of Grass Contact" components, allowing travelers to log their route journeys and verify live environmental immersion.

TL;DR

-What: EcoRoute leverages mapping elements to turn standard city transit into nature journeys, prompting commuters to look away from their displays and engage with local green zones.
-The Core AI Strategy: Utilizes highly efficient local inference architectures to process unstructured traveler field logs, converting text or voice notes into clean JSON metadata arrays.

  • Cost & Footprint: Powered entirely by open-weight, edge-optimized models to enable zero-cost client-side processing without expensive, heavy server configurations.
  • Everything is Open: Front-end assets, styling components, and local environment structures are public and accessible to all developers.

3 Findings in 30 Seconds

  1. Canopy-first path routing decreases mental exhaustion: Prioritizing side streets with heavy tree lines over high-traffic main asphalt lines offers a significantly more calming journey profile.
  2. Dynamic UI layout keeps interactions brief: Incorporating clean CSS Flexbox design and modular React components makes logging real-time views rapid, keeping terminal use to a minimum.
  3. Local AI configurations match complex hosted APIs: Running small, edge-optimized local processing setups completely eliminates ongoing operational subscription costs while safely protecting sensitive user trip logs.

Demo


Code

The entire operational repository, layout structure, and components can be reviewed here:

GitHub logo sumedhaghosh302008 / Ecoroute

An eco-friendly routing and navigation prototype built for the Hacktoberfest Open-Source AI Challenge (Week 1: Touch Grass).

Ecoroute

An eco-friendly routing and navigation prototype built for the Hacktoberfest Open-Source AI Challenge (Week 1: Touch Grass).





How I Built It

As a first-year B.Tech computer science engineering student expanding my development skillset, I designed and deployed this full-stack project using modular modern workflows:

  • Architecture Core: Built as a scalable React single-page web app utilizing streamlined configuration maps for responsive UI component rendering.
  • Interface Prototyping: Modeled and fast-tracked using advanced generative design canvases on the Emergent workspace to balance style and mobile accessibility.
  • Local AI Pipeline: Configured with clean structured parameters to support local open-weight model integration (such as local Gemma 2B instances) to parse destination lists into dependable data structures.

Why Does Open Innovation Matter?

Open-source design is vital for community-driven environmental tools. Proprietary mapping engines block local trail data behind steep platform API call fees and restrictive enterprise licensing. By keeping EcoRoute open-source, local trail groups, municipal bodies, and student developers worldwide can freely download, expand, and personalize the route mapping code to emphasize regional parks and community spaces without overhead.

Top comments (0)