chat.webguruji.online ยท Production Blueprint

Next-Generation
HarshGuruJi Private Chat

A high-performance, privacy-focused real-time messaging application with voice notes, instant delivery receipts, media compression, and unique HarshGuruJi ID discovery.

HarshGuruJi

HarshGuruJi โœ“

@harsh โ€ข
โณ 24h Disappearing
๐Ÿ”’ E2E Encrypted
Today ยท Realtime Synchronized
Welcome to the new standalone HarshGuruJi Chat! You can search any user by their @username or 6-digit HGJ-ID. ๐Ÿš€
10:42 AM
HarshGuruJi: Welcome to the new standalone HarshGuruJi Chat...
This looks ultra sleek! The sub-100ms real-time delivery and voice notes are amazing! ๐Ÿ”ฅ
10:43 AM โœ“โœ“
0:18
10:44 AM
Testing confetti reaction burst! Click on the reactions below ๐Ÿ‘‡
10:45 AM โœ“โœ“
Cutting-Edge Capabilities

Special Features & Architecture Highlights

Designed specifically for fast, private, and distraction-free messaging across Web, PWA, and Android.

๐ŸŽ™๏ธ

Voice Notes & Waveforms

Direct browser recording with live audio waveform animation, scrubbable progress bar, and speed controls (1.0x, 1.5x, 2.0x).

๐Ÿ†”

HarshGuruJi ID Discovery

Find any user instantly using their permanent 6-digit identifier (HGJ-XXXXXX) or @username with debounced live suggestions.

โšก

Realtime Delivery Receipts

Four explicit stages: Pending (๐Ÿ•’), Sent (โœ“), Delivered (โœ“โœ“ gray), and Read/Seen (โœ“โœ“ blue/emerald) via Supabase Realtime channels.

๐ŸŽ‰

Reactions & Confetti

Long-press or hover to add quick emoji reactions with real-time participant badges and celebratory canvas-confetti bursts.

โณ

Disappearing Messages

Configurable conversation timers (Off, 24 Hours, 7 Days) with visual indicator chips and automatic database cleanups.

๐Ÿ›ก๏ธ

Safety & User Blocking

One-tap block/unblock controls, spam report submission, and strict Postgres Row Level Security isolating conversation access.

๐Ÿ“ฑ

Native Android & PWA

Packaged with Capacitor 8 for Android APK generation with native keyboard resize handling, safe-area insets, and offline cache.

๐ŸŽจ

Tri-Theme OLED Engine

Seamlessly switch between Cyber Obsidian, pure Midnight OLED (battery saving), and crisp Modern Light with zero flickering.

1. Subdomain Architecture & Zero-Bloat Mandate

The chat application is deployed as a standalone progressive web app at https://chat.webguruji.online, decoupled from the main landing portal to maximize performance and isolation.

  • Tech Stack: React 19, TypeScript, Vite 8, Tailwind / Modern Vanilla CSS, Lucide Icons, Canvas Confetti.
  • Backend: Supabase Postgres 15, Realtime Channels, Edge Functions, Cloud Storage.
  • Zero Bloat: Strictly private 1-on-1 messaging. No reels, feeds, or social noise.
Supabase Postgres DDL (profiles, conversations, messages, reactions)
-- 1. User Profiles
CREATE TABLE IF NOT EXISTS public.profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  username TEXT UNIQUE NOT NULL,
  hgj_id TEXT UNIQUE NOT NULL,
  display_name TEXT NOT NULL,
  avatar_url TEXT,
  bio TEXT DEFAULT '',
  is_verified BOOLEAN DEFAULT FALSE,
  is_online BOOLEAN DEFAULT FALSE,
  last_seen TIMESTAMPTZ DEFAULT NOW(),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- 2. Conversations
CREATE TABLE IF NOT EXISTS public.conversations (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  type TEXT NOT NULL DEFAULT 'direct',
  disappearing_duration INTERVAL DEFAULT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  last_message_at TIMESTAMPTZ DEFAULT NOW()
);

-- 3. Conversation Participants
CREATE TABLE IF NOT EXISTS public.conversation_participants (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  conversation_id UUID REFERENCES public.conversations(id) ON DELETE CASCADE,
  user_id UUID REFERENCES public.profiles(id) ON DELETE CASCADE,
  has_muted BOOLEAN DEFAULT FALSE,
  cleared_up_to TIMESTAMPTZ DEFAULT NULL,
  UNIQUE(conversation_id, user_id)
);

-- 4. Messages
CREATE TABLE IF NOT EXISTS public.messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  conversation_id UUID REFERENCES public.conversations(id) ON DELETE CASCADE,
  sender_id UUID REFERENCES public.profiles(id) ON DELETE CASCADE,
  message_type TEXT NOT NULL DEFAULT 'text',
  content TEXT,
  media_url TEXT,
  reply_to_id UUID REFERENCES public.messages(id) ON DELETE SET NULL,
  is_deleted BOOLEAN DEFAULT FALSE,
  delivery_status TEXT DEFAULT 'sent',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 5. Message Reactions
CREATE TABLE IF NOT EXISTS public.message_reactions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  message_id UUID REFERENCES public.messages(id) ON DELETE CASCADE,
  user_id UUID REFERENCES public.profiles(id) ON DELETE CASCADE,
  emoji TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(message_id, user_id, emoji)
);

Message Lifecycle & Delivery Synchronization

Optimistic client insertion guarantees instant feedback, followed by real-time receipt acknowledgement:

1. Pending (๐Ÿ•’)

Rendered immediately in DOM, queued in memory.

2. Sent (โœ“)

Written to Supabase Postgres database.

3. Delivered (โœ“โœ“)

Received by active client websocket or FCM push.

4. Seen (โœ“โœ“ Blue)

Recipient has chat open and viewport focused.

Capacitor 8 Android Integration

Configuration for packaging chatbase as a native Android APK:

// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'online.webguruji.chat',
  appName: 'HarshGuruJi Chat',
  webDir: 'dist',
  plugins: {
    Keyboard: {
      resize: 'native',
      style: 'dark'
    }
  }
};

export default config;

Production Deployment Checklist

  • โœ… CNAME DNS record chat.webguruji.online active and SSL validated.
  • โœ… Supabase Row Level Security (RLS) enabled on all 6 tables.
  • โœ… Storage bucket chat-media configured with 25MB file upload limit.
  • โœ… HarshGuruJi Main Site hero and navbar links updated to chat.webguruji.online.
  • โœ… Confetti animation and voice note player tested across mobile & desktop.
โœ“ Copied to clipboard!