Chattrix — The Ultimate Real-Time Chat & Marketplace SaaS Platform

Chattrix is a premium, production-ready chat + marketplace SaaS platform built with modern web technologies (TanStack Start, React 19, Vite 7, Tailwind CSS v4, and Supabase). It combines private end-to-end messaging, a full-featured marketplace, multi-role administration, PWA installability, and a guided setup wizard — all wrapped in a polished, WhatsApp-inspired UI that works flawlessly across desktop, tablet, and mobile.

Whether you’re launching a niche community, a B2B messenger, a social commerce platform, or a white-label SaaS product, Chattrix gives you a battle-tested foundation with everything already wired up: authentication, roles, realtime, storage, offline support, moderation, analytics, and more.

Live Demo

Demo URL: https://chattrix.wrapcoders.com

App Overview

• Framework: TanStack Start v1 (SSR + Server Functions) on React 19
• Build tool: Vite 7 with Lightning CSS
• Styling: Tailwind CSS v4 with semantic design tokens and full dark-mode support
• Backend: Supabase (Auth, Postgres with RLS, Storage, Realtime, Edge)
• Deployment target: Cloudflare Workers / Edge (also supports Node hosts)
• Type-safe end-to-end: TypeScript strict mode, Zod validation, typed routes
• Design system: Custom shadcn/ui-based component library with chat-specific primitives

Key Features

Messaging & Chat

• 1-to-1 and group conversations with realtime delivery
• Message reactions, replies, mentions, and forwarding
• Voice notes with transcription and message summarization (AI-powered)
• Image, video, document, and location attachments with client-side compression
• Read receipts, typing indicators, and online/last-seen presence
• Disappearing messages, scheduled messages, and message pinning
• Chat wallpapers, custom themes, and per-chat notification settings
• Smart replies, quick replies, auto-replies, and away messages
• Draft persistence, offline outbox, and automatic message recovery
• Chat export, starred/important messages, and recently-deleted recovery
• Polls, tasks, reminders, RSVP events, and payment requests inline
• Broadcast lists, communities, channels, and status/stories (24h expiry)
• End-to-end style privacy controls, locked chats with PIN/biometric
• Voice & video calling (WebRTC) with call history and mock-call testing

Marketplace

• Unified inbox merging chat conversations with commerce leads
• Product & service catalog with categories, variants, and pricing
• Cart, checkout, orders, and wishlist management
• Seller profiles, verification badges, and customer reviews
• Listings with rich media, seller pages, and shareable channel handles
• Automation rules engine (auto-replies, tagging, routing)
• Marketplace analytics dashboard (conversions, revenue, engagement)
• Multi-channel connectors with credential management and sync status
• Discover feed, curated collections, and public seller profiles

Multi-Role System

Chattrix ships with a hardened role-based access system stored in a dedicated user_roles table (never on the profile) with a SECURITY DEFINER has_role() function to prevent RLS recursion and privilege-escalation attacks.

• Super Admin: Full platform control, role management, settings, audit log
• Admin: User management, moderation, analytics, branding, PWA config
• Moderator: Report queue, review moderation, ban management
• Provider / Seller: Catalog, orders, automations, analytics, channels
• Agent: Assigned inbox conversations, quick replies, customer tags
• User: Chat, marketplace browsing, orders, wishlist, profile

Authentication System

• Email & password sign-in with strong validation and HIBP leaked-password protection
• Google OAuth (broker-based, iframe-safe)
• Apple, SAML SSO, and Phone (SMS) ready
• Forgot password & reset password flows
• Session persistence via Supabase Auth with automatic token refresh
• Bearer-token middleware for authenticated server functions
• Route-level protection via _authenticated/ layout gate
• Sign-out hygiene with cache teardown and safe redirects

Role-Based Redirect System

After login, users are automatically redirected to the surface that matches their role:

• Super Admin & Admin → /admin dashboard
• Moderator → moderation queue
• Provider / Seller → /marketplace workspace
• Agent → assigned inbox
• Regular User → chat home /
• First-boot with no super admin → forced redirect to /setup wizard

Setup Wizard (Installation Flow)

• Detects an empty installation and gates the app to /setup
• Guided super-admin account creation
• App branding: name, tagline, light/dark logos, favicon
• PWA configuration: theme color, background color, short name
• One-shot server-side validation with atomic role assignment
• Automatic redirect to /auth once setup is complete
• Idempotent — safe to re-run against partially provisioned databases

PWA System

• Installable on iOS, Android, Windows, macOS, and ChromeOS
• Full offline support via service worker with versioned cache (chattrix-v2)
• Custom offline fallback page
• Admin-controlled branding: name, short_name, theme color, background color, icons
• Complete icon set: favicon.ico (multi-size), 32px, 192px, 512px, Apple touch icon
• Web App Manifest with maskable icons and standalone display
• Install prompt component with dismissal memory
• Service-worker update handling that preserves chat state
• Push notification support (opt-in) with granular per-chat preferences

Supabase Integration

• Auth: Multi-provider, JWT bearer, session middleware
• Database: Fully normalized Postgres schema with foreign keys and indexes
• RLS: Row-Level Security enabled on every user-facing table with narrow policies
• Grants: Explicit GRANT statements per table (anon, authenticated, service_role)
• Storage: Buckets for avatars, media, documents, and status uploads
• Realtime: Live subscriptions for messages, presence, typing, reactions, statuses
• Server functions: Type-safe createServerFn RPC for all sensitive operations
• Admin client: Isolated service-role client for privileged, verified operations only
• Audit logging: Every admin/moderator action is written to admin_audit_log

Responsive Navigation System

• Desktop (≥1024px): Three-pane WhatsApp-style layout — sidebar, chat list, active chat
• Tablet (768–1023px): Collapsible sidebar with dynamic icon width
• Mobile (<768px): Full-screen views with bottom navigation and swipe gestures
• Safe-area insets for notched devices and keyboard-open detection
• Adaptive scroll containers, sticky headers, and edge-to-edge modals
• Keyboard-first navigation with full ARIA support

Documentation System

• Setup guide: Environment variables, Supabase provisioning, first-run wizard
• Deployment guide: Cloudflare Workers, Vercel, Netlify, self-hosted Node
• Design system docs: Tokens, primitives, chat-specific components
• Security notes: RLS patterns, role model, audit logging
• Changelog vX.X.X: Semantic versioning with detailed release notes
• Standalone docs site shipped under /docs

Security Features

• Row-Level Security on every table with least-privilege policies
• Separate user_roles table with SECURITY DEFINER role check
• Server-side admin verification middleware (requireAdmin, requireAdminOrModerator)
• Zod input validation on every server function
• HMAC signature verification on webhooks
• HIBP leaked-password protection
• CSRF-safe server functions with bearer-token attachment
• Anti-spam heuristics and moderation report queue
• Reserved brand usernames to prevent impersonation
• Automated DB security linter in CI (.github/workflows/db-security-lint.yml)

Performance Optimization

• SSR + streaming with edge deployment
• TanStack Query caching with router-integrated loaders
• Route-level code splitting and prefetching
• Image compression pipeline (client-side, WebP/AVIF)
• Media chunk recovery for unreliable networks
• Service-worker precache with NetworkFirst navigation strategy
• Optimistic UI updates for messages, reactions, and reads
• Virtualized chat and contact lists
• Debounced search and lazy-loaded panels

Deployment Guide Summary

• Clone repo, install with bun install
• Configure .env with Supabase URL, publishable key, and (optional) service role for admin ops
• Run the shipped SQL migrations to provision schema, RLS, and grants
• Deploy to Cloudflare Workers via wrangler deploy (config included)
• Complete the setup wizard on first load to create the super admin
• Configure branding, PWA, and social auth providers from the admin panel

Use Cases / Who It Is For

• Entrepreneurs launching a social commerce or community messaging product
• Agencies delivering white-label chat SaaS to clients
• Startups needing a WhatsApp-style B2B messenger with roles and moderation
• Marketplace operators who want messaging built in from day one
• SaaS founders looking for a production-grade React/Supabase starter
• Developers who want a reference architecture for TanStack Start + Supabase + PWA
• Teams building customer support, agent inbox, or lead management tools

Why Chattrix?

Chattrix is not a template — it’s a complete platform. Every feature has been implemented, tested (unit, integration, e2e, and visual tests included), documented, and hardened for production. Ship faster, sell more, and stand out with a polished SaaS product that feels premium out of the box.