DEV Community: Vishal

My Instagram tool's traffic was 82% Indonesian — so I taught it WhatsApp

Vishal — Fri, 23 Oct 2026 10:19:20 +0000

The Search Console export that rewrote my roadmap

Stats Insta is a small tool I built for myself and then put online: upload an Instagram chat export, get statistics about your conversations — who texts most, when you're active, your top emojis, Wrapped-style story cards you can share. Everything runs in the browser; nothing is uploaded anywhere.

A few weeks ago I finally did the boring thing and exported sixteen months of Google Search Console data to actually look at it. Around 6,500 clicks. And 82% of them from Indonesia.

It gets stranger. Most of my top search queries weren't keywords at all — they were people typing my old Vercel domain name into Google to find their way back. Traffic had peaked back in December 2025 (Wrapped season, of course) and was slowly sliding. In other words: the tool had found an audience almost by accident, the audience was Indonesian, and it was loyal enough to Google a URL.

Here's the part that stung: Indonesia is a WhatsApp-first country. For most of my actual users, WhatsApp is not "an app" — it's the default layer for talking to everyone. And my tool supported exactly zero WhatsApp. Every one of those users was analyzing the chats they have on their secondary app, because the app they actually live in wasn't supported at all.

So the roadmap rewrote itself. Before any new features: teach the tool WhatsApp.

Two parsers, two completely different worlds

Instagram exports are a gift. You request your data, wait, and get message_1.json — real structured JSON with sender_name, timestamp_ms, a reactions array, the works. Parsing it is an afternoon.

A WhatsApp export is a .txt file that looks like a chat transcript, because it is one:

14/08/2025, 21:03 - Messages are end-to-end encrypted
14/08/2025, 21:04 - Priya: ok so about tomorrow
[14/08/2025, 21:04:37] Arjun: wait, which tomorrow?

That first line is Android format, the third is iOS. Neither is a standard — the comma is optional, seconds come and go, and the clock is 12-hour in some regions and 24-hour in others. The parser ended up starting with two regexes just to recognize a line:

const IOS_LINE =
  /^\[(\d{1,2})[./](\d{1,2})[./](\d{2,4}),?\s+(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([AaPp]\.?[Mm]\.?)?\]\s?(.*)$/;
const ANDROID_LINE =
  /^(\d{1,2})[./](\d{1,2})[./](\d{2,4}),?\s+(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([AaPp]\.?[Mm]\.?)?\s*[-\u2010-\u2015]\s+(.*)$/;

Then the real problems start:

Half the lines aren't messages. The encryption notice, "Priya added Arjun", subject changes, "security code changed", missed calls — all of it sits in the file wearing a timestamp, and all of it has to be excluded or your statistics count WhatsApp itself as a very talkative participant.

Some system lines disguise themselves as messages. Alice changed the subject to "Trip: Friday plans" contains a ": " — so a naive split happily parses it as a message from a person named "Alice changed the subject to "Trip". I ended up treating a "sender" as fake if it's implausibly long or contains a system verb before the colon.

Multi-line messages have no prefix at all. If someone sends a message with line breaks, the continuation lines arrive naked. The rule is simple — a line with no timestamp belongs to the previous message — but you only discover that after your message count doesn't match the chat you exported by hand.

The file is full of invisible characters. A BOM at the start, narrow no-break spaces before AM/PM, left-to-right marks wrapped around lines. Normalize them away first, or your regexes fail on files that look identical to the ones that work.

And the worst one: nobody tells you the date order. Is 03/04/2025 the 3rd of April or March 4th? WhatsApp doesn't label it, and guessing wrong swaps days and months across the entire history. The parser scans the whole file before parsing anything:

let dayFirst = true;
let sawMonthFirstEvidence = false;
for (const line of lines) {
  const raw = matchTimestampLine(line);
  if (!raw) continue;
  if (raw.first > 12) { dayFirst = true; break; } // 13+ can't be a month
  if (raw.second > 12) sawMonthFirstEvidence = true;
}
if (sawMonthFirstEvidence) dayFirst = false;

If any date's first number is above 12, it must be the day. If only the second number ever goes above 12, the file is month-first. If the file never gives unambiguous evidence — a short chat from the first twelve days of a month — it defaults to day-first, which matches the export locales of most of my users: Indonesia, India, Europe, Latin America. It's a heuristic, and I wrote it down as one in the code comments, because pretending it's a guarantee would be lying.

One stats engine, two front doors

The best decision in the whole project was refusing to build a second analyzer. The WhatsApp parser's only job is to normalize a messy text file into the exact same shape the Instagram path already produces:

{ [sender_name: string]: Message[] }

Because the model is identical, every existing statistic, chart and story card — totals, distribution, the activity heatmap, night owls, conversation starters — worked on WhatsApp chats the moment the parser did. Zero changes downstream.

The only additions were three optional flags on Message, and they turned out to be where the fun was:

isDeleted — "This message was deleted" arrives under the sender's name, so instead of discarding it, the parser keeps it as a flagged, content-less message. It counts toward that person's totals but is invisible to text statistics. That's what powers a Deleted Messages leaderboard — who in your group chat deletes the most.
isMedia — <Media omitted>, <attached: IMG-2041.jpg>, IMG-2041.jpg (file attached) (captions kept, when there are any). Powers Media Shared counts.
isEdited — WhatsApp appends <This message was edited> to edited messages, sometimes on its own line. The parser strips the marker and flags the message.

From those flags plus the plain text fell out a set of stats that make no sense for Instagram but are pure WhatsApp: Top Link Sharers, Questions Asked (who asks the most questions), Biggest Double-Texter, plus Signature Emoji, Fastest Responder (average reply gaps) and Morning Person. One graceful accident: WhatsApp exports carry no reaction data, so reaction-based stats simply find nothing — exactly what they already did for an Instagram chat where nobody reacted. Nothing needed special-casing.

What shipped

The tool now takes Instagram JSON and WhatsApp .txt/ZIP exports through the same upload box, tells them apart on its own, and runs the same engine on both. There's a dedicated WhatsApp page, WhatsApp-specific cards, a downloadable report, and Wrapped story cards that now say "WhatsApp" when they're about a WhatsApp chat (a detail I got wrong in the first version, and a user caught within hours — platform support means the copy, not just the parser).

Is it too early for a victory lap? Completely. The honest result so far is: the tool finally supports the app its audience actually uses. Whether the December slide reverses is a question the next Search Console export will answer, and I've learned my lesson about reading those more often.

If you want to try it — everything runs locally in your browser, your chats never leave your device:

The tool: https://stats-insta.vercel.app
WhatsApp chat analyzer: https://stats-insta.vercel.app/whatsapp-chat-analyzer
Guide — how to export a WhatsApp chat: https://stats-insta.vercel.app/guides/export-whatsapp-chat

And if you've ever parsed WhatsApp exports yourself and fought the date-order problem differently, I genuinely want to hear how. The comments are open.

How I Built a 100% In-Browser Instagram Chat Analyzer (Zero Cloud Uploads)

Vishal — Wed, 14 Oct 2026 23:30:17 +0000

Direct messages contain our most intimate conversations, jokes, memories, and photos. Yet, when searching for tools to visualize chat history or generate Spotify Wrapped-style stats for group chats, virtually every existing tool asks for your Instagram login or forces you to upload your sensitive ZIP archives to their cloud servers.

I wanted to change that. I built Stats Insta — a completely free, 100% client-side Instagram Chat Analyzer where your data never leaves your device.

In this article, I will share the engineering challenges behind parsing multi-megabyte JSON exports in the browser, decoding escaped Unicode emojis, computing deep conversational metrics, and generating 9:16 Instagram Story cards directly from the DOM.

🔒 The Architecture: 100% Client-Side Privacy

The core philosophy behind Stats Insta is Local-First Processing:

Zero Server Uploads: The application does not have a backend parsing server or database for chat messages.
Native HTML5 FileReader: When a user drops a message_1.json file, the browser reads the file directly into client-side RAM using FileReader.readAsText().
Session-Only Memory: Once you refresh or close the browser tab, the data is instantly garbage-collected by the browser engine.

You can verify this in Chrome DevTools (F12 > Network Tab): dropping a 50MB conversation file triggers 0 network POST requests.

⚙️ Technical Challenge 1: Decoding Instagram's Unicode Escapes

When Meta exports your message history in JSON format, emojis and special characters are not stored as standard UTF-8 strings. Instead, they are encoded as escaped byte sequences (e.g., \u00e2\u009d\u00a4 for a red heart).

If rendered directly in React, those characters appear garbled (mojibake). The subtle part is the input shape: by the time the file has gone through JSON.parse, the strings are no longer literal \uXXXX escape text. Each UTF-8 byte has become its own code point, so the red heart arrives as the three characters U+00E2, U+009D and U+00A4. The fix is to reinterpret those code points as UTF-8 bytes, which is exactly what the utf8 package does. The parser applies it to message content, sender names and reactions as each file is parsed:

import utf8 from "utf8";

const decodedContent = utf8.decode(msg.content ?? "");
const decodedSenderName = utf8.decode(msg.sender_name ?? "");
const decodedReactions = msg.reactions?.map((r) => ({
  ...r,
  reaction: r.reaction ? utf8.decode(r.reaction) : r.reaction,
  actor: r.actor ? utf8.decode(r.actor) : r.actor,
}));

That turns the byte-sequence characters back into native emojis at parse time, without lagging the main thread.

Correction (October 2026): the first version of this section showed a different helper that rewrote \uXXXX sequences to %uXXXX and passed them to decodeURIComponent. As a reader pointed out, %u is not valid input for decodeURIComponent, so that helper threw and returned its input unchanged - it never actually decoded anything. The utf8.decode step above is what the shipped code has always used, and the dead helper has since been removed from the codebase.

📊 Technical Challenge 2: Calculating Deep Conversational Metrics

Simple message counts are boring. People care about the hidden dynamics of their friendships. We compute several unique behavioral metrics in browser memory:

1. The "Night Owls" Tracker (12:00 AM – 4:59 AM)

We parse the Unix millisecond timestamps (timestamp_ms) on each message and isolate activity occurring in the late-night window:

const hour = new Date(msg.timestamp_ms).getHours();
if (hour >= 0 && hour <= 4) {
  nightOwlCounts[msg.sender_name] = (nightOwlCounts[msg.sender_name] || 0) + 1;
}

This immediately reveals who stays awake sending reels and memes while everyone else is asleep.

2. The Conversation Starter Algorithm

Who puts in the effort to keep the conversation alive? We sort the timeline chronologically and scan for silence gaps exceeding 12 hours:

const TWELVE_HOURS_MS = 12 * 60 * 60 * 1000;
if (lastTimestamp === 0 || msg.timestamp_ms - lastTimestamp > TWELVE_HOURS_MS) {
  starterCounts[msg.sender_name] = (starterCounts[msg.sender_name] || 0) + 1;
}
lastTimestamp = msg.timestamp_ms;

3. The Swear Jar

We scan message strings against a local tokenized dictionary of 100+ global curse words and slang to generate a friendly group chat leaderboard of who has the dirtiest mouth.

📱 Technical Challenge 3: Generating 9:16 Instagram Story Wrapped Cards

People love sharing aesthetic visual summaries with their friends. To make the tool virally shareable, I built an in-browser Story Card generator that renders a 1080x1920 (9:16 Full HD) graphic using HTML5 Canvas:

Glassmorphism gradient backgrounds with radial glowing orbs
Rounded progress bars showing conversational dominance percentages
Dynamic badges and highlights
1-Click Native Share: On mobile devices, we invoke the Web Share API (navigator.share({ files: [pngFile] })), which opens the native iOS/Android share sheet directly into Instagram Stories!

🚀 Try It Live & Explore the Code

The project is completely free to use, and I have published detailed guides on understanding Meta's export architecture:

🌐 Live Application: https://stats-insta.vercel.app/
📘 Guide: How to Open & Read Instagram message_1.json Files
📙 Guide: Activity Heatmaps & Peak Texting Hours

I would love to hear feedback from the DEV community! What other client-side analytics or visual metrics would you like to see added?

Update - October 2026

Stats Insta now works with WhatsApp chats as well as Instagram exports. The same in-browser analyzer can read a WhatsApp .txt or ZIP export and show message counts, activity patterns, media and deleted-message stats, link sharing, fastest responders, and Wrapped-style cards.

New pages since this post:

WhatsApp chat analyzer: https://stats-insta.vercel.app/whatsapp-chat-analyzer
Instagram Wrapped: https://stats-insta.vercel.app/instagram-wrapped
How to export a WhatsApp chat: https://stats-insta.vercel.app/guides/export-whatsapp-chat
WhatsApp chat statistics guide: https://stats-insta.vercel.app/guides/whatsapp-chat-statistics

Everything still runs locally in your browser. Your chat files are not uploaded to a server.