Lumist Flow: Local-First Kanban & Time Engine

The modern SaaS landscape is plagued by bloat. When an independent creator or freelancer wants to track a simple task or start a timer, they are forced to wait for cloud authentication, endure loading spinners, and surrender their data to third-party servers.

I engineered Lumist Flow to solve this. It is a production-grade Kanban board and time-tracking application that operates entirely inside the user's browser. By leveraging local-first architecture, it achieves zero-latency interactions and absolute data privacy.

The Local-First Architecture Challenge

To achieve sub-millisecond interaction speeds, I bypassed traditional cloud databases (like PostgreSQL or MongoDB) entirely.

Lumist Flow relies on IndexedDB, a low-level API for client-side storage of significant amounts of structured data. I engineered an asynchronous data layer that reads and writes tasks directly to the browser's isolated sandbox.

This means the application works flawlessly offline, and user data never touches a remote server.

import localforage from "localforage";
import { Task } from "@/types";

// Initialize the browser-sandboxed IndexedDB instance
const db = localforage.createInstance({
  name: "LumistDB",
  storeName: "tasks",
});

export const getTasks = async (): Promise<Task[]> => {
  try {
    const tasks = await db.getItem<Task[]>("all-tasks");
    return tasks || [];
  } catch (error) {
    console.error("Error fetching from IndexedDB:", error);
    return [];
  }
};

The "Crash-Proof" Time Engine

Most web-based time trackers rely on the browser's native setInterval function to count seconds. This is a fatal engineering flaw: modern browsers automatically throttle or pause JavaScript execution when a tab is inactive to save battery life, causing timers to lose track of time.

I engineered Lumist's time engine using Absolute Chronological Timestamps.

When a user starts a task, the exact UNIX millisecond is saved. The elapsed time is calculated against Date.now() strictly on render. If the user's browser crashes, or their laptop dies, the time log remains mathematically perfect upon reboot.

// Crash-proof time resolution, accounting for midnight boundary chunking
const stopTaskTimer = (task: Task): Task => {
  if (!task.lastStartedAt) return task;

  const endTime = Date.now();
  let currentStart = task.lastStartedAt;
  const newLogs: TimeLog[] = [];

  // Intelligently chunk time logs across midnight boundaries for accurate daily reporting
  while (currentStart < endTime) {
    const dateObj = new Date(currentStart);
    const nextMidnight = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate() + 1).getTime();
    const chunkEnd = Math.min(nextMidnight, endTime);
    const durationSeconds = Math.floor((chunkEnd - currentStart) / 1000);

    if (durationSeconds > 0) {
      newLogs.push({ id: generateId(), timestamp: currentStart, durationSeconds });
    }
    currentStart = chunkEnd;
  }

  const totalAdded = newLogs.reduce((sum, log) => sum + log.durationSeconds, 0);

  return {
    ...task,
    totalTimeSeconds: task.totalTimeSeconds + totalAdded,
    timeLogs: [...(task.timeLogs || []), ...newLogs],
    lastStartedAt: null,
  };
};

Fractional-Index Midpoint Sorting

Implementing drag-and-drop in a Kanban board introduces a severe database performance issue. If a user moves a task from the bottom of a list to the top, recalculating the order index for every subsequent task requires dozens of costly database writes.

To prevent database write collisions, I implemented a Midpoint Reordering Algorithm.

Instead of re-indexing an array, the system mathematically computes the exact fractional midpoint between neighboring cards. Moving a card requires only a single O(1) database write.

// O(1) Fractional sorting prevents cascading database writes during drag-and-drop
let newOrder;

if (dropPosition === "bottom") {
  const nextTask = targetGroup[targetIndex + 1];
  if (nextTask) {
    // Calculate the mathematical midpoint between current and next task
    newOrder = (targetTask.order || 0) + ((nextTask.order || 0) - (targetTask.order || 0)) / 2;
  } else {
    // Append to end of list
    newOrder = (targetTask.order || 0) + 1000;
  }
}

Defeating Anti-Fingerprinting Spoofing

Building privacy-first tools requires accounting for privacy-focused users. Many developers use hardened browsers (like LibreWolf or Mullvad) that intentionally spoof local timezones to UTC to prevent browser fingerprinting.

If a user in New York relies on a spoofed browser, their "This Week's Logged Hours" report will calculate based on London time, resulting in broken billing reports.

To solve this, I decoupled the reporting engine from the native Intl.DateTimeFormat API and engineered a manual timezone offset selector. This allows privacy-conscious users to maintain fingerprinting defenses while generating pixel-perfect, geographically accurate billing reports.

The Final Output

Lumist Flow proves that we do not need to sacrifice speed and privacy for utility. By leveraging modern client-side storage architectures, I delivered an enterprise-grade productivity tool that operates faster than cloud-based competitors, costs exactly $0 in monthly server overhead, and treats user data with absolute respect.