Initial commit

README.md

@@ -0,0 +1,89 @@
+# EV Infotainment UI (Demo Project)
+
+This project is a mock EV infotainment system built with React + TypeScript + Vite, designed to simulate how an in-car display could show battery State of Health (SoH) and charging session history.
+
+![alt text](src/assets/image.png)
+
+It includes:
+
+- A charger simulator API (mock backend)
+- A beautiful infotainment-style UI
+- A fixed 21:9 car-like viewport
+- A bottom navigation bar fixed within the screen
+- Smooth scrolling and EV-inspired design elements
+
+This UI is intended for demo purposes as part of a larger system where: Charger → Backend → Infotainment UI (charger sends charging data → backend calculates SoH → UI visualizes last 30 days).
+
+## Features
+
+### Battery Health Visualization
+
+Live SoH reading for the latest charging session
+
+Change vs previous session
+
+Temperature, SoC, and energy added summary
+
+### Trend Chart
+
+- 30-day SoH trend displayed with a custom SVG line chart
+- Session points rendered with minimal dependencies
+
+### Charging History
+
+- Scrollable list of all charging sessions
+- Shows SoH, Δ vs previous, and energy added for each session
+
+### Infotainment-Style UI
+
+- Status bar with icons (time, temperature, connectivity)
+- Quick control strip (AC, night mode, eco mode – static)
+- Bottom navigation menu (Home / Battery / Trips / Settings)
+- Fixed 21:9 viewport with realistic bezel and rounded corners
+
+### Mock Backend
+
+- Generates realistic charging history for the last 30 days
+- SoH degrades slowly over time
+- Used when VITE_USE_MOCK_API=true
+
+## Tech Stack
+
+- React (with TypeScript)
+- Vite
+- CSS only
+
+## Getting Started
+
+1. Install dependencies
+
+```bash
+npm install
+```
+
+2. Run in mock mode
+
+Create a .env file:
+
+```ini
+VITE_USE_MOCK_API=true
+```
+
+Then start the dev server:
+
+```bash
+npm run dev
+```
+
+The infotainment UI will open at `http://localhost:5173/`.
+
+3. Using a real backend (optional)
+
+Set:
+
+```ini
+VITE_USE_MOCK_API=false
+VITE_API_BASE_URL=https://your-backend.example.com
+```
+
+The UI will fetch real session data from the backend.