DEV Community: Tejas Rawool

[Boost]

Tejas Rawool — Sun, 07 Jun 2026 18:08:13 +0000

GitHub “Finish-Up-A-Thon” Challenge Submission

Tejas Rawool

Jun 7

FlashChat - From an Abandoned Prototype to a Secure, End-to-End Encrypted Communication Platform

#devchallenge #githubchallenge #ai #webdev

Comments

3 min read

FlashChat - From an Abandoned Prototype to a Secure, End-to-End Encrypted Communication Platform

Tejas Rawool — Sun, 07 Jun 2026 18:04:54 +0000

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

What I Built

FlashChat is a privacy-first, zero-login, temporary messaging and file-sharing portal. It is designed to be a secure, zero-config workspace for developers and teams who need to share code snippets, files, and links in absolute privacy.

Under the hood, all communication is fully encrypted client-side using the browser's native Web Crypto API (AES-GCM-256), meaning plaintext never touches the database or server logs. Rooms are generated dynamically with secure alphanumeric codes and disappear automatically after 30 minutes of inactivity. It also features a secure local AI assistant, typing indicators, iMessage-style reactions, quote replies, and live file chunk streaming.

Demo

Here are the live links to the production application:

Live Frontend (Vercel): https://flashchat-blush.vercel.app/
GitHub Repository:: https://github.com/TejasRawool186/flashchat

📸 Application Screenshots

1. Elegant Landing Page & Setup

2. Secure Chat Interface (Desktop)

3. Highly Responsive Mobile Views (iOS & Android)

The Comeback Story

Where We Started (The Abandoned Code)

The project started as a raw, single-file JavaScript prototype. It was an abandoned monolithic App.jsx file (over 800 lines of spaghetti code) containing mixed logic for Socket.IO events, file chunking, UI components, and state management. The code was prone to runtime errors, vulnerable to XSS attacks, completely lacked mobile responsiveness, and offered zero data encryption.

What I Changed, Fixed, and Added

To turn this prototype into a production-grade secure application, I executed a complete overhaul:

Decomposed Architecture: Split the monolithic App.jsx into 17 clean React + TypeScript modules with strict type safety.
End-to-End Cryptography: Integrated client-side ECDH/PBKDF2 key derivation from the alphanumeric room codes, encrypting text messages and shared file chunks using AES-256-GCM before sending them.
E2E-Wrapped AI Bot: Built an AI Assistant (/ask <prompt>) that calls Google Gemini AI through backend proxies (to keep keys secure) and returns responses encrypted client-side to the room.
Enhanced Chat Socials: Added quote threads, message reaction badges (👍 ❤️ 😂 😮 😢 🙏), typing notifications, and blue double-check read receipts.
Mobile Responsiveness: Replaced the static layout with an overlay sliding drawer sidebar on mobile, circular compact header buttons, and a responsive emoji picker.
Security Hardening: Integrated Nginx reverse proxying, rate-limiting middleware, CORS configuration, Helmet CSP headers, and SSRF scrapers.

My Experience with GitHub Copilot

As a developer, rewriting legacy code and implementing complex cryptography can feel overwhelming. GitHub Copilot acted as a 24/7 pair programmer, speeding up my workflow:

TypeScript Migration: Copilot analyzed the 800-line prototype and generated clean React prop interfaces and hooks. It predicted correct React event types (such as React.DragEvent and HTMLTextAreaElement), saving me dozens of compilation check cycles.
Cryptographic Implementation: Writing Web Crypto pipelines involves dense parameters. Copilot suggested correct iteration counts for PBKDF2, initialization vector (IV) structures, and helped design key import/export methods in crypto.ts without needing to constantly check MDN documentation.
Layout and Flexbox Debugging: When sent message bubbles clipped off-screen on mobile viewports, Copilot identified that the flex layout was expanding beyond its bounds. It suggested adding min-width: 0; and overflow: hidden; to the .chat-main wrapper—resolving the horizontal layout overflow instantly.
SSRF Protections: Copilot helped write robust security checks inside the Link Preview scraper to verify that outgoing requests do not target private IP subnets on our VPS.

🌐 Breaking Language Barriers: Building a Real-Time Multilingual Chat App with Next.js & Lingo.Dev

Tejas Rawool — Thu, 05 Feb 2026 18:33:09 +0000

Communication is the foundation of every online community. But the moment people from different countries join the same space, one invisible problem shows up fast: language.

You might be comfortable chatting in English, while someone else prefers Hindi, Spanish, or Japanese. Most chat apps assume everyone will “figure it out” — but in reality, that often leads to confusion, hesitation, or people staying silent.

I wanted to fix that.

So I built FlowTalk, a real-time multilingual chat application where users can write in their own language and instantly read messages in theirs — without breaking the flow of conversation.

In this article, I’ll walk through how I built it, the unexpected translation problems I ran into, and how I used Lingo.dev to solve them in a clean, scalable way.

🚀 The Tech Stack

I kept the stack modern but practical:

Frontend: Next.js 16 (App Router) + React 19
Styling: Tailwind CSS v4
Backend: Next.js API routes + MongoDB
Real-time updates: Pusher / polling
Translation layer: Lingo.dev

Nothing exotic — just tools that work well together.

🏗️ High-Level Architecture

The core challenge wasn’t how to translate text.

It was how to translate text without slowing down a real-time chat.

Here’s the flow I ended up with:

A user sends a message (for example, “Hello everyone”)
The server receives the message and detects the source language
A Translation Engine checks if translations already exist (cache first)
If not cached, it calls Lingo.dev to generate translations
The message is broadcast to all connected clients
Each client displays the message in the user’s preferred language

Only one message is sent — translation is treated as metadata, not a new chat message.

🧠 The Real Translation Problems (That No One Mentions)

This is where things got interesting.

Once real users started testing the app, I discovered problems that don’t show up in simple demos.

1. Script ≠ Language (Hinglish Is Real)

One of the most common messages I saw was something like:

muje aapki help chahiye

This is Hindi, but written using English letters (often called Hinglish).

Most systems either:

Treat it as English (wrong), or
Don’t translate it at all (also wrong)

So FlowTalk detects language intent, not just the alphabet used.

Correct result:

I need your help

2. Brand Names Should Not Be Translated

Auto-translation loves to translate everything — including things it absolutely shouldn’t.

Examples:

ChatGPT
Discord
React
Next.js

If these get translated, the message becomes confusing fast.

I needed a way to protect proper nouns and technical terms.

3. Broken Characters & Formatting Issues

Another subtle issue:

Some platforms and fonts don’t handle all scripts perfectly.

That can lead to:

Broken characters
Random symbols
Numbers appearing where text should be

To avoid this, I normalized output and ensured Unicode-safe formatting across the pipeline.

💡 The Heart of FlowTalk: The Translation Engine

At the center of everything is a small but powerful service: TranslationEngine.

Instead of scattering translation logic everywhere, I wrapped it in a single layer that handles:

Language detection
Caching
Glossary protection
Error handling

Here’s a simplified version:

// src/services/TranslationEngine.ts

import { LingoDotDevEngine } from "lingo.dev/sdk";

export class TranslationEngine {
  private lingoEngine: LingoDotDevEngine;

  constructor(apiKey: string) {
    this.lingoEngine = new LingoDotDevEngine({
      apiKey,
    });
  }

  async translateText(
    content: string,
    sourceLang: string,
    targetLang: string
  ): Promise<string> {
    if (sourceLang === targetLang) {
      return content;
    }

    const result = await this.lingoEngine.localizeText(content, {
      sourceLocale: sourceLang,
      targetLocale: targetLang,
    });

    return result;
  }
}

This is where Lingo.dev really shines.

Instead of simple word replacement, it provides context-aware translation, which makes conversations feel natural rather than robotic.

Chekout My Repo here: https://github.com/TejasRawool186/FlowTalk

special thanks to @sumitsaurabh927 @maxprilutskiy for the continious guidance