🌟 Introduction
Hey Devs 👋
After 3 months of sleepless nights, debugging marathons, and too many cups of chai ☕, I’m beyond proud to share my latest project — AutoLogAI.
This isn’t just another web app. It’s a smart ecosystem built to automate your car’s life — from fuel tracking to AI assistance, and even OCR-based receipt scanning.
AutoLogAI represents everything I love about tech — merging AI, automation, and user experience into one powerful platform.
🧠 What is AutoLogAI?
AutoLogAI is a smart vehicle management system that helps users manage fuel logs, maintenance schedules, receipts, and even chat with an AI assistant named Nex for guidance and support.
It’s built to simplify your driving life, automate repetitive tasks, and keep your car’s data organized — all in one dashboard.
⚙️ Key Features
🧾 OCR Receipt Scanner
Ever lost your fuel or service receipts?
We solved that with OCR (Optical Character Recognition) using Tesseract.js.
📸 How we did it:
Users can upload a receipt image → the system reads it using OCR → and automatically fills in the fuel or service details.
🎯 Purpose:
To save time, reduce manual entry, and bring automation to car expense tracking.
🤖 AI Assistant (Nex)
Meet Nex, your personal car companion 💬
Built using the Google Gemini API, Nex can answer your car-related questions, remind you about maintenance, or guide you through the app.
⚙️ How we built it:
We integrated Gemini’s conversational API with Flask endpoints, then built a chat interface in Angular for smooth UX.
🎯 Purpose:
To make AutoLog.AI feel like a personal assistant rather than just another tool.
⛽ Fuel Log Management
Logging fuel details manually? Not anymore.
The Fuel Log module lets users record every refill with details like price, liters, date, and mileage — all securely saved in the database.
⚙️ How it works:
A simple Angular form connects with Flask APIs secured using JWT, storing every record in MongoDB.
🎯 Purpose:
Track your mileage trends, costs, and car performance effortlessly.
🔔 Service Reminders
Never forget a service again!
With AutoLog.AI’s reminder system, users can set upcoming maintenance remind
ers — oil change, tire rotation, or inspection.
⚙️ How it works:
Users enter their service details → Flask API saves them → reminders are displayed dynamically in the dashboard.
🎯 Purpose:
To keep vehicles in top condition and reduce long-term maintenance costs.
🧑💼 Admin Panel
A dedicated admin dashboard helps manage all users, logs, and activities in one place.
⚙️ How we built it:
Using Angular, styled with TailwindCSS for a sleek professional look.
🎯 Purpose:
To make data management efficient and secure for both users and admins.
🔐 Authentication & Email System
Security was a top priority.
We implemented JWT authentication for all APIs and added Flask-Mail for OTP-based signup/login verification.
🎯 Purpose:
To keep every user’s data safe and ensure a professional-grade authentication flow.
🏡 Additional Pages
To make the platform polished and user-friendly, we added:
Hero Section: Welcoming users with purpose and design.
About Page: Explaining AutoLog.AI’s mission.
Footer & Policy Pages: For a complete, professional touch.
🛠️ Tech Stack
Layer Technologies
Frontend Angular, TypeScript, TailwindCSS
Backend Flask, Flask-Mail, Flask-Admin, JWT
AI Google Gemini API
OCR Tesseract.js
Database SQLite
📖 The Journey Behind AutoLogAI
AutoLog.AI wasn’t built overnight.
It started as a simple idea: “What if cars could talk back?”
From that spark, came a 3-month journey of:
Late-night debugging sessions 🌙
Designing every page from scratch 🎨
Integrating AI, OCR, and authentication 🔧
This project taught me the beauty of patience, consistency, and innovation.
Now, it stands complete — proof that passion and persistence can turn an idea into a product.
🔗 GitHub Repository
AutoLogAI - by Saad Bin Khalid
AutoLog.AI on GitHub
📜 License
Licensed under the MIT License — free to use, learn from, and improve upon.
💬 Final Thoughts
“AutoLog.AI isn’t just a web app — it’s a reflection of a dream, hard work, and belief.”
💚
Top comments (0)