🚗⚡ The Google Maps of EV Charging
A centralized, brand-agnostic EV charging intelligence platform that simplifies and optimizes the electric vehicle charging experience.
- Smart Discovery: Find nearby charging stations with real-time availability
- EV Compatibility Matching: Automatic filtering by your vehicle's connector type
- Battery Tracking: Manual input with visual indicators
- Real-Time Status: See which charging points are available, in use, or unavailable
- Charging History: Track your charging sessions and get personalized insights
- Smart Recommendations: Get suggestions for closest, least crowded, or fastest chargers
- Community Validation: Report broken chargers and confirm availability
- OpenChargeMap Integration: Access to thousands of charging stations worldwide
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Modern, responsive styling
- Mapbox GL JS - Interactive maps
- Lucide React - Beautiful icons
- Node.js - Runtime environment
- Express.js - Web framework
- PostgreSQL - Database with PostGIS extension
- JWT - Authentication
- bcryptjs - Password hashing
- OpenChargeMap API - Charging station data
- Node.js 18+ and npm
- PostgreSQL 14+ with PostGIS extension
- Mapbox account (for maps)
- OpenChargeMap API key (optional, for syncing stations)
- Clone the repository
cd EVFlow- Install frontend dependencies
npm install- Install backend dependencies
cd backend
npm install
cd ..- Set up environment variables
Create a .env file in the root directory:
# Database
DATABASE_URL=postgresql://postgres:password@localhost:5432/evflow
DB_HOST=localhost
DB_PORT=5432
DB_NAME=evflow
DB_USER=postgres
DB_PASSWORD=your_password
# JWT
JWT_SECRET=your-super-secret-jwt-key-change-this
# Server
PORT=5000
NODE_ENV=development
FRONTEND_URL=http://localhost:3000
# Mapbox (get from https://mapbox.com)
NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token
# OpenChargeMap (optional, get from https://openchargemap.org)
OPENCHARGE_API_KEY=your_opencharge_api_key
OPENCHARGE_API_URL=https://api.openchargemap.io/v3
# API URL for frontend
NEXT_PUBLIC_API_URL=http://localhost:5000- Set up the database
Make sure PostgreSQL is running, then:
cd backend
npm run db:setup
npm run db:seed
cd ..- Start the development servers
Terminal 1 - Backend:
cd backend
npm run devTerminal 2 - Frontend:
npm run dev- Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
To import real charging station data from OpenChargeMap:
- Register and create an account
- Navigate to the dashboard
- The app will automatically fetch nearby stations based on your location
Or use the API directly:
curl -X POST http://localhost:5000/api/stations/sync \
-H "Content-Type: application/json" \
-d '{"latitude": 37.7749, "longitude": -122.4194, "radius": 10}'- Register/Login: Create an account or sign in
- Set Your EV Model: Select your vehicle in the profile
- Find Chargers: View nearby stations on the map
- Track Battery: Update your battery level for smart recommendations
- View Details: Click stations to see charging points and availability
- Log Sessions: Track your charging history
- Get Insights: View your charging patterns and preferences
POST /api/auth/register- Register new userPOST /api/auth/login- Login userGET /api/auth/profile- Get user profile (protected)PUT /api/auth/profile- Update profile (protected)
GET /api/stations/nearby- Find nearby stationsGET /api/stations/:id- Get station detailsPOST /api/stations/sync- Sync from OpenChargeMapPOST /api/stations/:id/reports- Submit report (protected)
GET /api/ev-models- List all EV modelsGET /api/compatibility/stations- Get compatible stations (protected)
POST /api/history/sessions- Log charging session (protected)GET /api/history/sessions- Get charging history (protected)GET /api/history/insights- Get user insights (protected)
GET /api/recommendations/closest- Closest available chargerGET /api/recommendations/least-crowded- Least crowded stationGET /api/recommendations/best-speed- Best speed for battery level
EVFlow/
├── app/ # Next.js app directory
│ ├── dashboard/ # Dashboard page
│ ├── login/ # Login page
│ ├── register/ # Registration page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Landing page
├── components/ # React components
│ ├── StationMap.tsx # Map component
│ ├── StationCard.tsx # Station card
│ └── BatteryInput.tsx # Battery input
├── lib/ # Utilities
│ └── api.ts # API functions
├── backend/ # Express backend
│ ├── controllers/ # Route controllers
│ ├── utils/ # Utilities
│ └── server.js # Express server
├── database/ # Database files
│ └── schema.sql # PostgreSQL schema
└── package.json # Dependencies
EVFlow uses a modern, premium design with:
- Glassmorphism effects for depth
- Vibrant gradients for visual appeal
- Smooth animations for engagement
- Dark mode optimized for nighttime driving
- Color-coded status for quick recognition
- Responsive layout for all devices
- JWT-based authentication
- Password hashing with bcryptjs
- Helmet.js for security headers
- CORS configuration
- Input validation with express-validator
- Vehicle API integration (Tesla, etc.)
- Route planning with charging stops
- Payment integration
- Station operator dashboard
- Mobile apps (iOS/Android)
- Real-time availability updates via WebSocket
- Social features (reviews, ratings)
- Advanced analytics for operators
This project is built as a demonstration of a modern full-stack EV charging platform.
This is a startup MVP. For production deployment, consider:
- Adding comprehensive error handling
- Implementing rate limiting
- Setting up monitoring and logging
- Adding automated tests
- Implementing CI/CD pipeline
- Scaling database with read replicas
- Adding caching layer (Redis)
For issues or questions, please check the API documentation or review the implementation plan.
Built with ⚡ for the future of electric mobility