DEV Community: Karam

Transify - real-time chat translation across WhatsApp, Discord, Telegram and more

Karam — Sun, 07 Jun 2026 16:39:08 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

Transify is a Chrome extension that translates chat messages in real time, directly inside messaging platforms like WhatsApp Web, Telegram, Discord, Microsoft Teams, Messenger, and Instagram DMs. You don't copy-paste into Google Translate or switch tabs. The translations happen right there in the chat window.

The original version was a college mini project I built with two teammates. It worked, but it was held together with duct tape. Plain JavaScript, no build tools, no framework, and it used free translation APIs (MyMemory, LibreTranslate) that gave you basic word-for-word translations with no context awareness.

The comeback version is a complete rebuild. It now runs on Llama 3.3 70B via Groq for context-aware LLM translations, has a proper Next.js serverless backend, uses the WXT framework for the extension, and everything is in TypeScript. The translations actually sound like a human wrote them now instead of robotic word-for-word output.

What makes it different from just using Google Translate:

It works inline. You double-click a chat bubble, and the translation pops up right there
It auto-translates both incoming messages and your outgoing text
You can set tone profiles (Casual, Professional, Empathetic, Playful, Gen Z) and the LLM adjusts the translation style accordingly
You can control grammatical gender for languages that need it
You can type inline overrides like hello [playful][female] to change tone per message

Old repo: github.com/Karam-999/Transify--An-extension-for-real-time-chat-translation
New repo: github.com/Karam-999/transify-ai

Demo

The extension works across WhatsApp Web, Telegram, Discord, Microsoft Teams, Messenger, and Instagram DMs. You install it, pick your languages and tone, and it starts translating. The video shows the full flow.

The Comeback Story

Where it was before:

The first version of Transify was a college mini project. It was a Chrome extension built with plain JavaScript, a raw manifest.json, vanilla HTML/CSS popup, and one big content-full.js file that did everything. No framework, no build step, no TypeScript.

For translations, it called free APIs like MyMemory and LibreTranslate. These give you basic machine translation, the kind where "I'm dead serious" might come back as something about death in the target language. No context, no tone awareness, just word-for-word swaps. The auto-detect for source language didn't really work either since MyMemory needs explicit language codes, so we hardcoded en as fallback.

It also had some bugs. The error handling would silently return the original text as the "translation" if the API failed, so you'd think it translated but it actually didn't. And since the extension called external APIs directly from content scripts, CORS was a constant headache.

It worked well enough for the college submission, but it wasn't something you'd actually want to use daily.

What changed in the comeback:

Pretty much everything got rebuilt from scratch, but the core idea stayed the same.

Translation engine: Replaced the free translation APIs with Llama 3.3 70B via Groq. This was the biggest upgrade. Instead of word-for-word translations, you now get context-aware translations that understand what you're trying to say. Groq's inference is fast too, usually under 200ms, which matters for real-time chat.

Tone profiles: This is the feature I'm most proud of. I built 6 tone profiles (General, Casual, Professional, Empathetic, Playful, Gen Z) with carefully engineered prompts, few-shot examples, and dynamic temperature settings. Each tone has specific instructions for what it should and shouldn't do. The Gen Z profile even has per-language youth slang guides (Hindi uses यार, भाई; Japanese uses やばい, マジ; Korean uses ㅋㅋ, 대박) so it doesn't just shove English slang into other languages.

Backend: Added a proper Next.js serverless backend deployed on Vercel. The extension calls POST /api/translate instead of hitting translation APIs directly. This solved the CORS issues, keeps the API key server-side, and lets me do prompt engineering on the server without shipping it in the extension code. Also added multi-key Groq fallback so if one API key gets rate-limited, it automatically tries the next one.

Extension framework: Moved from raw manifest.json + vanilla JS to the WXT framework with TypeScript. WXT handles hot reloading during development, proper build output for Chrome MV3, and environment-based API URL switching (localhost in dev, Vercel in production).

DOM handling: The content script has a UniversalTranslator engine that handles the messy reality of injecting text into modern web apps. WhatsApp, Discord, and Teams all use React with custom input handling (some use Slate.js). You can't just set .value on an input field since React ignores it. So the engine uses synthetic clipboard pastes and Slate.js event dispatching to actually get the translated text into the input. It also uses MutationObservers to handle SPA navigation, which is critical for Discord and Teams where changing channels doesn't reload the page.

Performance: Added a 100-entry LRU cache so the same message doesn't hit the API twice. If you scroll up in a chat and the same messages are re-rendered, the translations come from cache instantly.

Bug fixes: Fixed the silent error handling where failed translations returned the original text. Now it returns an empty string with an error flag so the UI actually shows something went wrong. Fixed CORS by adding proper headers and an OPTIONS preflight handler on the backend.

TypeScript everywhere: The old version was all JavaScript with no type safety. The new version is fully typed. TypeScript interfaces for the Groq API responses, request bodies, tone profiles, the works.

My Experience with GitHub Copilot

I used Copilot for the repetitive parts of the rebuild.

Documentation and README: Copilot helped me write the README for the new repo, the CONTRIBUTING.md, and the setup guides. Writing docs from scratch is tedious and Copilot gave me good first drafts that I cleaned up.

TypeScript types: When I was porting the old JavaScript to TypeScript, Copilot was useful for generating interfaces. Things like the GroqChatResponse, TranslateRequestBody, and ToneProfile types. It picked up on the patterns from the Groq API responses and suggested accurate types.

Bug fixing: When I was debugging the CORS issue (extension content scripts can't make cross-origin requests to localhost), Copilot helped me write the CORS header setup and the OPTIONS preflight handler in the Next.js route. It also caught a few TypeScript errors where I was using any types that should have been properly typed.

Boilerplate: The WXT extension setup, the Next.js layout.tsx and page.tsx files, the eslint config. Standard stuff that Copilot autocompleted correctly without me having to look up docs.

What I wrote myself: all the tone profile prompts and few-shot examples (those need human judgement about what sounds natural), the Gen Z per-language slang guides (I researched actual youth internet culture for each language), the DOM injection logic for React/Slate.js apps (this is tricky platform-specific stuff that Copilot would get wrong), and the LRU cache implementation.

SpendWise - AI Spend Audit Tool to launch ready App

Karam — Sun, 07 Jun 2026 15:44:43 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

SpendWise AI is a free tool that audits your AI tool spending (Cursor, Copilot, Claude, ChatGPT, Gemini, Windsurf) against verified vendor pricing and tells you exactly where you're overspending and what to do about it.

I originally built this as a week-long assignment for a startup. The problem it solves is simple: founders and engineering managers pay for multiple AI tools but have no idea if they're getting ripped off. SpendWise gives them that answer in under a minute, no signup needed.

The interesting part is that the core audit engine has zero AI in it. It runs 6 hardcoded rules against verified pricing data, so every recommendation is reproducible and verifiable. AI (Groq's Llama 3) only kicks in to write a friendly summary paragraph on top of the structured results. I made this choice because financial recommendations need to be deterministic. Same input, same output, every time.

The stack is Next.js 16, TypeScript, Tailwind + shadcn/ui, Supabase for the database, Groq for AI summaries, Resend for emails, and Vitest for testing. Deployed on Vercel.

Live app: spendwise-ai-test.vercel.app
Source code: github.com/Karam-999/SpendWise-AI

Demo

The original audit tool:

The comeback (re-audit on pricing change):

You can try the Round 1 version live at spendwise-ai-test.vercel.app. Pick a tool like Cursor on Teams plan at $40/mo, run the audit, and see the full savings breakdown. The Round 2 features (pricing change detection, re-audit diff view) are on a separate branch and not merged to main yet, but the demo video above walks through the complete flow.

The Comeback Story

Where it was:

The original version was basically a calculator. You fill in your AI tools, it shows you where you can save money, and that's it. If Cursor changed its pricing the next week, your audit was already stale and you'd never know about it.

It worked fine as a one-time thing. It had the form, the audit engine, AI summaries, email lead capture, shareable URLs with OG tags, localStorage persistence, spam protection, 9 tests, and CI. But audits had no memory. No pricing snapshot, no change detection, no way to bring users back.

What I added:

I turned it into a system that actually stays useful after the first visit.

The big changes:

Every audit now stores the exact pricing data that was used at the time as a snapshot in the database. This way I can always compare what pricing looked like "then" vs "now."
Built a /api/detect-changes endpoint that accepts pricing overrides, compares them against every stored audit, re-runs the ones that are affected, and sends a consolidated email per user telling them what changed.
Added a re-audit diff view at /audit/[id]/reaudit that shows old vs new recommendations side by side, with the savings delta, changed/added/removed recommendations highlighted, and score comparison.
Had to refactor the audit engine to support injectable pricing. The original had pricing hardcoded as a private constant, which was the right call for Round 1 but made Round 2 harder. Ended up exporting the pricing, creating a typed version of the engine that accepts custom pricing, and updating 15 internal references. All 9 original tests still passed after the refactor.
Wrote 6 new tests for the pricing diff logic. Total is now 15 tests, build and type checking both pass clean.

Things I intentionally skipped: HTML email templates (shipped plain text to get the full flow working instead of polishing one piece), admin dashboard (the data is queryable via SQL already), and scheduled cron (manual endpoint works, Vercel Cron needs Pro tier).

My Experience with GitHub Copilot

I used Copilot mostly for the boring stuff that would have eaten up time otherwise.

Documentation was the biggest win. I had a bunch of markdown files to write (architecture docs, PR descriptions, devlogs, reflections) and Copilot helped me get first drafts out fast. I'd review and rewrite them, but not having to start from a blank page saved a lot of time.

Bug fixing was another area where it helped. When Supabase inserts were silently failing (returning null for both data and error because of RLS), Copilot helped me quickly write the diagnostic logging to trace what was happening. It also caught Next.js lint issues like using <a> tags instead of <Link> and setState patterns that were wrong.

TypeScript type checking during the Round 2 refactor was where Copilot really earned its keep. I was changing 15 references from a hardcoded PRICING. to an injected pricing. parameter and creating new types for the pricing data structure. Copilot's inline suggestions made that mechanical refactoring way faster.

Test scaffolding for the 6 new pricing diff tests. Copilot generated the boilerplate (imports, describe/it blocks) and I filled in the actual test logic.

What I didn't use it for: the actual audit rules (I verified all pricing manually against vendor pages), architectural decisions, and the business/strategy docs. Those need real thinking, not autocomplete.