The Ultimate Peer-to-Peer EV Charging Ecosystem
PlugPoint is a premium, community-driven platform designed to solve the "charging anxiety" problem. It empowers EV owners to share their private chargers (Hosts) while enabling drivers to seamlessly find, book, pay for, and navigate to charging stations—including real-world public data.
- Hybrid Mapping: Merges community-listed P2P chargers with real-world public data from the Open Charge Map (OCM) API.
- Route-Based Filtering: Set a destination, and PlugPoint dynamically filters chargers within a 5km buffer of your driving path.
- Live Tracking: A dedicated "Start Journey" mode that locks the map to your GPS coordinates for a real-time navigation experience.
Beyond simple scheduling, PlugPoint offers a sophisticated multi-modal booking system:
- By Amount: Enter a budget (e.g., ₹150) and let the app calculate exact charging time and energy units (kWh).
- By Time: Select custom duration in 15-minute increments.
- Future Booking: Schedule up to 7 days in advance with high-precision 30-minute start-time granularity.
- Collision Prevention: An absolute mathematical overlap engine checks Unix timestamps to prevent double-booking down to the minute.
- Earnings Dashboard: Hosts get a professional breakdown of Gross vs. Net earnings (after a 5% platform fee).
- Cashout to Wallet: One-tap transfer of host earnings directly into the in-app wallet.
- Dual-Tier Payments: Native integration with Razorpay for direct payments and a custom PlugPoint Wallet for one-tap bookings.
- My EV Profile: Save your vehicle make/model (e.g., Tata Nexon EV) to personalize your dashboard and filter compatible chargers.
- User Profiles: Track total bookings, earnings, and neighborhood reputation via a star-rating system.
| Layer | Technology |
|---|---|
| Frontend | React 18, Vite, TypeScript |
| Styling | Tailwind CSS v4 (Modern utility-first architecture), Glassmorphism UI |
| Database | Supabase (PostgreSQL, Real-time status, Storage) |
| Authentication | Firebase (Email/Password, Google Social Login) |
| Mapping | MapLibre GL JS, Google Roadmap Tiles |
| Financials | Razorpay SDK, Custom Wallet Engine |
| Icons & UI | Lucide-React, Sonner (Toasts), Recharts (Earnings Charts) |
src/
├── app/
│ ├── components/
│ │ ├── BookingModal.tsx # The 3-tab precision booking engine
│ │ ├── MapPage.tsx # Hybrid mapping & route-based logic
│ │ ├── HostEarningsPage.tsx # Host financial dashboard & cashout
│ │ ├── EvSetupModal.tsx # Vehicle profile management
│ │ ├── ManageChargersPage.tsx# Host charger control center
│ │ └── AuthPage.tsx # Firebase authentication flows
│ ├── context/
│ │ └── AppContext.tsx # Global ecosystem state (Wallet, EV, Map)
│ ├── data/
│ │ └── mock-data.ts # Core TypeScript Interfaces
│ └── lib/
│ ├── db.ts # Supabase query layer & Financial logic
│ └── polyline.ts # Route encoding for spatial queries
├── config/
│ ├── supabase.ts # Supabase Client Init
│ └── firebase.ts # Firebase Client Init
└── hooks/
└── useFirebaseAuth.ts # Custom Auth lifecycle hook
- Node.js (v18+)
- Supabase Project
- Firebase Project
- Razorpay Key ID (for payments)
Create a .env file based on .env.example:
VITE_FIREBASE_API_KEY=...
VITE_SUPABASE_URL=...
VITE_SUPABASE_ANON_KEY=...
VITE_RAZORPAY_KEY_ID=...
VITE_OCM_API_KEY=...# Install dependencies
npm install
# Run development server
npm run dev-
Overlap Prevention: Instead of array indexes, we use
startTime.getTime()andendTime.getTime()boundaries to ensure non-conflicting reservations. -
Dynamic Unit Calculation: Energy projection (
$kWh = \text{Duration (h)} \times \text{Charger Power (kW)}$ ). - Platform Fee Logic: A 5% platform commission is automatically deducted from host earnings (Seller Side). No service fees are charged to the driver (Buyer Side).
Designed with ❤️ for the EV Community.