Drive Fleet: A modern vehicle booking management portal

Drive Fleet: A sleek Next.js portal for seamless vehicle rentals and fleet management. Seamlessly browse, book, and list cars with secure authentication and a modern, responsive UI.

Comment

Inspiration

The idea for Drive Fleet sparked from a common frustration: the chaotic nature of renting vehicles or managing a fleet. Most existing platforms are either clunky legacy systems or overly complex corporate tools. I wanted to build something that bridges that gap—a platform that feels as smooth and intuitive as a modern SaaS tool, yet robust enough to handle data-heavy tasks.

I envisioned a marketplace where individual owners could list their cars effortlessly and customers could book them without a single friction point. Combining my passion for clean user experiences with modern web technologies, I set out to build a highly responsive, secure, and lightning-fast portal.

What it does

Drive Fleet is a dynamic, client-side vehicle booking and fleet management ecosystem. It splits the user journey into two fluid roles:

  • For Customers: It offers an optimized Explore Cars engine where users can search, filter by vehicle metadata, and securely book rides. Their personal journey is completely trackable via a dedicated My Bookings dashboard.
  • For Fleet Owners: It acts as an administrative portal. Once authenticated, owners gain access to a structured Add Car portal to input metadata (rates, model types, specifications) and a My Added Cars dashboard to manage their digital fleet in real time.

The entire interface seamlessly adapts to user states, features fluid animations, and supports global dark/light mode toggle for accessibility.

How we built it

Building Drive Fleet required a bleeding-edge JavaScript stack optimized for performance and modular architecture:

  • The Blueprint: I used Next.js 16 (App Router) alongside React 19 to leverage server-side data fetching for the catalog, maximizing speed and SEO.
  • Styling & Motion: The interface is built using Tailwind CSS v4 with @tailwindcss/postcss for fluid layout mechanics, complemented by Framer Motion for elegant UI transitions and Lucide React for crisp icons.
  • Authentication & State: I integrated Better Auth paired with a @better-auth/mongo-adapter. User sessions are monitored client-side via authClient.useSession(), while route guards are enforced by an interception layer in src/proxy.js.
  • Data Validation: Forms are managed via React Hook Form to catch client-side anomalies instantly before they ever reach the backend database.

Challenges we ran into

One of the steepest hurdles was managing a decoupled architecture. Because the application utilizes an isolated frontend client pointing to an external backend server (NEXT_PUBLIC_SERVER_URL), handling state synchronization across distinct environments was tricky.

Additionally, optimizing dynamic server-side filtering on the /explore page without destroying user performance took a lot of trial and error. To properly balance the database load when applying multiple overlapping search parameters, I had to compute the operational efficiency of our filtering algorithms.

For instance, if the backend processes $n$ available vehicles across $m$ active filter criteria, a naive nested iteration runs at a time complexity of:

$$O(n \times m)$$

By restructuring the query data parsing on the server and implementing URL search parameter synchronization on the client, we optimized the lookup matrix. If $k$ represents the average number of matching vehicles indexed by a hash map of filters, the search efficiency drastically improved to roughly:

$$O(m + k)$$

This ensured that UI filtering remained completely instantaneous for the end-user.

Accomplishments that we're proud of

  • Robust Middleware Guards: Creating a bulletproof routing architecture in src/proxy.js that flawlessly catches unauthenticated users and redirects them without flash-of-unstyled-content (FOUC) bugs.
  • Next.js 16 & Tailwind v4 Integration: Successfully migrating and implementing the newest layout mechanics of Tailwind v4 and React 19 hooks, ensuring the platform is highly future-proof.
  • Fluid UX: Designing a cohesive visual flow where toast notifications (react-toastify), modal states, and theme switching operate in perfect harmony.

What we learned

This project was an incredible masterclass in modern authentication lifecycles. Diving deep into Better Auth taught me how JWT sessions are parsed, structured, and securely transmitted between clients and decoupled backend architectures.

I also sharpened my skills in state management—specifically, learning how to let the URL act as the "single source of truth" for filters, which makes page states infinitely shareable and bookmarkable for users.

What's next for Drive Fleet: A modern vehicle booking management portal

Drive Fleet has a strong foundation, but the roadmap ahead is ambitious:

  • Interactive Analytics Dashboard: Integrating charting libraries to show fleet owners their monthly revenue, vehicle utilization rates, and booking trends.
  • Real-time Geolocation: Adding map APIs to track vehicle locations and allow users to search for cars within a specific mathematical radius.
  • In-App Payment Gateway: Hooking up Stripe or a similar processor to turn booking reservations into real, secure financial transactions.
  • Automated Email Reminders: Setting up current jobs to send automated booking confirmations and rental return reminders to customers.

Built With

  • betterauth
  • custom-proxy
  • express.js
  • framermotion
  • google-oauth-api
  • javascript
  • json-web-token
  • lucide-react
  • mongodb
  • next-themes
  • next.js
  • react
  • react-hook-form
  • rest-api
  • tailwindcss
  • vercel
Share this project:

Updates