A premium, responsive, and full-featured car rental platform demo tailored for the Malawi market. This platform allows users to browse and book vehicles, select pick-up/drop-off locations, make secure payments, and chat with support. It also features a robust Admin Dashboard for fleet management, booking logs, driver scheduling, real-time customer support chat, and financial analytics.
- About the Project
- Problem Statement & Proposed Solution
- Features Walkthrough
- Technology Stack
- Getting Started
- Acknowledgements
Premier Car Rental was built as a modern, interactive web platform tailored to digitize vehicle rental operations in Malawi. Linking major hubs (Blantyre, Lilongwe, Zomba, etc.) with an interactive map catalog, the platform establishes an end-to-end digital ecosystem-from vehicle discovery and real-time inventory tracking to secure online payment checkout, automated receipt compilation, and real-time support chat.
Vehicle rental operations at Premier Car Rental Malawi rely primarily on physical logbooks and paper-bound administrative procedures:
- Logbook-Based Inventory Audits: When a client requests a vehicle, sales managers manually inspect physical logbooks to verify vehicle availability and cross-reference requested rental windows.
- Ad-Hoc Quotation & Invoicing: Available bookings require staff to draft individual written quotations detailing rental tariffs, duration terms, and deposit terms. Upon client acceptance, invoices are compiled manually to request settlement.
- Decoupled Payment Verification: Transactions are settled offline via cash, bank wire transfers, or mobile money services. Upon receiving proof of payment, staff manually update physical logbooks and local spreadsheets to confirm reservations.
- Isolated Telematics Data: While active vehicles are tracked in real time using standalone GPS hardware for loss prevention, telematics data remains disconnected from the central reservation log.
This paper-bound operational structure presents six critical systemic challenges:
- Constrained Market Access: The lack of a web-based booking portal restricts market reach, preventing domestic customers, corporate clients, and international tourists from discovering or reserving vehicles online.
- Reservation Conflict & Scheduling Friction: Paper logbook management introduces vulnerability to overbooking, omitted reservations, conflicting vehicle allocations, and administrative revenue loss.
- Decentralized Fleet Observability: The absence of a unified data store obscures vehicle usage history, maintenance schedules, and real-time status, causing delays during vehicle allocation.
- Asynchronous Client Communication: Without automated messaging infrastructure, clients receive no systematic notifications regarding booking confirmations, rental period boundaries, schedule adjustments, or overdue returns.
- Frictional Payment Reconciliation: Offline payment processing creates verification lags, administrative accounting overhead, and increased risk of ledger discrepancies.
- High-Latency Customer Support: Traditional phone and walk-in support channels slow response times to client inquiries, driving potential customers toward responsive alternatives.
Premier Car Rental introduces a web platform and unified database architecture engineered to resolve these six operational constraints:
- Global Web Portal & Catalog (Resolves: Constrained Market Access): Delivers an accessible, responsive web application for local and international users to explore vehicle inventories, query dynamic rates, and initiate bookings remotely.
- Automated Booking & Inventory Engine (Resolves: Reservation Conflict & Scheduling Friction): Replaces physical logbooks with a centralized reservation engine (Prisma / MongoDB) that dynamically locks inventory, eliminating double-bookings and scheduling collisions.
- Centralized Fleet & Maintenance Analytics (Resolves: Decentralized Fleet Observability): Consolidates vehicle histories, maintenance logs, and real-time operational statuses into an administrative dashboard for immediate fleet visibility.
- Automated Dispatch & Notification System (Resolves: Asynchronous Client Communication): Triggers automated communications for booking confirmations, rental period boundaries, schedule updates, and return reminders.
- Integrated Payment Processing & Invoice Generation (Resolves: Frictional Payment Reconciliation): Integrates secure checkout gateways (Stripe) to process tokenized transactions instantly, calculate multi-day tariffs automatically, and compile detailed PDF-ready invoices for accounting and audit compliance.
- Real-Time Client-Admin Messaging (Resolves: High-Latency Customer Support): Incorporates real-time chat primitives (Sendbird SDK) enabling low-latency communication between prospective clients and fleet dispatchers.
A clean, premium landing page designed to invite users to explore available vehicles. It features an interactive location and date search panel.
- Featured Page: Landing Page Hero
- Visual:
Secure user onboarding and registration pages powered by Clerk, dividing registration into a multi-step user-friendly wizard.
- Pages: Sign In & Multi-Step Sign Up
- Visuals:
The vehicles listing page displays all available cars side-by-side with an interactive Leaflet map marking pick-up hubs across Malawi. The map remains sticky on the right, allowing independent scrolling of the catalog on the left.
- Featured Page: Vehicles Catalog
- Visual:
A redesigned details page with generous screen width utilization (max-w-[1440px]) showing car specifications, a checklist of features, rules of the road, peace-of-mind assurances, and a desktop-sticky reservation panel.
- Featured Page: Vehicle Details View
- Visual:
Stripe-integrated payment checkout interface calculates the total rental fee before taxes and securely processes transactions. Upon completion, a clean success screen displays the booking outline.
- Featured Pages: Stripe Checkout & Success Page
- Visuals:
Customers can view their booking log in a tabular dashboard and start a real-time live support chat with operators.
- Featured Pages: Client Bookings & Real-Time Support Chat
- Visuals:
The admin panel offers deep observability and control over operations, scheduling, and chat resolutions.
A general overview of key metrics, including active rentals, pending returns, and maintenance items.
- Featured Page: Admin Main Dashboard
- Visual:
Allows administrators to view their entire fleet list, update details, delete records, or add new vehicles via a dedicated form modal.
- Featured Pages: Fleet Catalog & Add Vehicle
- Visuals:
Enables staff to view and schedule certified drivers to accompany rentals when selected by the user.
- Featured Page: Admin Driver Board
- Visual:
An admin-facing live chat inbox panel to chat with multiple clients in real-time, resolving support requests quickly.
- Featured Page: Admin Live Chat Support
- Visual:
Visual charts displaying monthly revenue trends, vehicle statuses (Available, Rented, Maintenance), and maintenance expense distributions.
- Featured Pages: Analytics Panels
- Visuals:
The platform is designed around a modern Next.js React architecture, integrating standard service modules to manage database state, secure checkout, real-time client chat, and dynamic map rendering.
- Next.js 15 (App Router): Orchestrates Server-Side Rendering (SSR), Static Site Generation (SSG), React Server Components (RSC), and serverless API endpoints.
- React 19: Serves as the UI component library.
- TypeScript: Establishes type-safe code logic, model checks, and API validation.
- Prisma Client & ORM: Connects next-server queries to the MongoDB database using type-safe schema modeling.
- Clerk Authentication: Powers user profile management, security checkpoints, and authentication flows.
- Stripe Payments: Processes secure, compliance-ready online card payments and tokenized transactions.
- Sendbird Chat SDK & UIKit: Provides a fully-featured client-to-admin communication system.
- Leaflet & OpenStreetMap (react-leaflet): Renders pick-up regions and interactive pins dynamically.
- Cloudinary (next-cloudinary): Serves, optimizes, and transforms vehicle media assets.
- Tailwind CSS: Implements responsive styling, fluid layout grids, and visual custom properties.
- Radix UI Primitives (Shadcn): Headless and accessible overlay models, dropdowns, popovers, select fields, and command bars.
- Zustand: Lightweight state store managing global client states such as selected locations and user data.
- Framer Motion & GSAP: Powers sidebar collapses, list transitions, and interactive visual animations.
- React Datepicker & react-day-picker: Drives date inputs and reservation calendars.
- Lucide Icons: Modern iconography set.
- Date-fns: Handles calculations for check-in durations and checkout date ranges.
- Node.js (v18.x or newer)
- MongoDB instance (MongoDB Atlas cluster connection URI)
-
Clone the repository:
git clone <repository-url> cd premier_car_rental_mw
-
Install dependencies:
npm install
-
Configure environment variables: Create a
.envfile in the root directory and populate it with your credentials:DATABASE_URL="mongodb+srv://<username>:<password>@<cluster>.mongodb.net/premier_car_rental?retryWrites=true&w=majority" NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-key" CLERK_SECRET_KEY="your-clerk-secret" STRIPE_SECRET_KEY="your-stripe-secret" NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your-stripe-publishable" NEXT_PUBLIC_SENDBIRD_APP_ID="your-sendbird-id" NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your-cloudinary-name"
-
Initialize database schema:
npx prisma generate npx prisma db push
-
Start the development server:
npm run dev
Inspired by CarHive. The UI/UX decisions, warm beige color palettes, and interactive map components were heavily inspired by the elegant interface design of their platform.