Charge Map

Inspiration

Electric vehicle adoption is accelerating, but range anxiety remains the #1 barrier for drivers. We noticed that existing EV trip planners are either too technical, too slow, or locked behind paid APIs. We wanted to build something that feels as polished as a modern EV dashboard — giving Ford EV owners a zero-friction way to plan trips, find charging stations, and drive with confidence, all in one clean interface.

What it does

Charge Map (RouteEV) is an intelligent EV trip planning web app built specifically for Ford EV drivers. It does three core things:

Smart Trip Planning — Enter a start point and destination, and the app calculates route feasibility based on your Ford model's real EPA range, current battery level, and live weather conditions (temperature and wind impact range estimates).

Charging Station Discovery — Along your route, it surfaces real charging stations with availability estimates, distances, and ETA calculations. You can pick a station and see an adjusted route with charging time baked in.

Live Route Visualization — A full interactive map (Leaflet + OpenStreetMap) renders the route, start/destination markers, and station pins in a dark EV cockpit theme. No map API key needed for the display.

How we built it

Frontend: React 19 + TypeScript + Vite, styled with Tailwind CSS and shadcn/ui components in a custom dark EV cockpit theme

Maps: Leaflet with OpenStreetMap tiles for the display layer; Google Directions API + Geocoding API for route calculation and address resolution

Backend/Auth: Supabase for user authentication, profiles, and trip history storage

Data: Weather API integration for real-time conditions that affect EV range; Google Places API for charging station discovery

State: React hooks with context for auth; local state for trip planning flow

UI/UX: Designed like a vehicle infotainment system — dark mode, electric cyan accents, tabbed side panel, and responsive layout

Challenges we ran into

API Key Management: We initially tried injecting secrets via Supabase secrets, but VITE_ prefixed environment variables in Vite require build-time injection. We solved this by writing the key directly to the .env file so the client bundle could access it.

Map Provider Switch: We started with Google Maps JavaScript API for the visual map, but that required an API key just to render tiles. We switched the display layer to Leaflet + OpenStreetMap (completely free, no key) while keeping Google APIs only for the routing/geocoding logic. This gave us the best of both worlds.

Range Calculation Accuracy: Estimating real-world EV range requires accounting for weather (cold reduces battery efficiency, wind adds drag). We built a weather-adjusted range calculator that factors in temperature, wind speed, and humidity to give more realistic feasibility results.

Accomplishments that we're proud of

Zero-cost map display: By decoupling the visual map (Leaflet/OSM) from the routing engine (Google Directions), the app works immediately for any user without forcing them to set up a Google Cloud billing account just to see a map.

Model-specific intelligence: The app knows the real EPA range of every Ford EV model (Mustang Mach-E, F-150 Lightning, Explorer EV, Capri EV) and tailors feasibility checks accordingly.

End-to-end flow: From "type two addresses" to "here's your adjusted route with a charging stop and arrival time" — the entire journey is seamless in a single-page dashboard.

Polished UI: It genuinely looks and feels like a native EV infotainment screen, not a generic web form.

What we learned

Vite environment variables are build-time only import.meta.env.VITE_xxx gets string-replaced during compilation, so runtime secret injection doesn't work for frontend code. Server-side proxying (e.g., Supabase Edge Functions) is the secure pattern for sensitive client-side APIs.

Leaflet is surprisingly powerful — With custom DivIcon markers, polyline decoding, and layer groups, we could replicate 95% of what Google Maps offers visually without any API key or usage limits.

EV range is more nuanced than "miles per charge" — Weather, driving speed, and terrain all matter. Even a simple temperature penalty model makes the app feel significantly more trustworthy.

What's next for Charge Map

Live station availability: Integrate real-time charger status from networks like Electrify America, ChargePoint, and Tesla Supercharger APIs instead of random estimates.

Turn-by-turn navigation: Export the adjusted route to Apple Maps / Google Maps / Android Auto as a shareable deep link.

User trip history: Use the Supabase backend to save past trips, show frequently visited routes, and learn driver habits for smarter recommendations.

Multi-stop planning: Support adding multiple waypoints and optimizing the order (traveling salesman for charging).

Community reviews: Let users rate and review charging stations (speed, reliability, amenities) directly in the app.

Built With

• 19
• api
• directions
• geocoding
• google
• react
• supabase
• typescript