Inspiration
Walking our neighborhood streets along Maple Avenue and the 7th Avenue transit corridor during summer and early autumn, we witnessed two compounding crises occurring on the exact same sidewalks:
- Pedestrian Crash Danger: At the 4th Street intersection right next to Elm Elementary School, cut-through commuter vehicles turn right at 35+ mph across an uncontrolled, 52-foot wide asphalt expanse with zero daylighting or curb extensions. Drivers cannot see young children stepping off the curb behind parked delivery vans.
- The Urban Heat Island Crisis: During afternoon school dismissal and commuter peak hours (2:00 PM – 5:30 PM), unshaded asphalt surface temperatures regularly exceed 128°F to 134°F. Elderly residents and parents waiting 20 to 25 minutes for the bus must sit on scorching metal benches radiating 138°F with zero tree canopy protection.
When we spoke with neighborhood parents, seniors, and crossing guards, we learned they had filed 311 tickets and attended community board meetings for three consecutive years asking for a crosswalk and shade trees. The response was always the same: a formal capital engineering study costs \$150,000, takes 4 years, and isn't on the municipal budget.
We were inspired to build SafeShade to prove that tactical urbanism (epoxy paint, modular rubber curb bulb-outs, bioswales, and native street saplings) can achieve the same 45% speed reduction and 40°F thermal cooling for under \$3,500 in a single weekend—giving communities the exact tools to model, simulate, and petition for rapid-build street safety.
What it does
SafeShade bridges grassroots neighborhood observation and rapid municipal action through five integrated modules:
- Interactive Geospatial Multi-Layer Map: Overlays real-time ambient weather feeds, thermal surface heat gradients (75°F to 135°F), crowdsourced near-miss incident pins, and canopy deficit clusters using high-performance Leaflet mapping.
- Dual-Objective Safe & Cool Pedestrian Router: Calculates a "Living Canopy Corridor" that cuts direct pedestrian sun exposure by 86%, navigates 100% traffic-calmed crossings, and lowers walking surface temps from 124°F down to 84°F (-40°F cooling) with only a 1-minute detour.
- Tactical Street & Canopy Studio (Interactive 2D CAD Simulator): Drag & drop modular tactical interventions (painted curb bulb-outs, native shade trees, mid-crossing refuge islands, shade bus parklets, continental crosswalks). A live physics engine calculates crossing distance reduction (-50%), vehicle speed reduction (-47%), thermal drop (-42°F), and stormwater absorption (1,450 gal/yr).
- Automated Municipal DOT Petition Generator: Automatically exports council-ready, printable petition packets complete with municipal engineering schematics, verified neighbor co-signatures, and cost-benefit analyses (\$3,200 tactical vs. \$145,000 capital concrete).
- Adopt-a-Sapling Canopy Stewardship Registry: Gamifies urban tree maintenance by allowing neighbors to adopt young street trees planted in curb bulb-outs, log soil hydration (+25%), track carbon sequestration, and safeguard canopy survival.
How we built it
- Frontend & Architecture: Built with React 19, Vite, and JavaScript (ESM) for instant, lightning-fast rendering.
- UI Design System: Styled using Tailwind CSS v4 with an architectural Sage Green (
#84A988) and Concrete Grey (#212429) theme, custom radar-pulse keyframe animations, and print-optimized document stylesheets. - Geospatial & Mapping: Powered by Leaflet 1.9, CartoDB tile integration, GeoJSON data structures, custom SVG DivIcon radar markers, and thermal heat polygon overlays.
- Interactive Street CAD Engine: Developed an HTML5 Canvas and procedural SVG cross-section renderer backed by real-time parametric traffic calming and solar albedo thermal transfer formulas.
- Civic Engagement & Polish: Integrated Lucide React iconography, Canvas-Confetti for celebratory co-signing micro-interactions, and local storage state persistence.
Challenges we ran into
- Parametric Urban Physics in the Browser: Translating complex urban traffic calming equations (optical lane narrowing, visual friction, turning radius geometry) and thermal thermodynamics (surface albedo, evaporative cooling) into instantaneous, zero-lag UI sliders without bogging down the map view.
- Bridging Two Siloed Disciplines: Traffic engineers and urban arborists traditionally work in isolated departments. We had to connect pedestrian crash mitigation with microclimate botany, proving that curb extensions and tree canopies are the exact same physical intervention: a bioswale tree bulb-out calms traffic while shading pedestrians.
- Council-Grade Credibility: Designing the exported petition packet so that local officials take community submissions seriously, incorporating standard municipal engineering formats, budget breakdowns, and legal municipal code citations.
Accomplishments that we're proud of
- Seamlessly synthesizing two major civic crises—traffic fatalities and urban heat islands—into a single, intuitive workflow for everyday citizens.
- Building a dual-objective pedestrian router that factors in canopy coverage and crosswalk daylighting, making heat-resilient walking practical for vulnerable pedestrians.
- Implementing an interactive 2D street cross-section visual CAD studio that runs at 60 FPS in pure client-side code.
- Delivering a production-ready, accessible application styled in a clean, cohesive Sage Green and Concrete Grey palette that feels like professional municipal urban planning software.
What we learned
- Urban Street Physics: How narrowing visual lane width from 12 ft to 9.5 ft through paint and planters naturally forces drivers to slow down more effectively than static speed limit signs.
- The Power of the Urban Canopy: Asphalt absorbs up to 90% of solar radiation, but a single mature street tree transpires hundreds of gallons of water daily, producing a cooling effect equivalent to 10 room-sized air conditioners running continuously.
- Empowering Grassroots Action: Replacing vague complaints with structured, data-backed engineering proposals fundamentally changes how city councils respond to neighborhood safety requests.
What's next for SafeShade
- Mobile AR Street Visualizer: Allow residents to point their smartphone cameras at a real crosswalk and see 3D Augmented Reality street trees and curb extensions rendered on their actual street.
- Direct City 311 / Open311 API Integration: Enable 1-click submission directly into municipal Department of Transportation work-order ticketing queues.
- LoRaWAN IoT Microclimate Sensor Mesh: Partner with neighborhood schools to deploy low-cost \$15 solar-powered temperature and air quality sensors on street corners for live ground-truth calibration.
Built With
- canvas-confetti
- cartodb
- civic-tech
- css3
- gis
- html5
- javascript
- leaflet.js
- lucide-react
- microclimate
- openstreetmap
- pedestrian-safety
- react
- svg
- tailwindcss
- urban-planning
- vite
Log in or sign up for Devpost to join the conversation.