Imagine a world where you never have to log mileage manually again. DriveMate runs silently in the background, tracks every trip automatically, and —whenever you need—turns your drives into polished, tax-ready reports with a single tap.

Built entirely with React Native, Nest.js, Azure SQL, and a fully integrated Tesla Fleet API, DriveMate gives freelancers, salespeople, and constant travelers a hassle-free way to keep their mileage organized, accurate, and effortless.

DriveMate uses native iOS and Android auth screens, so Face ID / Touch ID and system passcode prompts feel completely familiar. After a singleemail/password login, users just tap “Authorize with Tesla” and confirm with biometrics—no extra forms or manual tokens.

Access sessions are kept short by design. When a token expires, the app quietly refreshes it in the background and shows a lightweight loader instead of throwing users back to a login screen. Errors surface as clear, inline messages with retry actions, not cryptic dialogs.

The Tesla connect flow is fully in-app: we open the official OAuth screen in a secure web view, guide the user step-by-step, and visually indicate progress while the one-time code verifier and challenge are exchanged behind the scenes.

The permission sheet clearly explains why DriveMate needs “vehicle info” and “vehicle_location” using human-readable labels and short descriptions. Each permission is shown as a separate toggle, so users always know exactly what they’re granting before they tap “Allow".

Together, these frontend flows make connecting Tesla accounts feel fast, native, and trustworthy — while all the security heavy lifting happens invisibly in the background.

I built the manual trip logging flow so that the entire interaction feels as light as tapping a few points on the screen. The user chooses the destination directly on the map, confirms it, and the app immediately records the drive without any complex forms or friction. Everything happens inside a single React Native view, so the experience stays quick and mobile-native. For the route preview, the app listens to location changes and updates the UI in real time using React Native Maps. As soon as coordinates are selected, the interface renders a live route line, while the backend calculates distance, timing, and battery usage. The UI reacts instantly once the numbers come back, making the route feel dynamic and responsive rather than static.

Each saved trip opens into a rich, interactive screen showing the path on a map, timestamps, and contextual stats. All analytics arriving from the API — mileage, energy consumption, weather conditions — are displayed through reusable components I built specifically for this purpose.

On the Trips screen, users can quickly navigate through their history: switching between active and completed trips, filtering by vehicle, category, or date range, and reorganizing the list however they want.

I implemented a full Pro subscription fllow end‑to‑end: on the React Native front end I used react‑native‑iap to surface native iOS/Android purchase sheets and send receipts to our Nest.js backend, where a SubscriptionService validates Apple and Google tokens, records status in Azure SQL, and processes real‑time webhooks plus daily cron checks. This gave the client a seamless in‑app purchase experience with instant feature unlocks, automated renewals and cancellations, and eliminated manual billing headaches — driving higher subscription uptake and cutting support overhead.

Users can reach support directly from the Profile tab — no emails, no tickets, no waiting. If they haven’t chatted before, the app shows a clean, friendly empty state that invites them to start a conversation. As soon as a message is sent, the chat list fills with threads that show avatars, short previews, timestamps, and unread indicators, making it easy to keep track of ongoing conversations.

Opening any thread takes the user into a real-time chat view where messages update immediately. Incoming messages appear in one style, outgoing in another, and the input supports everything from plain text to images, documents, and quick links. File attachments appear with thumbnails and size labels so users always know exactly what they’ve shared. Once an issue is taken care of, the agent marks the conversation as resolved—but the entire history stays available. Users can return to past chats, reopen a discussion, or start a completely new one whenever they need.

The entire support experience is built to feel immediate, personal, and fully integrated right inside the app.

DriveMate isn’t just a mobile app — it’s an entire ecosystem designed to automate and simplify mileage tracking from end to end. The mobile client handles everything the user touches: smooth automatic and manual trip detection, quick categorization, visual trip insights, clean exports, and built-in customer support that works right inside the app.

Behind it, I engineered a robust backend using Nest.js with Azure SQL, secure token workflows, scheduled jobs, and webhook integrations to keep trip processing and syncing fast and reliable. To round out the platform, I also built a full Admin Dashboard for real-time monitoring and management of users, trips, plans, and subscriptions. Alongside that, I developed a modern marketing website focused on showcasing the product, improving SEO, and converting traffic into paying customers.

The result is a cohesive, production-ready system — mobile app, backend services, admin suite, and promo site — all working together as one polished product.