Explore, book, and manage rental cars with a clean, secure, and responsive full-stack web application.
DriveFleet is a modern, full-stack car rental platform designed to make exploring and booking rental cars a smooth, intuitive, and highly responsive experience. Built with Next.js (App Router), React 19, BetterAuth, and MongoDB, the platform bridges the gap between travelers and available fleets. Users can search and filter for cars, complete real-time bookings, and access a personalized dashboard to manage their listings and bookings.
- Better Auth Integration: Standard credential-based sign-up and login workflows.
- Social Login: One-click authentication with Google Sign-In.
- JWT & HTTPOnly Cookies: Highly secure session storage with cookie caching for optimal speed.
- Protected Routes: Middleware authorization preventing unauthorized access to booking, adding, or managing car records.
- Car Listings: Owners can add, view, update, and delete their own car listings.
- Availability Management: Instant toggle of car availability status dynamically updated on the explore portal.
- Booking Flow: Users can easily reserve available cars.
- Add-on Services: Select driver options and include personalized booking notes.
- My Bookings Dashboard: Track active bookings, booking history, and driver preferences.
- Dynamic Search: Instantly look up cars by name using MongoDB Regex matching.
- Category Filter: Filter car listings by type/category.
- Real-Time Rendering: Database results update instantly on the Explore Cars page.
- Frontend Core: Next.js 16 (App Router, Server Components) & React 19
- Authentication: Better Auth with MongoDB Adapter
- Database: MongoDB via native driver
- Styling: Tailwind CSS v4 & DaisyUI v5
- UI Components: HeroUI (
@heroui/react,@heroui/select, &@heroui/styles) - Animations: Animate.css
- Toast Notifications: React Toastify
Below are the primary packages power-steering the DriveFleet application:
- Framework & UI Core:
next:16.2.6react:19.2.4react-dom:19.2.4
- Authentication & Database:
better-auth:^1.6.11@better-auth/mongo-adapter:^1.6.11mongodb:^7.2.0
- UI Components & Styles:
@heroui/react:^3.0.5@heroui/select:^2.4.33@heroui/styles:^3.0.5react-hook-form:^7.76.0
- Icons & Notifications:
@gravity-ui/icons:^2.18.0lucide-react:^1.16.0react-icons:^5.6.0react-toastify:^11.1.0@contentstack/react-toastify:^6.1.5animate.css:^4.1.1
tailwindcss&@tailwindcss/postcss:^4(Next-gen styling framework)daisyui:^5.5.20(Utility-first Tailwind components)babel-plugin-react-compiler:1.0.0(React compiler optimization)eslint&eslint-config-next:16.2.6
Create a .env (or .env.local) file in the root folder of the project and specify the following variables:
# Better Auth Configuration
BETTER_AUTH_SECRET=your_better_auth_secret_key
BETTER_AUTH_URL=http://localhost:3000
# Google OAuth credentials (for social logins)
GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your_google_client_secret
# Database Details
MONGO_URI=your_mongodb_connection_uri
# Express Backend API URL (If utilizing a companion REST API backend)
NEXT_PUBLIC_SERVER_URL=http://localhost:5000Follow these steps to set up and run the DriveFleet client on your local machine:
Ensure you have cloned the project and are in the root directory:
cd DriveFleetInstall all required Node.js packages:
npm installConfigure your environment variables by creating a .env or .env.local file inside the root directory and updating the values. See the Configuration & Environment Setup section.
Launch the Next.js development server:
npm run devOpen http://localhost:3000 inside your web browser.
Note
This application routes server data operations through the REST backend located at NEXT_PUBLIC_SERVER_URL (typically http://localhost:5000). Make sure your companion Express server is active if applicable.
- Live Deployment: https://drive-fleet-nu.vercel.app/
- Next.js Documentation: Next.js Docs
- Better Auth Documentation: Better Auth Docs
- MongoDB Node Driver: MongoDB Docs
Developed with ❤️ by Balanced0