TruckBhai (ট্রাকভাই) is a mobile-first transport booking platform connecting
Customers and Drivers, with oversight from Admins. It's designed for Bangladesh
with global scalability, featuring gamification, campaigns, multilingual support,
trust-first onboarding, and a smooth UX/UI.
🛠 Technology Stack;
Frontend: React Native (Mobile) + React/Vue (Web Dashboard if needed)
Backend: [Link] (Express)
Database: PostgreSQL
Authentication: Username/Password with JWT refresh tokens (fixes session expiry)
Image Storage: Base64 in DB for MVP (later → cloud storage like S3)
Multi-language: English + Bangla (i18n toggle)
🎨 Branding & Logo
Logo: Top-left header icon (no text).
Style: Minimal silhouette of a truck front/container, vector style.
Theme colors: Blue primary + sWhite/Navy contrasts.
Scales for favicon, header icon, and mobile splash screen.
👥 User Rolesy
Admin: Approves users, manages system, broadcasts campaigns.
Customer: Posts jobs/bookings with shipment photos & details.
Driver: Views jobs, accepts/counter-offers, completes rides.
🔐 Authentication
Default Admin: Jack / Admin@123 (hidden, hardcoded in MVP).
Customers/Drivers self-register → must be approved by Admin before active.
Authentication with JWT refresh tokens (persistent sessions, no auto logout).
📲 Core Features
👤 Customers
Post Booking with form:
Pickup & Delivery location (text input)
Date & Time pickers
Vehicle Type (Truck/Pickup/Motorcycle)
Offered Price
Contact Number
Mandatory Multiple Shipment Photos (from camera + gallery)
CTA: “Post Booking”
My Bookings Dashboard
Shows ongoing jobs + offers.
Drivers’ counter-offers trigger notifications.
Customer can Accept/Decline offers.
Booking History
All past jobs with duration, vehicle, images (click to zoom).
Tracks totals for Customer Ranking system.
Gamification & Rewards
Ranks based on total bookings.
🎁 Mystery Gift Campaign eligibility badge for rides ≥2000৳.
🚚 Drivers
Job Board → Shows all available bookings.
Card view: pickup/delivery, offered price, vehicle type, 1–3 shipment photo
previews (+“+X more”).
Inline mini Customer profile preview (photo, rank, booking count).
Booking Details Page
Full job info, all images.
Customer profile: photo, booking history count, rank.
Actions: Accept Job ✅ or Make Counter-Offer 💬.
My Rides Page
Shows “In Progress” and “Completed” rides.
Profile
Driver photo upload, ride stats, completed rides, leaderboard position.
🛡 Admin Panel
User Approvals (Customer & Driver must be approved).
System Broadcasts → Pop-up for all users (e.g., Mystery Gift campaign banners).
Booking Oversight → View/edit/manage jobs.
Campaign Controls → Enable/disable reward campaigns.
Leaderboard Monitoring → View ranks/stats.
🎁 Mystery Gift Campaign
Campaign triggers if Customer completes ride ≥2000৳.
MVP Flow: Pop-up “🎉 Congrats! You earned a Mystery Gift.”
Gift distribution handled manually by Admin.
Admin can control campaign ON/OFF and duration (first 15 days launch).
Business logic: Platform margin = 5% (e.g., 2000৳ ride → 100৳ profit, 50–100৳ gift
cost).
🏆 Gamification & Engagement
Ranks displayed alongside name (Gold/Silver/Bronze style leaderboard).
🎖 Badges: “First Ride”, “10 Rides”, “Active Weekly User” etc.
Leaderboard page visible to all users.
Profile shows rank medal + booking count.
🖼 UI/UX Wireframe (Simplified)
Header
[ Logo 🚛 ] [ App Title ] [ Notifications 🔔 ] [ Profile Avatar ] [ 🌐 EN/BN Toggle ]
Customer Dashboard Cards
Post Booking ➕
My Bookings 📦
Booking History 🗂
Leaderboard 🏆
Campaigns 🎁
Driver Dashboard Cards
Job Board 📋
My Rides 🚛
Leaderboard 🏅
Profile 👤
Admin Sidebar
User Approvals 👥
Manage Bookings 📦
Broadcast Messages 📢
Campaign Settings 🎁
Leaderboards Control 🏆
⚡ UX Enhancements
Smooth SPA-like navigation (no reloads).
Image grids with full-screen zoom.
Clear button styling (Green = Accept, Blue = Submit, Red = Cancel).
Clean, minimalist blue-themed interface for local comfort.
📊 Growth & Marketing
🎁 Mystery Gift (for ≥2000৳ rides in campaign window).
🤝 Referral Reward → Invite friends, earn 50৳ credit.
🛡 Verified Driver badge (for trusted drivers).
🚨 Launch Campaign Idea: First 1000 rides = zero commission.
✅ Developer Build Checklist
Authentication → Username/password with JWT refresh tokens
Default Admin → Hardcoded Jack/Admin@123 (MVP only)
Customer → Booking system (multi-images mandatory, cam+gallery)
Driver → Job Board w/ accept/counter-offer workflow
Admin → Approvals, Broadcasts, Campaigns
Mystery Gift system → Mocked rewards for MVP
Ranking & Leaderboard → Job count based
Profiles → Photo upload + ranks visible
Notifications → Alerts for counter-offers, job accepted, campaigns
Mobile-first, bilingual UI (EN/BN toggle)
🎯 This Final Master Prompt is implementation-ready. It covers branding, UX,
features, admin flows, reward campaigns, and growth strategies — everything devs
need to start coding TruckBhai (ট্রাকভাই) today.
Certainly! Here's the consolidated and refined AI prompt based on the entire chat:
### **AI Prompt for Development Team:**
#### **Project: TruckBhai**
**Overview:**
Enhance the TransportConnect application to include detailed booking history,
multi-language support, improved UI/UX, and additional features to improve user
experience for both customers and drivers.
**Key Enhancements:**
1. **Detailed Booking History:**
- Display comprehensive details for each booking, including:
- Booker Name
- Booker Contact Number
- Destination
- Booking Date and Time
- Product Details
- Product Images
- Allow users to tap on images to view them in larger size with zoom and pan
functionality.
2. **Multi-Language Support:**
- Add support for English and Bengali (বাংলা).
- Ensure all text, including UI elements, messages, and booking details, are
translatable and display correctly in both languages.
3. **UI/UX Improvements:**
- **User and Driver Ranking Sections:**
- Create separate sections for user and driver rankings.
- Redesign the UI to be intuitive, visually appealing, and consistent while
clearly differentiating the sections.
- **Profile System:**
- Allow users to upload and manage profile photos.
- Display profile photos throughout the app.
- **Booking History:**
- Enable users to view their complete booking history.
- **User Rankings:**
- Implement a rankings page showing users ranked by total bookings.
- Display the user's current rank in the navigation.
- Include a leaderboard with gold/silver/bronze styling for top users.
4. **Enhanced Driver Experience:**
- **Customer Profile Info:**
- Show customer profile photos, total bookings, and contact info on job cards.
- Provide a detailed booking view with comprehensive customer information.
- Display customer ranking/booking count to help drivers make informed
decisions.
5. **Additional Features:**
- **Fix Login Issues:**
- Improve error handling and user feedback for login failures.
- **Image Display Enhancements:**
- Ensure all customer-uploaded images are visible when drivers view booking
details.
- Allow clicking on images to view them in full size.
- **Notifications:**
- Implement simple in-app notifications displayed on the user dashboard.
- **Multiple Image Upload:**
- Allow customers to upload multiple images for their bookings.
- **Job Status Tracking:**
- Move jobs to “In Progress” status with tracking capabilities.
- **Profile Photo Management:**
- Enable customers to change their profile photos.
- **Booking History Format:**
- Allow users to see how much time they have booked a car in a history format.
- **Top User Ranking:**
- Display ranking based on the number of orders, showing top users in the app.
- **Driver View Enhancements:**
- When drivers view a customer’s ride details, they can see the customer's
profile photo, ranking of rides booked, confirmation details, and contact
information.
**Priority:** High
**Instructions:**
- Implement the above enhancements with a focus on user-friendliness and a clean,
modern blue theme.
- Ensure the application is responsive and works well on both desktop and mobile
devices.
- Use a standard web stack (e.g., React/Vue for the frontend, [Link]/Python for
the backend).
- Integrate necessary APIs and use a simple database like PostgreSQL or a cloud-
based option to store trip requests and user data.
**Deadline:** Please implement these changes at your earliest convenience.
---
This prompt consolidates all the requirements and enhancements discussed, providing
a clear and comprehensive guide for the development team.
1 For the initial MVP, should we focus on the detailed booking history feature
(with images, zoom, and all booking details)
implement a simple email/password system to start
Should drivers and customers use the same registration flow
Store images directly in the database (simpler but limited)
Both languga ei wan tenglish aand bengla
4 a or whice one bwetter
**App Title:** QuickTrip Logistics Request
**App Concept:**
Create a simple, single-page web application for a logistics or delivery service.
The main purpose of the app is to allow customers to easily submit a "Trip Request"
for moving goods from one location to another. The app should be clean, user-
friendly, and focused on collecting all the necessary information efficiently.
**Target Audience:**
Individuals and small businesses who need to book a delivery service for their
goods.
**Core Feature: The Trip Request Form**
The main page of the app will feature a prominent form with the following fields,
organized logically into sections:
**Section 1: Item Details**
* **Goods Description:** A text area field for the customer to describe the items
they want to ship. (Placeholder: "e.g., 1 box of books, 1 wooden table")
* **Item Type:** A dropdown/select menu with options like: "Documents",
"Furniture", "Electronics", "Clothing", "General Goods".
* **Approximate Weight (KG):** A number input field.
**Section 2: Location and Schedule**
* **Pickup Location:** A text input field. **Crucially, integrate this with
Google Maps Places Autocomplete** to suggest and validate addresses as the user
types.
* **Delivery Location:** Another text input field, also integrated with **Google
Maps Places Autocomplete**.
* **Preferred Pickup Date:** A date picker component.
* **Preferred Pickup Time:** A time picker component.
**Section 3: Contact Information**
* **Full Name:** A standard text input field.
* **Phone Number:** A text input field formatted for phone numbers (e.g.,
`type="tel"`).
* **Email Address:** A text input field formatted for email (e.g.,
`type="email"`).
**Call to Action Button:**
* A large, clear button at the bottom of the form that says **"Submit Trip
Request"**.
**User Flow and Functionality:**
1. A user visits the web app and sees the "Trip Request Form" immediately.
2. The user fills out all the required fields: item details, locations (using
Google Maps Autocomplete), date/time, and their contact information.
3. Upon clicking the "Submit Trip Request" button, the form data is validated. If
any field is empty, show an error message.
4. If the form is valid, the data is saved to a backend database.
5. After successful submission, the user is shown a simple confirmation message on
the screen, like: **"Thank You! Your trip request has been received. We will
contact you shortly."**
**Admin View / Backend:**
Create a simple, protected admin dashboard accessible via a specific URL (e.g.,
`/admin`). This dashboard should display a table of all submitted trip requests.
The table should have the following columns:
* Request ID
* Customer Name
* Phone Number
* Pickup Location
* Delivery Location
* Pickup Date & Time
* Item Description
* Submission Timestamp
* Status (with default value "Pending")
**Design and UI/UX:**
* **Layout:** A single-column, responsive layout that works well on both desktop
and mobile devices.
* **Style:** Clean, modern, and minimalist. Use a simple color palette with one
primary color for buttons and links (e.g., blue or green).
* **Fonts:** Use a clear, readable font like Inter, Lato, or Roboto.
* **Clarity:** Ensure all form labels are clear and easy to understand.
**Technology Stack:**
* Use a standard web stack (e.g., React/Vue for the frontend, [Link]/Python for
the backend).
* Integrate the **Google Maps Places API** for the address autocomplete feature.
* Use a simple database like PostgreSQL or a cloud-based option to store the trip
requests.
Google Maps Integration: no nedd
Simple username/password login
Blue theme
NO nedd admin panel in this app user ccan place mean write her book order dettills
like plcae nmae lik eDhaka to Gazipur then time when thwey wannt to go and then
they say how much he cann pay for it and whice type vehices her nnexd must be he
add her contact number and must be he add her sipment product photo when one
customer place a order then this detils comme into all driver panle this order
detils can see driverall detils if any driver wwant to ride this book then he click
on accppt or other they ccan close this page also if he want mmore money for this
ride then hje can writte in this order and order more money ordder go intto this
ride user profea as notificationn and add more fetal to defent my app transprot
userrindely
**App Title:** TransportConnect
**App Concept:**
Create a transport booking platform that connects "Customers" with "Drivers". The
core idea is a bidding system where customers post jobs with their offered price,
and drivers can either accept the job or make a counter-offer.
**Theme & Design:**
* Use a clean, modern **Blue color theme**.
* The UI must be simple, intuitive, and mobile-friendly.
**User Roles & Authentication:**
The app must have two distinct user roles with a simple username/password login and
registration system:
1. **Customer:** The person who needs to ship goods.
2. **Driver:** The person who will transport the goods.
**Features for CUSTOMERS:**
1. **Create a New Booking:** A simple form page where a customer can post a job.
The form must have these fields:
* Pickup Location (Simple Text Input, e.g., "Dhaka")
* Delivery Location (Simple Text Input, e.g., "Gazipur")
* Preferred Date & Time (Date and Time pickers)
* Vehicle Type Needed (Dropdown menu with options: "Truck", "Pickup Van",
"Motorcycle")
* Your Offered Price (Number input field for the amount they want to pay)
* Your Contact Number (Phone number input)
* **Shipment Photo Upload (Important: This field is mandatory)**
* A "Post Booking" button.
2. **My Bookings Page:** A dashboard for the customer to see the status of their
posted jobs and view any counter-offers from drivers.
3. **Accept Counter-Offer:** If a driver proposes a new price, the customer gets a
notification and an option to "Accept New Offer" on their booking page.
**Features for DRIVERS:**
1. **Job Board (Main Page):** After logging in, drivers see a list of all
available (unaccepted) bookings from customers. Each booking listed should clearly
show:
* Pickup & Delivery Locations
* Offered Price
* Vehicle Type
* Shipment Photo Thumbnail
2. **Booking Details Page:** When a driver clicks on a job from the board, they
see all the details and have two action buttons:
* **A) "Accept Job":** A green button to accept the booking at the customer's
offered price. Once clicked, the job is assigned to this driver and removed from
the public job board.
* **B) "Make Counter-Offer":** An input field to enter a new price and a
"Submit Offer" button. This sends the new price back to the customer as a
notification.
3. **My Rides Page:** A dashboard for the driver to see the jobs they have
accepted.
Single registration with role selection dropdown
Simple in-app notifications (show on user dashboard)
Multiple images allowed
Job moves to "In Progress" status with tracking
sometime this webapp sshowing Login failed and must be change whice img Custoomer
input his input img whjen drive click on ccustomer productt detilss img tthen show
all img whice one customer input in there booking order and must be Customer can
change her prrofire he can add profile photo in here profire usser can see how much
time he book a car in hitory formet and seeing her rank in app userr base orde base
top user in this app oder base this rakinng show and Driver when drive vistss any
cutomer ride want to acccptt then he can see Cusstomer profire her photo her
raniking of ride book and conffamention and her contarct infomation
1. **Fix login issues**
2. **Better image display** - Show ALL customer images when driver views booking
details
3. **Customer profile system** with profile photos and booking history
4. **User ranking system** based on number of bookings
5. **Enhanced driver view** showing customer profiles and rankings
Perfect! I've implemented all the improvements you requested:
## ✅ **Enhanced Features Added:**
### 1. **Better Error Handling for Login**
- Improved error messages with better user feedback
- Added proper error display in red background
### 2. **Enhanced Image Display**
- **ALL images** now show when viewing booking details
- Click on any image to view full size in new tab
- Better image grid layout for multiple photos
- Image preview in job cards shows up to 3 images with "+X more" indicator
### 3. **Complete Profile System**
- **Profile photo upload** for all users
- **Profile page** with user stats and photo management
- Profile photos displayed throughout the app (navigation, customer info, etc.)
### 4. **User Ranking System**
- **Rankings page** showing all users ranked by total bookings
- **Leaderboard** with gold/silver/bronze styling for top users
- User's current rank displayed in navigation
- **Booking history tracking** - users can see all their past bookings
### 5. **Enhanced Driver Experience**
- **Customer profile info** shown on every job card
- Customer's **profile photo, total bookings, and contact** info visible
- **Detailed booking view** with comprehensive customer information
- Customer ranking/booking count helps drivers make informed decisions
### 6. **Better Navigation & Features**
- **Booking history page** for customers to track all their orders
- **Profile management** with photo upload
- **User rankings** to see top customers/drivers
- Enhanced **booking details page** with all images and customer profile
## 🎯 **Key Improvements:**
1. **Login Issues Fixed** - Better error handling and user feedback
2. **Image Viewing** - Click any image to view full size, all images visible in
details
3. **Customer Profiles** - Drivers can see customer photos, rankings, and booking
history
4. **User Rankings** - Gamification element showing most active users
5. **Profile Photos** - Users can upload and manage profile pictures
6. **Booking History** - Complete history tracking for customers