UI/UX Design Showcase

Ideal Charge

A modern electric vehicle charging station finder application with real-time sensor integration and intelligent navigation.

5 Core Screens
7 User Stories
ESP32 IoT Integration
Explore Designs View Features
Ideal Charge Home Screen
Project Overview

Designed for Electric Vehicle Drivers

Ideal Charge connects drivers with charging stations through an intuitive interface, real-time availability data from ESP32 sensors, and seamless navigation.

Real-Time Updates

Live charger availability powered by ESP32 sensors ensures accurate, up-to-the-second information.

Smart Navigation

Turn-by-turn directions guide drivers to their selected charging station efficiently.

Advanced Filtering

Filter stations by charger type, availability, distance, and charging speed preferences.

IoT Integration

ESP32 microcontrollers provide sensor data through REST API endpoints.

App Screens

Complete Design System

A cohesive visual language across all screens with dark theme aesthetics and electric blue accents.

Splash Screen

The welcome experience featuring the Ideal Charge branding with an electric lightning bolt logo, circuit board patterns, and a futuristic glow effect. Sets the premium tone for the entire application.

  • Animated logo reveal
  • Brand identity establishment
  • Loading state indicator
  • Seamless transition to home

Home Map Screen

The primary interface displaying an interactive map with charging station markers. A bottom sheet reveals nearby stations with real-time availability indicators powered by ESP32 sensors.

  • Interactive map with station markers
  • Bottom sheet with nearby stations
  • Real-time availability status
  • Quick search functionality

Station Details

Comprehensive station information featuring a **live location map** and real-time charger availability. Displays charging speed, connector types, pricing, and provides one-tap navigation access with deep-linking to system maps.

  • Live charger slot indicators
  • Integrated live location map
  • Charging specifications
  • Pricing information
  • Deep-link navigation with ETA

Filter Screen

Advanced filtering options allow users to narrow down stations by charger type, maximum distance, availability status, and charging speed to find the perfect match quickly.

  • Charger type selection
  • Distance range slider
  • Availability toggles
  • Charging speed options

Navigation Screen

Turn-by-turn navigation with a dark-themed map, route visualization, and live updates showing destination charger availability. Includes ETA, distance, and next turn instructions.

  • Turn-by-turn directions
  • Route visualization
  • Live availability updates
  • ETA and distance tracking
App Screen Home Map Screen Station Details Screen Filter Screen Navigation Screen
User Stories

Core Functionality

Each feature is designed around real user needs for electric vehicle drivers.

01

Find Nearest Station

As an electric car driver, I want to see the nearest charging stations on a map, so that I can reach a station quickly when my battery is low.

Core
02

Check Availability

As an electric car driver, I want to know whether chargers are available or busy in real time, so that I do not waste time going to a full station.

Sensors
03

View Station Details

As an electric car driver, I want to view station details including number of chargers, type, speed, and availability to choose the most suitable station.

Core
04

Navigation

As an electric car driver, I want to get directions to the selected charging station, so that I can arrive easily and efficiently.

Core
05

Real-Time Updates

As an electric car driver, I want the charger status to update automatically using sensors, so that the information is always accurate.

Sensors
06

Filter Stations

As an electric car driver, I want to filter stations by availability, charger type, or distance to find what fits my needs faster.

Optional
07

Admin System

As a system admin, I want sensors to update charger status automatically, so that users always see real-time availability.

Admin
Technology Stack

Architecture Overview

A robust technical foundation combining mobile development with IoT integration.

Mobile Application

Flutter Cross-platform framework
Dart Programming language
Google Maps API Map integration

Backend API

REST API HTTP endpoints
JSON Data format
Real-time Sync WebSocket updates

IoT Layer

ESP32 Microcontroller
Sensors Occupancy detection
WiFi Connectivity
Dev Docs

Project Documentation

A guide for developers to understand the project structure, setup, and core functionality.

Architecture

The app uses a Feature-First architecture for scalability. Data flows from Services (API/Firebase) -> Providers (State) -> UI (Screens/Widgets).

  • lib/core: Global themes, constants, and utilities.
  • lib/screens: Feature folders (e.g., home, auth) containing UI and view-specific logic.
  • lib/services: Abstracted API and Firebase interaction classes.
  • lib/models: Strongly-typed data models with JSON parsing.

State Management

Powered by the Provider package for reactive state:

  • AuthProvider: Manages Firebase user sessions and auth state.
  • ChangeNotifier: Ensures UI components rebuild only when relevant data changes.
  • MultiProvider: Centralized injection in main.dart for app-wide access.

Authentication

Secure login flow using Firebase Auth:

  • Methods: Supports Email/Password and Google Sign-In.
  • Persistence: User sessions are automatically persisted across app restarts.
  • Guards: Routes are protected based on authentication status.

Hybrid Map System

Multi-provider map experience using **Google Maps SDK** and **FlutterMap**:

  • Dual Provider: Google Maps for exploration, OpenStreetMap via FlutterMap for detail views.
  • Markers: Dynamic markers showing station status (Available/Busy).
  • Geolocation: Real-time distance calculation from user to stations.
  • Sync: onSnapshot listeners fetch live updates from Firestore.

IoT Integration

Bridging hardware and software with ESP32:

  • Sensors: IR/Ultrasonic sensors detect vehicle occupancy.
  • Bridge: ESP32 pushes status changes to Firestore via REST API.
  • Latency: Optimized for < 1s delay in status propagation.

Testing

Ensure reliability with Flutter Test:

  • Unit Tests: Verify logic in Providers and Models.
  • Widget Tests: Ensure UI components render correctly.
  • Integration: Test full user flows.

Deployment

Build and release for production:

  • Android: Generate signed App Bundle (.aab).
  • iOS: Archive and upload to TestFlight via Xcode.
  • Web: Build static files for hosting.

Setup Guide

Quick start for new developers:

  1. Install Flutter SDK and Firebase CLI.
  2. Run flutterfire configure to sync your project.
  3. Copy firebase_options.dart to lib/.
  4. Run flutter pub get to install dependencies.

IoT API Reference

Structure of the JSON payload sent by ESP32 sensors to the Firestore backend.

sensor_payload.json POST 
{
  "stationId": "station_001",
  "minerals": {
    "slot_1": {
      "available": true,
      "lastUpdated": "2026-01-29T10:30:00Z"
    },
    "slot_2": {
      "available": false,
      "occupantId": "user_xyz",
      "startTime": "2026-01-29T09:15:00Z"
    }
  },
  "metadata": {
    "voltage": 220,
    "current": 32,
    "temperature": 45.5
  }
}

Troubleshooting & FAQ

Ensure your API key in android/app/src/main/AndroidManifest.xml has the Maps SDK for Android enabled in Google Cloud Console. Restricted keys must include the package name SHA-1 fingerprint.

Check your Firestore Security Rules. During development, you can use allow read/write for testing, but properly secure it before production:

allow read, write: if request.auth != null;

Verify that the ESP32 is connected to a 2.4GHz WiFi network. 5GHz networks are not supported. Check the serial monitor for IP allocation logs.

Development Schedule

Project Timeline

Tracking progress and milestones from initial concept to deployment.

Nov 2025

Research & UX

Requirements analysis and wireframing.

UI Design

High-fidelity mockups & design system.

Dec 2025

Core Dev

Flutter setup and Firebase integration.

Google Maps

Navigation and station markers.

Jan 2026

IoT Integration

ESP32 real-time sensor sync.

MVP Launch

Final testing and project delivery.