On-Road Vehicle Breakdown Service
Developed a multi-user emergency roadside web application using Next.js featuring 24/7 real-time SOS tracking, live location monitoring, and role-based dashboards for Users, Garages, and Admins, supported by comprehensive diagnostics via RESTful APIs. The system includes secure transaction processing through an integrated SSLCommerz payment gateway and implements a subscription service for real-time bookings and status updates, ensuring robust data integrity with fully validated Zod and React Hook Form inputs.
Key Highlights & Features
Core architecture capabilities & functional highlights
Real-time chat with Socket.io
Secure Payment integration with Stripe
User authentication using NextAuth
Mechanic dashboard for managing incoming requests
System Overview & Workflow
In-depth technical architecture, engineering choices, and business impact
The On-Road Vehicle Breakdown Service is a real-time platform designed to provide emergency assistance to vehicle owners during unexpected breakdowns. The goal of this project was to bridge the gap between stranded drivers and nearby professional mechanics, ensuring safety and reducing wait times on the road.
Key Objectives:
- To provide instant location-based mechanic discovery.
- To ensure a seamless booking process for emergency services.
- To build a reliable bridge for mechanics to find nearby jobs efficiently.
The Technical Challenge
The primary challenge was engineering a highly responsive, mobile-first interface that could handle complex real-time states. Since users are often stranded on the road when using this service, the UI needed to be extremely intuitive and performant under low-bandwidth conditions. Synchronizing the frontend state with the backend during the multi-step booking flow—transitioning from mechanic discovery to live request status—while ensuring a lag-free experience across different devices, required a deep understanding of asynchronous UI logic.
Engineered Solution
To ensure a premium user experience, I architected the frontend using Next.js and Tailwind CSS, implementing a clean, accessible UI with smooth micro-animations for better engagement. I leveraged TanStack Query for robust API data fetching and synchronization, ensuring the user always sees the most up-to-date mechanic availability without manual refreshes. To manage the intricate booking lifecycle (search, accept, progress), I utilized Redux Toolkit for centralized state management. Additionally, I integrated React Hook Form with Zod for bulletproof client-side validation, ensuring that all emergency requests are accurate and error-free before they reach the server
Interface & Key Screens
Click any image to inspect, zoom, and pan in full-screen
Add More Screenshots
Currently 1 primary banner is uploaded. You can add up to 3 additional feature screenshots in the Admin Dashboard.
Open Admin Dashboard