Smart Tuk-Tuk

Project Overview

The Smart Tuk-Tuk application is a modern, offline-first solution tailored for the unique challenges of local transportation and logistics. Built with a strong focus on speed, reliability, and strict data security, the platform ensures that users and drivers can seamlessly interact with the app even when internet connectivity drops or fluctuates.

The Challenge

Traditional web applications heavily rely on continuous, high-speed internet connections. However, in real-world transit environments, network coverage can be highly unpredictable. The primary engineering challenge was to build a system that could:

1. Function smoothly without an active internet connection (Offline-first capability).
2. Securely store sensitive user, payment, and ride data locally on the device.
3. Seamlessly synchronize local data with a cloud database once the connection is restored, without data conflicts.
4. Prevent critical data leakage when multiple users log into the same device.

The Solution & Architecture

To tackle these challenges, we moved away from a standard web architecture and adopted a robust offline-first approach, combining modern frontend tooling with reactive local databases.

• Frontend: Developed using React and powered by Vite for lightning-fast hot module replacement (HMR) and optimized build times. The UI was crafted using Tailwind CSS, ensuring a highly responsive and clean user experience across all devices.
• Local Data Layer: We integrated RxDB (Reactive Database) to handle complex local storage. This allowed the app to read, write, and query data instantly from the device itself, providing a zero-latency feel.
• Backend & Cloud Sync: Supabase (built on PostgreSQL) was utilized as the backend-as-a-service. We engineered an automatic, two-way replication system between the local RxDB instance and the Supabase cloud.

Key Features

• Zero-Latency Interactions: Because reads and writes happen locally first, the UI never blocks or freezes waiting for network requests.
• Background Synchronization: Changes made offline are queued and automatically pushed to the PostgreSQL database via Supabase when the network becomes available.
• Strict Data Isolation: Implemented secure user session management with automatic local cache purging.

Technical Implementation

One of the most critical technical hurdles was resolving local data leakage during user switching. If User A logged out and User B logged in on the same device, User B could potentially access User A's cached offline data from the local IndexedDB.

To fix this, we implemented a strict local database wipe protocol tied to the authentication state, combined with Supabase Row Level Security (RLS) for cloud-side protection. Additionally, we implemented database schema versioning to force fresh cloud syncs when major updates occurred.

// Handling secure user transitions and local cache management
async function handleUserLogin(newUser) {
  const currentUser = await getCurrentUser();
  
  // If a different user was previously logged in, completely wipe the local DB
  if (currentUser && currentUser.id !== newUser.id) {
    console.warn('User switch detected. Purging local database to prevent data leakage...');
    await localDatabase.remove(); 
  }
  
  // Initialize a fresh RxDB instance for the new user
  const db = await initializeRxDB(newUser);
  
  // Start real-time background replication with Supabase
  startSupabaseSync(db, newUser.token);
}