Back to Portfolio

πŸ’¬ WhatsApp Chat Viewer β€” Case Study

Browser-Side Large Log Parsing & DOM Virtualization Engine

Overview

WhatsApp Chat Viewer is an offline-first browser application designed to parse, search, and display exported WhatsApp chat text files locally in the browser with zero server data upload.

Live Web App GitHub Repository

🎯 Problem & Motivation

Exported WhatsApp text archives can contain hundreds of thousands of lines. Attempting to parse and render hundreds of thousands of HTML elements directly into a single page crashes browser memory tabs.

βš™οΈ Technical Solution

By offloading file parsing to a Web Worker thread and using DOM Virtualization (Windowing), only the small subset of messages currently visible in the viewport are rendered, enabling smooth scrolling through large chat logs.

πŸ—οΈ Architecture & Threading Model

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ Exported Chat β”‚ ────► β”‚ Web Worker Thread β”‚ ────► β”‚ IndexedDB Storage β”‚ β”‚ .txt File β”‚ β”‚ (Regex Parse Engine) β”‚ β”‚ (Local Index Chunks) β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ β”‚ Screen Render β”‚ ◄──── β”‚ DOM Virtualizer Engineβ”‚ β—„β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ (30 Active Nodesβ”‚ β”‚ (Viewport Windowing) β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

βš–οΈ Challenges & Trade-offs

Trade-off: DOM Virtualization requires fixed or pre-calculated message item heights, requiring dynamic height measuring calculations when handling multiline messages or media attachments.

πŸ’‘ Lessons Learned

1. Web Workers are essential for processing multi-megabyte text files without freezing UI event loops.
2. DOM Virtualization is the single most impactful technique for web list rendering performance.

πŸ“Œ Planned Improvements