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 โ
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.
-- 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:
Rendered immediately in DOM, queued in memory.
Written to Supabase Postgres database.
Received by active client websocket or FCM push.
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.onlineactive and SSL validated. - โ Supabase Row Level Security (RLS) enabled on all 6 tables.
- โ
Storage bucket
chat-mediaconfigured 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.