Goal
Build a map-first product where EV drivers can discover nearby charging stations, check real-time availability and pricing, manage their vehicles, and track their charging history — all without leaving the app.
Case Study
ChargeFinder
A full-stack web app that helps EV drivers find charging stations, verify connector compatibility, and track their charging sessions — all in one place.
My Role
Full-stack ownership from product shaping to deployment: frontend architecture, map interaction UX, API design, data modeling, real-time WebSocket integration, authentication, and admin tooling.
Delivered Outcomes
- Interactive map for discovering EV stations near you with real-time availability.
- End-to-end charging flow from ticket request to live progress tracking via WebSocket.
- EV vehicle profiles with battery management and connector compatibility.
- Admin dashboard for full station and user management.
- Session-based authentication with role-protected pages.
Architecture
- Frontend: React + Vite SPA with Redux Toolkit for global state management.
- Map layer: Leaflet with OpenStreetMap tiles for interactive station discovery.
- Backend: Express REST API covering stations, users, vehicles, auth, and charging.
- Data: MongoDB for all records, Redis for session storage.
- Real-time: WebSocket server broadcasts live charging progress to connected clients.
System Architecture
User / Browser
Frontend · React + Vite SPA
Redux Toolkit · Leaflet/OpenStreetMap · Material UI
REST API + WebSocket
Backend · Express REST API
Node.js · TypeScript · 20+ endpoints
MongoDB
Mongoose · Documents
Redis
Session storage
Key Features
Find Stations Near You
An interactive map shows all nearby charging stations using your location. Filter by connector type (CCS2, Type2, CHAdeMO) or charging speed to find exactly what your EV supports.
Station Details & Pricing
Before you drive there — see connector availability, real-time status (available / busy / offline), amenities, and tiered pricing per kWh.
Start & Track Charging
Request a charging ticket and watch live progress update in real time via WebSocket. Your session is tracked from start to completion.
Manage Your EVs
Add multiple vehicles with their battery capacity, current charge level, and supported connector types. Set one as active for personalized compatibility info.
Charging History
Review all past sessions — duration, kWh consumed, and cost — stored in your profile so you always know what you've used.
Admin Dashboard
A dedicated admin panel to add, edit, or remove charging stations, manage users, and get an operational snapshot of the platform.
Project Structure
Two separate repositories — a React SPA on the frontend and a Node.js API on the backend.
Frontend
React · Vite · TypeScript- 13 pages: Map, Station Detail, Profile, Admin, Login, Signup, and more
- Redux Toolkit manages global auth, map filters, and UI state
- Leaflet + OpenStreetMap renders the interactive station map
- Material UI components styled with a custom theme
- WebSocket client receives live charging progress updates
- Route guards protect authenticated and admin-only pages
- Test coverage with Vitest and React Testing Library
Backend
Node.js · Express · TypeScript- 20+ REST endpoints across auth, stations, vehicles, profile, and admin routes
- MongoDB with Mongoose models for users, vehicles, stations, and tickets
- Redis stores sessions for fast, scalable authentication
- WebSocket server broadcasts real-time charging progress
- Rate limiting and express-validator guard every public endpoint
- Startup scripts seed mock stations and a demo user automatically
- Full test suite with Jest across controllers, services, and middleware
Tech Stack
Leaflet + OpenStreetMapMaterial UIReactRedux ToolkitTypeScriptViteNode.js + ExpressWebSocket (ws)MongoDB (Mongoose)Redis SessionsJestVitest
Screenshots
Map View
Desktop
Mobile
Station Details
Desktop
Mobile
User Profile
Desktop
Mobile
Admin Dashboard
Desktop
Mobile
