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

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:

1. Decomposed Architecture: Split the monolithic App.jsx into 17 clean React + TypeScript modules with strict type safety.
2. 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.
3. 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.
4. Enhanced Chat Socials: Added quote threads, message reaction badges (👍 ❤️ 😂 😮 😢 🙏), typing notifications, and blue double-check read receipts.
5. Mobile Responsiveness: Replaced the static layout with an overlay sliding drawer sidebar on mobile, circular compact header buttons, and a responsive emoji picker.
6. 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.