All projectsFull-Stack Web Platform

ChargeMap PK

Pakistan's EV Charging Station Discovery Platform

ChargeMap PK is a community-driven directory for finding and registering EV charging stations across Pakistan. A full-screen Leaflet map bounded to the country shows color-coded pins that sync with a scrollable sidebar; filters narrow by province, city, type, cost, and 24-hour availability. SEO-friendly city and charger pages, a comment system with reactions and captcha, and admin inline editing sit on top of an n8n backend proxied through Next.js route handlers with signed, httpOnly session cookies.

Live demo Source code

Category: Full-Stack Web Platform
Role: Solo design & engineering
Mapping: Leaflet + n8n
Status: Live · Open source

Built with

Next.jsReactTypeScriptTailwind CSSLeafletn8n

ChargeMap PK landing page — The landing page — Pakistan's EV charging station discovery platform.

What it does

Find a charger, add a charger.

Interactive map

Full-screen Leaflet bounded to Pakistan, color-coded active/inactive pins, geolocation, and a fit-all view synced to a sidebar.

Rich filtering

By province, city, location type, cost range, and 24-hour availability, with northbound/southbound road indicators.

Directory & SEO pages

A searchable directory with SEO-friendly city and individual charger pages carrying JSON-LD structured data.

Community

Comments with reaction toggles; visitors register with a name and a math captcha.

Architecture

Proxied and signed.

n8n backend

Five webhook workflows handle auth, charger CRUD, registration, and comments — all keyed by x-api-key.

Server-verified mutations

Every POST/PUT/DELETE proxies through a Next.js route handler that checks a signed session cookie first.

Session security

HMAC-SHA256-signed httpOnly cookies issued after bcrypt password verification, with honeypot and captcha bot protection.

The flow

How a charger gets on the map.

1An admin signs in; the server verifies the password and issues a signed session cookie.
2Charger details are submitted through an admin form.
3The route handler validates the cookie and forwards to the insert workflow.
4SWR fetches chargers with a localStorage cache and renders the new pin.
5Visitors filter, comment, and react — moderated by admin inline editing.

ChargeMap PK interactive Leaflet map with color-coded pins — The interactive map — color-coded pins bounded to Pakistan, synced to a scrollable charger sidebar.

Gallery

A closer look.

ChargeMap PK charger directory list — The directory — a searchable list synced to the map.

ChargeMap PK charging infrastructure statistics — Infrastructure statistics across Pakistan's charging network.

Interested in the details?

Try the live demo View source Back to all projects