GreenRoute

GreenRoute:A NextJs app deliver real-time low-pollution,high-shade routes by fusing live air-quality,tree-canopy,and weather data,keeping you healthier,cooler,and confident on every commute.

Comment

🌱 GreenRoute: A Journey Through Environmental-Aware Route Planning

💡 The Inspiration

Living in an urban environment, I became increasingly aware of how my daily commute choices affected both my health and the environment. Every morning, I'd walk to work through busy streets, often noticing the stark difference in air quality between tree-lined paths and major roads. The idea struck me: What if technology could help people make healthier, more environmentally conscious routing decisions?

The concept evolved from a simple question: "Can we build something that prioritizes clean air and shade over just distance?" This wasn't just about getting from Point A to Point B fastest—it was about getting there healthiest.

🎯 Vision and Goals

I set out to create GreenRoute, a Progressive Web App that would:

  • Visualize environmental data in an intuitive, actionable way
  • Provide intelligent route alternatives that consider air quality and shade
  • Make environmental awareness accessible to everyday commuters
  • Demonstrate how technology can promote sustainable urban mobility

🛠️ The Building Process

Phase 1: Foundation and Architecture

Technology Stack Selection:

  • Next.js 15 for the full-stack framework (SSR, API routes, PWA capabilities)
  • React 19 for the component-based UI
  • Tailwind CSS for rapid, responsive styling
  • Initially planned Mapbox for mapping (later switched to OpenStreetMap)

Core Architecture:

Frontend: Interactive React components
Backend: Next.js API routes for data processing
Mapping: Real-time visualization of environmental data
Algorithm: Custom route optimization with weighted scoring

Phase 2: User Interface Development

I focused on creating an intuitive user experience:

Landing Page (/):

  • Clean, modern design showcasing key features
  • Clear value proposition and call-to-action
  • Mobile-first responsive design

Route Planning Interface (/search):

  • Interactive map with click-to-set markers
  • Real-time preference adjustment with sliders
  • Side-by-side route comparison
  • Environmental data overlay

User Dashboard (/dashboard):

  • Personal statistics and achievements
  • Gamification elements to encourage usage
  • Historical route data and environmental impact

Phase 3: Environmental Data Integration

Air Quality Visualization:

  • Color-coded sensor markers (Green/Yellow/Red based on PM2.5 levels)
  • Interactive popups with detailed pollution information
  • Mock data system for demonstration purposes

Route Optimization Algorithm:

// Core scoring function
const calculateRouteScore = (route, weights) => {
  const pollutionScore = calculatePollutionExposure(route);
  const shadeScore = calculateShadeCoverage(route);
  const distanceScore = normalizeDistance(route.distance);

  return (
    weights.pollution * pollutionScore +
    weights.shade * shadeScore +
    weights.distance * distanceScore
  );
};

Phase 4: Progressive Web App Features

  • Service worker implementation for offline capability
  • App manifest for mobile installation
  • Responsive design across all devices
  • Performance optimization with Next.js features

🚧 Challenges and Solutions

Challenge 1: Mapping Platform Migration

Problem: Initial Mapbox integration failed due to API key configuration issues in Windows PowerShell environment.

Root Cause: Environment variables with long API keys were being split across multiple lines, breaking the token format.

Solution: Completely migrated to OpenStreetMap using React-Leaflet:

  • Eliminated API key dependencies
  • Achieved full functionality with open-source mapping
  • Improved accessibility by removing cost barriers
// Migration from Mapbox to OpenStreetMap
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

// Clean, dependency-free mapping solution
<MapContainer center={[37.7749, -122.4194]} zoom={13}>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  {/* Custom markers and overlays */}
</MapContainer>

Challenge 2: React Import Errors

Problem: Build failures due to incorrect react-map-gl import syntax.

Learning: Modern ES6 import/export patterns and library-specific requirements.

Solution: Proper import restructuring and understanding of library APIs.

Challenge 3: Route Optimization Algorithm

Problem: Creating a realistic multi-factor route scoring system.

Approach: Developed a weighted scoring algorithm that considers:

  • Pollution exposure levels
  • Shade coverage percentage
  • Traditional distance metrics
  • User preference weighting
// Three distinct route variants
const routes = [
  { category: 'low-pollution', weights: { pollution: 0.7, shade: 0.2, distance: 0.1 }},
  { category: 'shaded', weights: { pollution: 0.2, shade: 0.7, distance: 0.1 }},
  { category: 'balanced', weights: { pollution: 0.4, shade: 0.4, distance: 0.2 }}
];

Challenge 4: Real-World Data vs. Demonstration

Problem: Balancing realistic functionality with accessible development.

Solution: Created a comprehensive mock data system that:

  • Demonstrates real-world concepts accurately
  • Provides clear paths for production API integration
  • Maintains user experience without external dependencies

📚 Key Learning Outcomes

Technical Skills Developed

  • Full-Stack Development: End-to-end application architecture with Next.js
  • Geospatial Programming: Working with maps, coordinates, and location-based data
  • Algorithm Design: Multi-factor optimization and scoring systems
  • PWA Development: Service workers, offline functionality, and mobile optimization
  • API Design: RESTful endpoints and data processing logic

Problem-Solving Insights

  • Adaptability: Successfully pivoting from Mapbox to OpenStreetMap when faced with technical constraints
  • User-Centric Design: Prioritizing usability over complex features
  • Documentation: Creating clear, honest documentation that accurately reflects implementation
  • Environmental Awareness: Understanding urban environmental data and its impact on routing decisions

Development Best Practices

  • Mock-First Development: Building functional systems with simulated data before external integrations
  • Progressive Enhancement: Starting with core functionality and adding advanced features
  • Error Handling: Graceful degradation when services are unavailable
  • Performance Optimization: Lazy loading, efficient rendering, and responsive design

🌟 Impact and Future Vision

What GreenRoute Demonstrates:

  • Environmental data can be made accessible and actionable for everyday users
  • Route planning can extend beyond time/distance to include health and sustainability factors
  • Open-source technologies can power sophisticated mapping applications
  • Progressive Web Apps provide native-like experiences across devices

Real-World Applications:

  • Municipal governments could adopt similar systems for citizen health initiatives
  • Urban planners could use environmental routing data for infrastructure decisions
  • Health-conscious individuals could make more informed commuting choices
  • Environmental awareness could be seamlessly integrated into daily technology use

🚀 Technical Achievements

  • ✅ Zero API Key Dependencies for core functionality
  • ✅ Fully Responsive design across desktop, tablet, and mobile
  • ✅ PWA Compliance with offline capabilities and installability
  • ✅ Custom Route Algorithm with multi-factor environmental optimization
  • ✅ Interactive Mapping with real-time user preference adjustment
  • ✅ Comprehensive Documentation for development and deployment

🎯 Lessons for Future Projects

  1. Start Simple, Scale Smart: Begin with achievable goals and expand gradually
  2. Plan for Pivots: Build flexible architectures that can adapt to changing requirements
  3. Mock Intelligently: Create realistic simulations that demonstrate real-world concepts
  4. Document Honestly: Clearly distinguish between what's implemented and what's aspirational Focus on User Value: Prioritize solving real problems over showcasing technology

🌱 Personal Growth

Building GreenRoute transformed my understanding of how technology can address environmental challenges. It wasn't just about coding—it was about understanding urban environmental data, user behavior, and the intersection of health and technology.

The project taught me that sometimes the best solution isn't the most complex one. Switching from a commercial API to open-source mapping didn't diminish the project—it made it more accessible and sustainable.

Most importantly, GreenRoute reinforced my belief that developers have a responsibility to create technology that promotes positive environmental and health outcomes. Every line of code is an opportunity to make the world a little bit better.

GreenRoute represents more than just a route planning app—it's a vision of how technology can help us navigate toward a healthier, more sustainable future, one route at a time. 🌍💚

Share this project:

Updates

Submission history