EVOTRACK

A Premium EV Battery & Service Management Dashboard

Live Web Application: https://evotrack.onrender.com/

EVOTRACK is a meticulously crafted, premium web application for tracking EV battery charging and driving history. It focuses heavily on high-fidelity visual design, a Notion/Airtable style interface, and seamless offline-ready local experiences.

---

🎥 Project Working Demo

EVOTRACK.mp4

---

📋 Table of Contents

• 🎯 Reference & Scope
• ✨ Core Features
• 🎨 Visual & Interaction Fidelity
• 🏗️ Architecture
• 🧰 Tech Stack
• 🤖 AI Workflow & Sub-Agents
• 📁 Project Structure
• 🚀 Local Development
• ☁️ Deployment
• 👨💻 Author

---

🎯 Reference & Scope

This project is built to track and manage electric vehicle data with an emphasis on a premium, desktop-first (with mobile responsive) experience. The implementation includes multiple primary views:

1. Dashboard (Charging Logs)
2. Service Records
3. Tyre Changes
4. Vehicle Issues
5. Additional Services

---

✨ Core Features

🏠 Dashboard & Charging Logs

• High-Fidelity UI: Notion/Airtable style data tables with custom typography (Inter) and beautiful dark/light modes.
• Dynamic Stats: Auto-calculating environmental impact, trees saved, and total charging costs.
• 3D Hero Background: Seamless 3D video loop hero section to give a state-of-the-art premium feel.

📝 Seamless Data Management

• Inline Editing: Real-time inline editing of table rows without needing heavy forms.
• Local Database: Powered by a lightweight SQLite database via FastAPI.
• CSV Export: One-click data export directly to CSV.

📱 Responsive Design

• Mobile Optimized: Custom CSS rules ensuring the tables and complex UI scale perfectly to mobile screens.
• Theme Support: Fully integrated Light/Dark mode toggle with smooth transitions.

---

🎨 Visual & Interaction Fidelity

The implementation focuses on delivering a premium experience through:

• Glassmorphism & custom glowing effects
• Sleek typography and curated color palettes
• Beautiful empty states and loading animations
• Smooth table row hover actions
• Accessible modal dialogs and interactions
• Pixel-perfect mobile adaptation

---

🏗️ Architecture

This project is structured as a full-stack monolith utilizing a highly efficient Python backend and a vanilla frontend.

The architecture features:

• Backend: FastAPI serving RESTful endpoints and static files.
• Database: SQLite with SQLAlchemy ORM.
• Frontend: Pure HTML, vanilla JavaScript (ES6+), and plain CSS (no heavy frameworks).

---

🧰 Tech Stack

Frontend

• HTML5 (Structure)
• Vanilla JavaScript (Interactivity & DOM Manipulation)
• Custom CSS (Styling, Dark Mode, Animations)

Backend

• FastAPI (Python Web Framework)
• Uvicorn (ASGI Server)
• SQLAlchemy (Database ORM)
• SQLite (Database Engine)

---

🤖 AI Workflow & Sub-Agents

This project was built utilizing an AI-assisted workflow to guarantee speed, beautiful UI, and functional backend logic.

Process Included:

• Agentic UI Generation (HTML/CSS)
• Iterative visual refinement for premium aesthetics
• Mobile responsiveness adjustments
• Backend API generation and database integration

---

📁 Project Structure

EVOTRACK/
│
├── main.py                 # FastAPI Application & Endpoints
├── database.py             # SQLAlchemy configuration
├── models.py               # Database Models
├── schemas.py              # Pydantic validation schemas
│
├── static/                 
│   ├── css/         
│   │   ├── style.css       # Core styling & Light/Dark Mode
│   │   └── mobile.css      # Mobile responsiveness
│   ├── js/
│   │   └── app2.js         # Main UI logic
│   └── img/                
│       └── ev-logo.png
│
├── templates/              
│   └── index.html          # Main Application View
│
├── run.bat                 # Windows startup script
├── requirements.txt        
└── README.md               

---

🚀 Local Development

1. Get the Project

Clone or download the project directory.

2. Create Virtual Environment

python -m venv venv
venv\Scripts\activate

3. Install Dependencies

pip install -r requirements.txt

4. Run the Development Server

uvicorn main:app --reload

Or use the provided run.bat file on Windows.

5. View the Application

Open: http://127.0.0.1:8000

---

☁️ Deployment

The application is deployed on Render. Live Application: https://evotrack.onrender.com/

---

👨💻 Author

Hashmil Muhammed