A high-reliability, real-time Electric Vehicle (EV) charging station discovery, telemetry tracking, and network operations platform built with Next.js, TypeScript, MapLibre GL, and Drizzle ORM.
ChargePlus is designed to solve EV charging anxiety by delivering transparent, dependable, and real-time charging telemetry. The platform enables drivers to locate fast chargers, verify connector availability, assess live queue levels, contribute community reports, and view honest ratings. For network administrators and operators, it features an isolated, secure Operations Console for managing charging infrastructure, ingestion feeds, and telemetry health.
- MapLibre GL Vector Engine: Powered by OpenFreeMap bright vector tiles with zero third-party API keys required.
- Hardware-Accelerated Clustering: Native GPU marker clustering with dynamic count indicators and zoom expansion.
- Live Status Color Hierarchy: Color-coded station markers reflecting real-time availability:
- 🟢 Available (
#2F9E6E) - 🟠 Busy / In Use (
#D9822B) - 🔴 Broken / Down (
#C8443A) - ⚪ Unknown (
#6B615E)
- 🟢 Available (
- Geolocation & Station Mini-Maps: Real-time user position tracking with animated pulse indicator and embedded station-specific mini-maps.
- Instant Search: Direct
/searchredirect with autofocus hydration for zero-click queries. - Multi-Parameter Filtering: Filter by network operator, connector type (CCS2, Type 2, CHAdeMO, GB/T), minimum power output (kW), pricing, and real-time availability.
- Distance & Proximity Sorting: Real-time distance calculations from user coordinates.
- Connector Level Availability: Granular breakdown of individual plugs, rated power (kW), and active ports.
- Transparent Pricing & Hours: Clear per-kWh pricing, free charging indicators, and 24/7 or scheduled operating hours.
- Predictive Busy Windows: Historical queue estimates and peak hour projections.
- Time Since Last Update: Verified status recency indicators ("last updated X min ago").
- Driver Reports (
/reports): Live queue reporting and hardware outage submissions. - Driver Reviews (
/reviews): Verified 5-star rating breakdowns, comments, and experience feedback. - Personalized Driver Profile (
/profile): Manage saved stations, submitted reports, reviews, alerts, and account preferences.
An isolated, role-gated dark console (#0B1120) decoupled from the driver shell, covering 7 core operational pillars:
- Station Management: Network station directory, connector configuration, and status overrides.
- Report Moderation: Driver crowd reports moderation and validation queue.
- Review Moderation: Rating sentiment analysis and user commentary review.
- Information Quality: Telemetry confidence thresholds and stale data suppression rules.
- Ingestion Health: Upstream feed monitors (Open Charge Map adapter, government data feeds, weather telemetry).
- Forecast & Queue ML Models: Queue prediction model accuracy, inference latency, and drift tracking.
- System & Infrastructure Health: Database connection pool status, tile CDN latency, and service uptime.
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router, Turbopack) |
| Runtime / UI | React 19 & TypeScript |
| Styling | Tailwind CSS v4 with PostCSS |
| Geospatial & Maps | MapLibre GL with OpenFreeMap vector tiles |
| Database & ORM | Drizzle ORM & PostgreSQL (Supabase) |
| Linting & Quality | ESLint 9 (Flat config) & Strict TypeScript checking |
ChargePlus/
├── .gitignore # Project ignore rules (builds, env, caches, archives)
├── README.md # Project documentation
├── STATION_DATA_CONTRACT_AUDIT.md # Frontend data contract & database alignment audit
├── drizzle.config.json # Drizzle ORM config — optional dev layer, NOT schema source of truth
├── eslint.config.mjs # Flat ESLint configuration with Next.js Core Web Vitals
├── next.config.ts # Next.js configuration
├── next-env.d.ts # Next.js TypeScript definitions
├── package.json # Scripts and project dependencies
├── postcss.config.mjs # PostCSS setup with Tailwind CSS v4 plugin
├── tsconfig.json # Strict TypeScript compiler options & path aliases
├── walkthrough.md # Implementation walkthrough & verification evidence
├── src/ # Next.js application source (app, components, data, db, lib)
├── supabase/migrations/ # AUTHORITATIVE database schema — Phase 1 Steps 1.3–1.6 SQL
├── Must Read/ # Locked governance docs (Architecture, Design, Memory, Phases, PRD, Rules)
└── docs/ # SRS, data dictionary, data warehouse, Step 1.6 audit & synthesis
- Node.js:
v20.xor later - npm:
v10.xor later (orpnpm/yarn) - PostgreSQL: Local instance or remote database (e.g. Supabase)
git clone https://github.com/harshada2576/ChargePlus.git
cd ChargePlus
npm installCopy .env.example to .env.local and populate your project secrets:
cp .env.example .env.localKey environment classifications:
- Client (Public-Safe):
NEXT_PUBLIC_SUPABASE_URLandNEXT_PUBLIC_SUPABASE_ANON_KEYare safe for browser exposure and protected by Supabase Row-Level Security (RLS). - Server-Only:
DATABASE_URL(direct PostgreSQL connection) andSUPABASE_SERVICE_ROLE_KEY(admin bypass) must NEVER have aNEXT_PUBLIC_prefix and must never be exposed to the browser.
See docs/step_1_9_environment_secrets_audit.md for full credentials classification and security architecture.
npm run devOpen http://localhost:3000 in your browser to explore the application.
| Command | Description |
|---|---|
npm run dev |
Launches the Next.js development server with hot reloading |
npm run build |
Builds the production bundle using Turbopack |
npm run start |
Starts the production server |
npm run typecheck |
Runs TypeScript compiler checks without emitting code (tsc --noEmit) |
npm run lint |
Runs ESLint analysis across the codebase |
The authoritative schema is supabase/migrations/*.sql (Phase 1 Steps 1.3/1.4/1.5/1.6/1.7/1.8 authored and executed the public, analytics, and ml schemas — 29 tables, 4 views, 2 functions — with Step 1.6 constraints/indexes, Step 1.7 RLS & security policies, Step 1.8 Views & Functions EXECUTED + VERIFIED on the linked Supabase project, Step 1.9 Environment & Secrets AUDITED + CONFIGURED, and Step 1.10 Final Verification LIVE AUDITED & SIGNED OFF). Apply them to a linked Supabase project:
supabase link --project-ref <project_ref>
supabase db pushDrizzle ORM is installed and configured (drizzle.config.json, src/db/) but src/db/schema.ts is currently empty — Drizzle is an optional dev layer and not the schema-management source of truth. Do not use drizzle-kit push to alter the database.
Phase 1 (Foundation & Database) is 100% COMPLETE and LIVE VERIFIED: 29 active target tables with RLS enabled, 29 public RLS policies, 0 analytics/ml client policies, 4 views with security_invoker = true, 2 functions with safe search paths, 28 constraints, 45 explicit indexes, defense-in-depth table/column grants, 0 cross-layer FKs, 9 frozen legacy tables untouched, and safe public/server environment boundaries. The foundation is ready for Phase 2 Real Data Ingestion.