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.
Premier Car Rental was built as a modern, interactive car rental platform demo. It addresses the unique requirements of Malawian vehicle booking operations, linking major cities (Blantyre, Lilongwe, Zomba, etc.) and pick-up hubs with an interactive map, and providing an end-to-end flow from browsing to payment, and live support chat.
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 relational 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)
- PostgreSQL database instance (or a local SQLite server configuration)
-
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="your-database-connection-string" 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
This software is licensed under a Non-Commercial License.
- Permission: You are free to read, clone, modify, and build upon this code for personal, educational, or testing purposes.
- Restriction: You are strictly prohibited from distributing, sublicensing, or selling this codebase, any portion of it, or any derivatives thereof for commercial use or monetary gain.
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.