EVChargePro — EV Charging Network Platform
A full-featured, frontend-only EV charging management platform with role-based dashboards for drivers, station operators, and administrators, plus station discovery, live charging sessions, and a built-in wallet.
Date
May 3, 2026
Duration
2-4 months
Client
Personal Project
Category
Business
Technologies Used

Project Overview
EVChargePro is a modern, responsive electric-vehicle charging network web app built with React 18, Vite, and TypeScript that powers a public marketing site, a station discovery experience, and three role-specific dashboards — driver, operator, and admin — all without a backend. The landing page features a sticky glassmorphism navbar, Framer Motion hero with live network stats, an animated features grid, an EV charging showcase with scroll-linked parallax, an admin dashboard preview section, a 'trusted by' partners logo strip, an FAQ accordion, a newsletter signup, and a footer CTA. Public visitors can browse stations on an interactive StationMap with filters for connector type, power level, availability, and pricing, and drill into station detail pages showing chargers, amenities, reviews, and live status. Mock authentication via AuthContext + LocalStorage supports three seeded roles (driver, operator, admin) with role-aware redirects, a reusable ProtectedRoute guard, and a split-screen Login/Register flow with Google and phone-OTP options. The Driver dashboard ships with nearby stations, charging history, payments, a digital wallet with top-up and transactions, and a notifications center. Operators get a station portfolio, charger fleet management, live session monitoring, revenue analytics with charts, and operator settings. Admins receive a global command center with full CRUD modules for users, operators, stations, payments, commission rules, sessions, reports, and platform settings — every data table includes sortable headers, pagination, and CSV/PDF export. The UI is built on Shadcn + Radix with a fully tokenized HSL design system using a green/dark EV palette, a distinctive display heading font, and Framer Motion micro-interactions. Routing uses React Router, charts use Recharts, and feedback is delivered through Sonner toasts.
Key Features
Challenges & Solutions
Technical Implementation
Challenge:
Building a scalable and maintainable solution with modern technologies.
Solution:
Leveraged React and TypeScript to create a robust architecture.
User Experience
Challenge:
Creating an intuitive and engaging user interface.
Solution:
Implemented responsive design patterns and smooth interactions.
Performance Metrics
Project Gallery





