DEV Community: Saad Bin Khalid

🚗 AutoLog.AI — Smart Vehicle Management with AI, OCR & Automation

Saad Bin Khalid — Thu, 30 Oct 2025 14:43:33 +0000

🌟 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.”
💚

Just Deploying my First Project using Angular and Flask

Saad Bin Khalid — Wed, 22 Oct 2025 14:36:23 +0000

ChatWat - RealTime Chat App

Saad Bin Khalid — Wed, 22 Oct 2025 14:34:47 +0000

ChatWat is a full-stack real-time chat application built with the MERN stack — a blend of performance, modern design, and clean developer logic. It’s designed not just to chat, but to showcase how a real-world messaging system works end-to-end — from authentication to socket-based real-time updates.

🚀 What’s Inside

ChatWat isn’t just about messages — it’s about structure, scalability, and simplicity:

🔐 Authentication System – Secure login and signup with JWT-based authentication.

💬 Real-Time Chatting – Instant messaging powered by Socket.io for live communication.

👤 User Management – Unique user sessions, online/offline indicators, and contact lists.

🎨 Modern UI – Built with React + TailwindCSS, focusing on a clean, minimal, and responsive interface.

⚙️ Scalable Backend – Node.js and Express.js working seamlessly with MongoDB to ensure flexibility and performance.

🛠️ Tech Stack

Frontend: React + TailwindCSS

Backend: Node.js + Express.js

Database: MongoDB (Mongoose ODM)

Real-Time: Socket.io

Deployment: Vercel (Frontend) + Render (Backend)
Link: ChatWat

🌍 The Vision

ChatWat began as a challenge to merge simplicity and power — to create a fully functional chat experience that’s beautiful, lightweight, and developer-friendly. The goal was to design something every dev could learn from or build upon, whether to add AI chatbots, group systems, or notification features later on.

💡 The Name

ChatWat — because every dev starts with curiosity:

“What if I could build a chat app from scratch?”
And ChatWat is that “what” turned into reality.

NeuroVisionX - AI Powered Face & Hand Detection WebApp

Saad Bin Khalid — Tue, 07 Oct 2025 13:22:33 +0000

I recently built NeuroVisionX, a web application that brings AI-powered face and hand detection directly into your browser. Using ReactJS for the frontend and TailwindCSS for smooth, responsive design, the project focuses on delivering real-time computer vision without any server dependency. Everything happens right on your device — private, fast, and futuristic.

You can explore the project here: Live Demo: https://neurovisionx.vercel.app | GitHub Repo: https://github.com/Saadbkhalid666/NeuroVisionX . I’m incredibly proud of this one — it’s more than code; it’s a glimpse of how AI and web technologies can merge into a truly interactive digital experience. 💻✨

How can I stop a fixed Three.js model from scrolling into the next section in Angular (using GSAP + ScrollTrigger)?

Saad Bin Khalid — Mon, 06 Oct 2025 07:44:13 +0000

Hey everyone 👋

I'm working on an Angular landing page where I'm rendering a Three.js car model using a <canvas> inside a fixed wrapper. The model is animated with GSAP + ScrollTrigger so that it moves between the Hero and About sections.

Everything works as expected there... EXCEPT when I scroll further down to the Services section. Because the model is position: fixed, it continues to appear over that section — which I don’t want.

What I Need

I want the 3D model to:

Only appear between the Hero and About sections

Stop/freeze when the About section ends

NOT scroll into the Services section

Not disappear — just stop moving after About

HTML Structure

car-model.html
html

home.html:

car-model.css:
.model-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 10;
}

.model-wrapper.stopped {
position: absolute;
top: auto;
bottom: 0;
}

car-model.ts (Relevant ScrollTrigger Code):
gsap.registerPlugin(ScrollTrigger);

gsap.set('#car', {
x: 500,
});

gsap.to('#car', {
x: () => {
const para = document.querySelector('#aboutContent') as HTMLElement;
if (para) {
const rect = para.getBoundingClientRect();
const screenCenter = window.innerWidth / 2;
return rect.left - screenCenter - 500;
}
return -100;
},
scrollTrigger: {
trigger: '#about',
start: 'top center',
end: 'top top',
scrub: true,
},
});

ScrollTrigger.create({
trigger: '#about',
start: 'bottom top',
onEnter: () => document.getElementById('car')?.classList.add('stopped'),
onLeaveBack: () => document.getElementById('car')?.classList.remove('stopped'),
});