Frontend Case Study:
TruBooker - Transport Management Platform

project-imageproject-imageproject-imageproject-image

Project Overview

TruBooker is a transport management platform that allows drivers and public corporations to list vehicles, sell tickets, and manage schedules. The platform also enables agents to earn through referrals and passengers to book tickets with ease. My role as the Frontend Engineer focused on building the Admin Dashboard, Agent Web App, and the Landing Page.

My Contribution

Tech Stack:

TypeScriptNext.jsRedux ToolkitReact HooksTailwind CSSGit & GitHub(CI/CD)PerformanceHTML5CSS3Web AccessibilityAgileSSRIntegration TestingReact ChartPayStack APIGoogle Map API Integration

🧑‍💻Key Features I Built

1. Admin Dashboard

  • ⚪ Real-time Driver & Trip Management: Integrated live tracking functionality using Google Map API to allow admins to monitor driver movement and trip progress in real-time.
  • ⚪ Revenue Tracking: Built a system to monitor total revenue from ticket sales and agent commissions.
  • ⚪ Driver Performance Management: This enabled admins to track driver performance and trip history.

2. Agent Web App

  • ⚪ Referral Management System: Built a referral system that allows agents to invite passengers and earn commissions on each successful booking.
  • ⚪ Wallet System: Integrated agent wallet management, allowing agents to receive earnings and request withdrawals to their bank accounts.
  • ⚪ Earnings Dashboard: This enabled agents to track their revenue, referrals, and commission history.

3. Landing Page

  • ⚪ Responsive and High-Converting Design: Built a fast and user-friendly landing page with Tailwind CSS to allow passengers to book tickets and view available routes.
  • ⚪ Local Currency Support: Integrated Paystack API for seamless payments in local currency.

Performance Optimization

  • ⚪ Leveraged Next.js Server-Side Rendering (SSR) and Static Site Generation (SSG) for faster page load times and improved SEO.
  • ⚪ Used Redux Toolkit for efficient state management, reducing unnecessary re-renders and improving data flow.

Business Impact

  • ✅ Improved admin efficiency in managing trips, drivers, and revenue.
  • ✅ Increased agent engagement with the referral and earnings tracking system
  • ✅ Boosted passenger satisfaction with a seamless booking experience and local payment support.
  • ✅ Enhanced platform performance and SEO through Next.js optimization.