GreenMiles

Inspiration

We wanted to turn everyday walks into real climate action. GreenMiles blends movement, learning, and visible impact to make sustainability feel rewarding and personal.

What it does

• Rewards walks with points that plant real trees.
  
• Offers curated Green Routes or custom routes.
  
• Uses AR to scan local ecosystems and trees.
  
• Lets users view planted trees in VR.

How we built it

• Frontend: Next.js (App Router), React, TypeScript, Tailwind.
  
• AR: Camera + HTML5 Canvas overlays for tree/air visuals.
  
• VR: Embedded 360° panoramas.
  
• Maps & Routes: Google Maps API for geolocation, route design, and greenway overlays.
  
• Data: OpenWeather/Air Quality APIs; custom CO₂/O₂ estimation from DBH.
  
• State/Utils: React hooks; lightweight stores.
  
• Deployment: Vercel.

Challenges we ran into

• Hiding third-party VR UI chrome while keeping interactions smooth.
  
• Calibrating camera FOV and distance for DBH accuracy.
  
• Normalizing noisy air-quality data across devices/locations.
  
• Mobile performance with AR overlay + live video.

Accomplishments that we're proud of

• A working loop where walking -> points -> real trees planted.
  
• AR tree measurement that estimates CO₂ absorbed / O₂ produced.
  
• Clean, mobile-first UI that feels playful but informative.

What we learned

• Practical AR/VR integration in the browser.
  
• Designing incentives that nudge greener choices.
  
• Trade-offs between accuracy, privacy, and UX in environmental data.
  
• Combining Google Maps API with air-quality data for “green” navigation.

What's next for GreenMiles

• Partner APIs for verified tree-planting and impact certificates.
  
• Social challenges, teams, and local leaderboards.
  
• Better AR calibration (auto-FOV/device profiles) and offline mode.
  
• More route intelligence: air quality + shade + traffic safety.

Built With

• 360cities-embed-api
• expo-camera
• google-maps
• next.js
• openweather-api
• particle
• react
• tailwind-css
• typescript
• webxr-api