Mile Vaganam - Vehicle Fuel Efficiency Calculator

📖 Overview

Mile Vaganam is a modern web application designed to help users calculate vehicle fuel efficiency, manage vehicle data, and analyze fuel consumption patterns. The platform provides detailed mileage calculations based on vehicle specifications, trip distances, and real-time fuel prices.

✨ Key Features

• 🚗 Vehicle Management: Comprehensive vehicle database with detailed specifications
• ⛽ Fuel Efficiency Calculator: Real-time mileage and fuel cost calculations
• 📊 Analytics Dashboard: Advanced data visualization and insights
• 🔐 User Authentication: Secure user registration and login system
• 📱 Responsive Design: Mobile-first design with modern UI/UX
• 🌍 Location-based Pricing: Fuel price calculation based on geographical location

🏗️ Architecture

Backend (Spring Boot)

• Framework: Spring Boot 3.4.4
• Language: Java 17
• Database: MySQL 8.0
• Security: Spring Security
• ORM: JPA/Hibernate
• Build Tool: Maven

Frontend (React + Vite)

• Framework: React 19.0.0
• Build Tool: Vite 6.2.0
• Styling: Tailwind CSS 4.1.3
• Animations: Framer Motion
• Icons: Lucide React
• Charts: Recharts
• HTTP Client: Axios

🚀 Getting Started

Prerequisites

Before running this application, make sure you have the following installed:

• Java 17 or higher
• Node.js 18 or higher
• MySQL 8.0 or higher
• Maven 3.6 or higher
• Git

🛠️ Installation & Setup

1. Clone the Repository

git clone https://github.com/Mathi029/mile_vaganam.git
cd mile_vaganam

2. Backend Setup (Spring Boot)

cd Backend

Configure Database:

1. Create a MySQL database named mile
2. Update database credentials in src/main/resources/application.properties:

spring.datasource.url=jdbc:mysql://localhost:3306/mile
spring.datasource.username=your_username
spring.datasource.password=your_password

Install Dependencies & Run:

# Install dependencies
mvn clean install

# Run the application
mvn spring-boot:run

The backend server will start at http://localhost:8080

3. Frontend Setup (React + Vite)

cd ../Frontend

Install Dependencies & Run:

# Install dependencies
npm install

# Start development server
npm run dev

The frontend application will start at http://localhost:5173

📁 Project Structure

mile_vaganam/
├── Backend/                          # Spring Boot Backend
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/mile_vaganam/
│   │   │   │   ├── controller/       # REST Controllers
│   │   │   │   │   ├── MileageCalculatorController.java
│   │   │   │   │   ├── UserCredentialsController.java
│   │   │   │   │   └── VehiclesController.java
│   │   │   │   ├── dto/              # Data Transfer Objects
│   │   │   │   ├── entity/           # JPA Entities
│   │   │   │   ├── repository/       # Data Repositories
│   │   │   │   ├── service/          # Business Logic
│   │   │   │   ├── config/           # Configuration Classes
│   │   │   │   └── exception/        # Custom Exceptions
│   │   │   └── resources/
│   │   │       └── application.properties
│   │   └── test/                     # Unit Tests
│   ├── pom.xml                       # Maven Dependencies
│   └── Dockerfile                    # Docker Configuration
│
├── Frontend/                         # React Frontend
│   ├── src/
│   │   ├── Components/               # React Components
│   │   │   ├── Admin/                # Admin Dashboard Components
│   │   │   │   ├── dashboard.jsx
│   │   │   │   ├── analysis.jsx
│   │   │   │   └── newanalysis.jsx
│   │   │   ├── About.jsx
│   │   │   ├── Contact.jsx
│   │   │   ├── FuelEstimator.jsx
│   │   │   ├── landing.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── Vehiclelist.jsx
│   │   ├── Services/                 # API Services
│   │   ├── assets/                   # Static Assets
│   │   ├── App.jsx                   # Main App Component
│   │   └── main.jsx                  # Entry Point
│   ├── public/                       # Public Assets
│   ├── package.json                  # NPM Dependencies
│   └── vite.config.js               # Vite Configuration
│
└── README.md                         # Project Documentation

🔧 API Endpoints

Vehicle Management

• GET /vehicles - Get all vehicles
• GET /vehicles/{id} - Get vehicle by ID
• POST /vehicles - Create new vehicle
• PUT /vehicles/{id} - Update vehicle
• DELETE /vehicles/{id} - Delete vehicle

Mileage Calculator

• GET /mileage-calculator - Get all calculations
• GET /mileage-calculator/{id} - Get calculation by ID
• POST /mileage-calculator - Create new calculation
• PUT /mileage-calculator/{id} - Update calculation
• DELETE /mileage-calculator/{id} - Delete calculation

User Management

• POST /users - Create new user
• GET /users/{username} - Get user by username

🗄️ Database Schema

Tables

vehicles

CREATE TABLE vehicles (
    vehicle_id BIGINT PRIMARY KEY AUTO_INCREMENT,
    vehicle_type VARCHAR(255),
    vehicle_name VARCHAR(255),
    variant VARCHAR(255),
    fuel_type VARCHAR(255),
    vehicle_cc INT,
    mileage FLOAT,
    tank_capacity FLOAT,
    img_url VARCHAR(500)
);

mileage_calculator

CREATE TABLE mileage_calculator (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    search_id VARCHAR(36) NOT NULL,
    timestamp DATETIME NOT NULL,
    vehicle_name VARCHAR(255),
    fuel_type VARCHAR(255),
    variant VARCHAR(255),
    tank_capacity FLOAT,
    mileage FLOAT,
    trip_distance FLOAT,
    vehicle_type VARCHAR(255),
    city VARCHAR(255),
    state VARCHAR(255),
    pincode VARCHAR(10),
    latitude DOUBLE,
    longitude DOUBLE,
    fuel_price DOUBLE
);

user_credentials

CREATE TABLE user_credentials (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(255) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    created_at DATETIME NOT NULL,
    updated_at DATETIME
);

🚀 Available Scripts

Backend (Maven)

mvn clean install          # Install dependencies
mvn spring-boot:run        # Run development server
mvn test                   # Run tests
mvn package               # Build for production

Frontend (NPM)

npm install               # Install dependencies
npm run dev              # Start development server
npm run build            # Build for production
npm run preview          # Preview production build
npm run lint             # Run ESLint

🛡️ Security Features

• Spring Security: Authentication and authorization
• JWT Tokens: Secure user sessions
• Password Encryption: BCrypt hashing
• CORS Configuration: Cross-origin resource sharing
• Input Validation: Request data validation

🎨 UI/UX Features

• Modern Design: Clean and intuitive interface
• Responsive Layout: Mobile-first design approach
• Smooth Animations: Framer Motion animations
• Interactive Charts: Data visualization with Recharts
• Dark Mode: Toggle between light and dark themes
• Loading States: Skeleton loaders and spinners

🧪 Testing

Backend Testing

cd Backend
mvn test

Frontend Testing

cd Frontend
npm run test

🐳 Docker Deployment

Backend Container

cd Backend
docker build -t mile-vaganam-backend .
docker run -p 8080:8080 mile-vaganam-backend

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👥 Team

• cbeAbishek - Project Lead & Full Stack Developer

🔮 Future Enhancements

• Mobile application (React Native)
• Real-time fuel price API integration
• Advanced analytics and reporting
• Multi-language support
• Social media integration
• Vehicle comparison tools
• Fuel efficiency tips and recommendations