Web Application Case Study
Tuk Tuk Drive: Automated Booking Web App
A comprehensive web application designed to connect adventurous travelers with local tuk-tuk owners in Sri Lanka, providing an authentic, immersive, and sustainable travel experience.
Project Overview
TukTukDrive.com replaces the traditional, often cumbersome, rental process with a seamless online booking system, while also serving as a rich content hub for anyone looking to explore Sri Lanka. The project is split into two main parts: a public-facing website for travelers and a powerful admin dashboard for business management.
Public-Facing Website
This is the primary interface for the end-user, designed to be engaging, informative, and easy to use.
Travelers can select rental dates, choose from available tuk-tuks, provide their details, and process payments securely, receiving instant booking confirmations.
This system reads from and writes to a robust SQL database on Google Cloud, managing availability, pricing, and customer information in real-time.
A fully-featured CMS attracts and informs potential customers with articles about Sri Lankan travel. The blog highlights featured posts and categorizes content to inspire travelers.
Each post can have a unique, dynamically applied color scheme controlled from the admin panel. All content, including rich text, images, and tags, is pulled from the Google Cloud SQL database.
Essential pages like 'About Us,' 'Terms and Conditions,' and 'Privacy Policy' build trust and provide legal clarity for users.
Intelligent Pricing Engine
The platform moves beyond simple fixed pricing, utilizing a dynamic calculation engine that builds the total rental cost in real-time. This ensures fair and transparent pricing for the customer, reflecting their unique selections.
Base Rental Cost
The core rental price is calculated based on the number of days and vehicles, offering flexibility for both solo travelers and larger groups.
Location-Based Adjustments
The cost dynamically adapts based on the traveler's chosen pickup and drop-off points, ensuring fair pricing for logistical requirements.
Service & Administrative Fees
Standard fees are seamlessly integrated into the total cost to cover essential operational services.
Customizable Add-Ons
A key advantage for travelers is the ability to customize their rental with optional "add-ons," each seamlessly integrated into the final price. This empowers travelers while creating multiple revenue streams for the business.
The system intelligently calculates costs for any necessary local driving permits or licenses based on the number of drivers.
A flexible system allows the business to offer various add-ons, giving travelers the option to rent specialized gear for their trip.
The platform can handle unique requests, like coordinating vehicle transfers to and from local transport hubs, with any associated costs clearly outlined.
The Seamless Booking Experience
The process from vehicle selection to final confirmation is designed to be a smooth, secure, and transparent journey for the customer, highlighting the advantages of a modern web application.
- Effortless Configuration: The customer easily selects their travel dates, locations, vehicle quantity, and any desired add-ons through an intuitive user interface.
- Transparent, Real-Time Quotes: As selections are made, the dynamic pricing engine instantly calculates and displays the total rental price, providing complete transparency and eliminating surprises.
- Secure & Simple Payment: The user proceeds to a secure, integrated payment gateway to complete the transaction with confidence.
- Instant Peace of Mind: Upon successful payment, the system automatically sends a detailed confirmation email, providing the customer with all essential booking details for their records.
Admin Dashboard
A secure, all-in-one control center for the business owner to manage every aspect of the platform.
A central hub provides at-a-glance analytics on business performance, including key metrics like 'Total Revenue' and 'Last 30 Days Revenue.'
Interactive charts show booking trends and revenue over time, with a list of upcoming pickups and returns for easy operational planning.
A comprehensive view of all bookings made through the site, allowing the admin to see customer details, rental dates, and payment status for every booking.
Admins have full control over the website's content, with the ability to create, edit, and delete posts using a rich text editor. A simple checkbox marks posts as 'featured.'
A key feature is the drag-and-drop reordering of featured posts, which automatically updates their position on the public website, providing incredible flexibility for marketing.
Key Technical & Business Features
Dynamic Pricing Engine
Calculates rental costs based on duration, vehicle count, locations, and optional extras.
Customizable 'Extras' System
Allows users to add items like licenses, special equipment, and transfers to their booking.
Comprehensive Admin Dashboard
A control center for managing bookings, viewing revenue analytics, and overseeing all operations.
Full-Fledged Content Management System (CMS)
An integrated blog with dynamic color palettes and drag-and-drop reordering for featured posts, serving as a powerful marketing tool.
Automated Booking Confirmation
Sends detailed confirmation emails to customers upon successful payment.
Real-Time Data Management
Built on a robust SQL backend, ensuring that all data on the admin dashboard and public site is always up-to-date.
Modern Tech Stack
Utilizes Next.js, TypeScript, and Tailwind CSS for a fast, reliable, and scalable application.
Technology Stack
The project is built on a modern, robust, and scalable technology stack.
Next.js
A powerful React framework for fast, server-rendered applications.
TypeScript
Adds static typing to JavaScript for improved code quality.
Tailwind CSS
A utility-first CSS framework for rapid UI development.
Google Cloud
Provides the backend infrastructure for the application.
SQL Database
A flexible and scalable SQL database for storing all booking and blog data.
Chart.js
For creating beautiful and interactive charts on the admin dashboard.
Jodit-React
A powerful rich text editor for easy blog content formatting.
Project Summary
This project is a perfect example of a modern, full-stack application that solves a real-world business need while providing a high-quality user experience.