🚗 Find your nearest EV charging spot with ease
Discover over 1 million charging stations worldwide with real-time availability
This project is currently in early development. Many features are planned but not yet implemented.
ChargeEase is a comprehensive, full-stack EV (Electric Vehicle) charging station finder that revolutionizes how drivers locate, book, and manage their charging sessions. With access to over 1 million charging stations worldwide, ChargeEase makes electric vehicle ownership convenient, efficient, and stress-free.
To accelerate the adoption of electric vehicles by making charging infrastructure easily accessible and user-friendly for everyone, everywhere.
- 📍 GPS-powered location discovery - Fully functional geolocation integration
- 🗺️ Interactive search interface - Advanced search with filters and real-time results
- 🔌 Advanced filtering - Filter by charging speed, connector type, price, amenities
- 📏 Smart sorting - Sort by distance, rating, price, availability
- 🎯 Real-time search - Debounced search with instant results
- 💫 Responsive design - Mobile-first approach with perfect tablet/desktop experience
- 🌙 Dark mode support - Automatic and manual theme switching
- ⚡ Smooth animations - Framer Motion powered micro-interactions
- 🎭 Component library - Reusable UI components with variants
- 📱 Mobile optimized - Touch-friendly interface with gesture support
- 🔑 Secure login/signup - JWT-based authentication with validation
- 👤 User profiles - Comprehensive user management
- 🔒 Protected routes - Route-level authentication guards
- 📧 Social login ready - Google/Apple OAuth integration prepared
- 🔄 Password recovery - Reset password functionality
- 🧭 Geolocation API - Real-time location detection
- 🗺️ Map integration ready - Prepared for Mapbox/Google Maps
- 📍 Location-based search - Find stations near current location
- 🎯 Address autocomplete - Smart address input
- 🔄 React Query - Advanced server state management
- 📦 Context API - Global state for authentication
- 🎣 Custom hooks - Reusable logic for auth, geolocation
- 📱 Local storage - Persistent user preferences
- 🔗 API services - Complete REST API integration
- 📝 TypeScript types - Comprehensive type definitions
- ⚡ Optimistic updates - Instant UI feedback
- 🔄 Background sync - Auto-refresh and cache invalidation
- 🚨 Error boundaries - Graceful error recovery
- 📝 Form validation - Real-time validation with Zod
- 🔄 Retry mechanisms - Automatic retry for failed requests
- 📊 Loading states - Beautiful loading indicators
- 📱 Mobile-first - Optimized for all screen sizes
- 💻 Desktop enhanced - Rich desktop experience
- 🎨 Consistent styling - Design system with Tailwind CSS
- 🖼️ Adaptive layouts - Grid and flexbox layouts
| Technology | Version | Purpose | Implementation Status |
|---|---|---|---|
 |
19.0.0 | Core UI Framework | ✅ Complete |
 |
5.7.2 | Type Safety | ✅ Complete |
 |
6.2.0 | Build Tool & Dev Server | ✅ Complete |
 |
4.1.1 | Utility-First Styling | ✅ Complete |
 |
12.9.2 | Animations & Gestures | ✅ Complete |
 |
7.5.2 | Client-Side Routing | ✅ Complete |
 |
5.x | State Management | ✅ Complete |
 |
7.x | Form Management | ✅ Complete |
| Technology | Version | Purpose | Implementation Status |
|---|---|---|---|
 |
20.x | JavaScript Runtime | 🔄 API Ready |
 |
4.x | Web Framework | 🔄 API Ready |
 |
9+ | Realtime DB/Auth | 🔄 Ready for Integration |
 |
Latest | Authentication | ✅ Complete |
Ensure you have the following installed on your system:
or
-
Clone the repository
git clone https://github.com/yourusername/chargeease.git cd chargeease -
Install dependencies
# Install frontend dependencies cd frontend && npm install # Install backend dependencies (if setting up full stack) cd ../backend && npm install
-
Set up environment variables
# Frontend environment (optional) cd frontend cp .env.example .env # Edit .env with your configuration: # VITE_API_URL=http://localhost:5000/api/v1 # VITE_MAPBOX_TOKEN=your_mapbox_token (when ready)
-
Start the development server
# Start frontend development server cd frontend && npm run dev # App runs on http://localhost:5173 # Start backend (optional) cd backend && npm run dev # Server runs on http://localhost:5000
-
Open your browser Navigate to
http://localhost:5173to see ChargeEase in action! 🎉
chargeease/
├── frontend/ # React TypeScript frontend ✅
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # UI components
│ │ │ ├── ui/ # Reusable UI components ✅
│ │ │ │ ├── Button.tsx # Multi-variant button component
│ │ │ │ ├── Input.tsx # Advanced input with validation
│ │ │ │ └── ...
│ │ │ ├── auth/ # Authentication components ✅
│ │ │ │ ├── LoginPage.tsx
│ │ │ │ ├── SignupPage.tsx
│ │ │ │ └── ProtectedRoute.tsx
│ │ │ ├── common/ # Common components ✅
│ │ │ │ ├── ErrorBoundary.tsx
│ │ │ │ └── ...
│ │ │ ├── home/ # Home page components ✅
│ │ │ │ ├── Hero.tsx # Hero section
│ │ │ │ ├── SearchBar.tsx # Advanced search
│ │ │ │ ├── PopularDestinations.tsx
│ │ │ │ ├── TopRatedSpots.tsx
│ │ │ │ └── ChargingClub.tsx
│ │ │ └── layout/ # Layout components ✅
│ │ │ ├── Header.tsx # Advanced navigation
│ │ │ ├── Footer.tsx
│ │ │ └── MainLayout.tsx
│ │ ├── pages/ # Page components ✅
│ │ │ ├── SearchPage.tsx # Comprehensive search page
│ │ │ ├── auth/ # Auth pages
│ │ │ └── ...
│ │ ├── hooks/ # Custom React hooks ✅
│ │ │ ├── useAuth.ts # Authentication hook
│ │ │ ├── useGeolocation.ts # Location services
│ │ │ └── ...
│ │ ├── services/ # API services ✅
│ │ │ ├── api.ts # Complete API client
│ │ │ └── ...
│ │ ├── utils/ # Utility functions ✅
│ │ │ ├── helpers.ts # Helper functions
│ │ │ ├── constants.ts # App constants
│ │ │ └── ...
│ │ ├── types/ # TypeScript definitions ✅
│ │ │ └── index.ts # Complete type system
│ │ ├── App.tsx # Main app with routing ✅
│ │ └── main.tsx # App entry point ✅
│ ├── package.json # Frontend dependencies
│ ├── vite.config.ts # Vite configuration
│ ├── tailwind.config.js # Tailwind CSS config
│ └── tsconfig.json # TypeScript config
├── backend/ # Express.js backend (API Ready)
│ ├── server.js # Basic server setup
│ └── ... # Full backend to be implemented
├── README.md # This file ✅
└── .gitignore # Git ignore rules
- User registration with email validation
- Secure login with JWT authentication
- Password strength validation
- Remember me functionality
- Social login integration (UI ready)
- Protected route authentication
- User profile management
- Logout functionality
- Location-based station search
- Advanced filtering system
- Charging speed (Level 1, 2, DC Fast, Supercharger)
- Connector types (J1772, CCS, CHAdeMO, Tesla)
- Price range filtering
- Amenities filtering
- Host type filtering
- Real-time search with debouncing
- GPS location detection
- Distance calculation and sorting
- Search results pagination
- Responsive design (mobile-first)
- Dark mode support
- Smooth animations and transitions
- Loading states and error handling
- Form validation with real-time feedback
- Accessibility features
- SEO-friendly routing
- Type-safe API integration
- Optimistic UI updates
- Background data synchronization
- Local storage for preferences
- Error boundary implementation
- Retry mechanisms for failed requests
- Advance station reservations
- Booking confirmation system
- Calendar integration
- Booking history tracking
- Cancellation and modification
- Waitlist functionality
- Multiple payment methods
- Secure payment processing (Stripe)
- Pricing calculation
- Invoice generation
- Subscription management
- Refund processing
- Live station availability
- Real-time notifications
- WebSocket connections
- Push notifications
- Live chat support
- Route planning integration
- Carbon footprint tracking
- Community reviews and ratings
- AI-powered recommendations
- Multi-language support
- Offline functionality
ChargeEase uses a comprehensive design system built with Tailwind CSS:
/* Primary Colors */
--orange-primary: #FF6B35; /* Main brand color */
--orange-light: #FF8A65; /* Hover states */
--orange-dark: #E55722; /* Active states */
/* Neutral Colors */
--gray-900: #1F2937; /* Dark backgrounds */
--gray-800: #374151; /* Card backgrounds */
--gray-600: #6B7280; /* Text secondary */
--gray-300: #D1D5DB; /* Borders */
--white: #FFFFFF; /* Text primary */
/* Status Colors */
--success: #10B981; /* Available stations */
--warning: #F59E0B; /* Limited availability */
--error: #EF4444; /* Unavailable */
--info: #3B82F6; /* Informational */- Atomic Design: Atoms → Molecules → Organisms → Templates → Pages
- Consistent Spacing: 8px grid system (4, 8, 16, 24, 32, 48, 64px)
- Responsive Breakpoints: Mobile-first approach
- Accessibility: WCAG 2.1 AA compliance
npm run dev # Start Vite dev server (http://localhost:5173)
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm run type-check # TypeScript type checkingnpm run dev # Start with nodemon (http://localhost:5000)
npm run start # Start production server
npm run test # Run backend tests- Unit Tests: Jest + React Testing Library
- Component Tests: Isolated component testing
- E2E Tests: Cypress end-to-end tests
- Visual Regression: Chromatic visual testing
- Code Splitting: Route-based and component-based splitting
- Lazy Loading: Images and non-critical components
- Bundle Analysis: Regular bundle size monitoring
- Caching Strategy: React Query for API responses
- JWT Authentication: Secure token-based auth
- Input Validation: Zod schema validation
- XSS Protection: React's built-in protection
- Type Safety: Full TypeScript implementation
- Error Boundaries: Graceful error handling
- HTTPS Everywhere: SSL/TLS encryption
- CORS Protection: Configured for production domains
- Rate Limiting: API abuse prevention
- Input Sanitization: Server-side validation
- Environment Variables: Secure credential management
- Project setup and architecture
- Core UI components
- Authentication system
- Basic search functionality
- Responsive design
- Complete API integration
- Map integration (Mapbox/Google Maps)
- Booking system
- Payment processing
- User dashboard
- Real-time notifications
- Community features
- AI recommendations
- Mobile app (React Native)
- Advanced analytics
- Performance optimization
- Internationalization
- Enterprise features
- API partnerships
- Global expansion
We welcome contributions! Here's how you can help:
- Backend API Development: Express.js server implementation
- Map Integration: Mapbox or Google Maps integration
- Payment System: Stripe integration
- Testing: Unit and integration tests
- Documentation: API docs and user guides
- 🍴 Fork the repository
- 🌿 Create a feature branch
git checkout -b feature/amazing-new-feature
- 💻 Make your changes
- Follow our coding standards
- Add tests for new features
- Update documentation
- 🧪 Test your changes
npm run lint npm run type-check npm run build
- 📝 Commit with conventional commits
git commit -m "feat: add real-time station availability" git commit -m "fix: resolve payment processing issue"
- 🚀 Push and create PR
This project is licensed under the MIT License - see the LICENSE file for details.
