IMPORTANT: AI Usage Costs

This platform uses AI-powered features (content generation, subject line suggestions, analytics insights) that connect to external AI providers. AI API usage costs are NOT included in the purchase price. You will need to provide your own API keys and manage associated costs separately. Typical costs vary based on usage volume.

Debatt — Structured Public Debate Platform for Verified Citizens & Organizations

Debatt is a premium, production-grade SaaS debate platform built for serious public conversation. Every debate starts with a clear thesis. Every argument is explicitly labeled FOR, AGAINST, or NEUTRAL. No anonymous accounts. No bots. No noise. Just verified citizens and accredited organizations engaging in structured, civic-grade discussion.

Engineered with React 19, TanStack Start v1, Vite 7, Tailwind CSS v4, shadcn/ui, and a fully managed Supabase backend (Postgres, Auth, Storage, Realtime, RLS), Debatt ships as a complete, installable, self-hostable SaaS — ready to deploy, brand, and launch.

Live Demo

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

App Overview

Debatt replaces toxic, anonymous comment threads with a structured debate format that rewards clarity, civility, and verified identity. Citizens sign up, verify themselves, follow topics and organizations, and participate in debates with explicitly-stanced arguments. Organizations apply for verification, manage moderators, and host official debates. Administrators oversee the entire platform from a powerful, role-gated admin console.

The result is a polished, production-ready civic discourse product — perfect for news outlets, NGOs, political parties, universities, municipalities, think tanks, and civic-tech startups.

Key Features

• Thesis-driven debates — every debate opens with a single, clear proposition
• Stanced arguments — every reply is labeled FOR, AGAINST, or NEUTRAL
• Verified-only participation — no anonymous accounts, no bots
• Organization accounts with verification, applications, and moderator management
• Follow system for users, organizations, topics, and debates
• Following activity feed with personalized recommendations
• Topic explorer with sorting, filtering, and pagination
• Real-time notifications for replies, follows, and moderation events
• Account status banners (verification pending, restricted, banned, etc.)
• SMS verification + email verification flow
• Civic identity badges and verified organization logos
• Ban & restriction system with full moderation history
• GDPR, Privacy, Terms legal shell built in
• Multilingual i18n with language switcher and coverage script
• PWA — installable, offline-ready, with update toast
• SEO-optimized per-route metadata, OG tags, Twitter cards

Multi-Role System

Debatt ships with a hardened, server-side role system stored in a dedicated user_roles table (never on profiles) and enforced via a SECURITY DEFINER has_role() function — eliminating recursive RLS and privilege-escalation attacks.

• Super Admin — full platform access, admin console, all organizations, all settings
• Admin — platform-wide moderation, user management, insights dashboard
• Moderator — debate moderation, restricted user management, ban actions
• Staff — organization-level operator for verified orgs
• Agent / Provider — extended roles for partner integrations
• User (Subscriber) — verified citizen with full debate participation

Authentication System

• Email + password sign-in and sign-up with stepper
• Google OAuth pre-wired
• SMS verification flow
• Email verification with branded templates
• Session persistence via Supabase Auth (localStorage)
• Auth state invalidator auto-refreshes router + React Query on sign-in/out
• Server-side requireSupabaseAuth middleware on every protected server function
• Bearer token auto-attach via attachSupabaseAuth global function middleware

Role-Based Redirect System

Centralized role-landing.ts resolves the correct landing route based on the user’s highest-priority role immediately after sign-in (email, Google OAuth, or demo login):

• Admin / Moderator → /admin
• Staff → workspace dashboard
• User → /feed
• Unverified → /verify or /account-status

Setup Wizard (Installation Flow)

Self-hosted installation includes a guided /setup wizard that runs before first use:

• Detects whether a Super Admin exists
• Redirects to /setup if uninitialized, otherwise to /login
• Secure one-time Super Admin creation with properly hashed password
• Branding setup (logo, name, primary color)
• Database connection verification
• Setup endpoint auto-locks after completion
• Re-runnable only via explicit system reset flag

PWA System

• Installable on iOS, Android, Windows, macOS, Linux
• Offline support via Workbox-powered service worker
• Custom offline page (public/offline.html)
• Update toast with one-click refresh when new version is available
• Install prompt hook (useInstallPrompt) with platform detection
• Admin-controlled branding — name, icons, theme color, splash
• Preview-safe registration — never registers in dev or Lovable preview hosts
• Kill switch via ?sw=off query parameter

Supabase Integration

• Postgres database with typed schema (types.ts auto-generated)
• Row-Level Security (RLS) on every public table with explicit GRANTs
• Three-client architecture:
  • client.ts — browser client for auth + realtime
  • auth-middleware.ts — authenticated server client (RLS as user)
  • client.server.ts — service-role admin client (bypasses RLS)
• Realtime subscriptions for notifications, debate updates, moderation
• Storage buckets for avatars, organization logos, debate media
• Migrations versioned under supabase/migrations/
• Server functions via createServerFn (typed RPC) — not Edge Functions
• Public API routes under /api/public/* for webhooks with signature verification

Demo / Test Mode (.env Controlled)

Ship a fully functional demo to reviewers with one click:

• Quick-login panel dynamically shown via .env flag
• Three pre-provisioned demo personas:
  • Admin (super_admin) — admin@demo.com
  • Staff (Acme Creators) — staff@demo.com
  • Client (subscriber) — client@demo.com
• Demo accounts auto-provisioned via demo.functions.ts
• Hidden in production by toggling a single environment variable
• Demo Mode badge visible globally when active

Responsive Navigation System

• Desktop — full sidebar + top tabs + right rail
• Tablet — collapsible sidebar with icon-only mode
• Mobile — bottom tab bar + sheet-based drawer
• Breakpoints driven by Tailwind v4 design tokens
• Skip-to-content accessibility link
• Splash screen for PWA cold-start

Documentation System

Ships with a polished documentation portal under /docs/:

• Setup guide — environment, install, first run, setup wizard
• Deployment guide — Cloudflare Workers, custom domains, env vars
• Configuration — .env reference, demo mode toggle, branding
• Feature reference — debates, organizations, moderation, PWA
• Changelog versioned as v1.0.0 and onward
• Searchable sidebar, anchor TOC, active-section highlight
• Syntax-highlighted code blocks
• Mobile-friendly with collapsible nav

Security Features

• Server-side role validation — never trust client storage
• Separate user_roles table — eliminates privilege escalation
• SECURITY DEFINER has_role() — recursion-safe RLS
• RLS enabled on every public table with explicit GRANTs
• Webhook signature verification via HMAC + timingSafeEqual
• Zod input validation on every server function
• Service-role key isolated to .server.ts files (never bundled to client)
• Auth-protected loaders only under _authenticated layout
• One-time setup endpoint auto-locks after Super Admin creation
• No anonymous sign-ups by default

Performance Optimization

• SSR via TanStack Start on Cloudflare Workers (edge runtime)
• Route-level code splitting automatic via file-based routing
• TanStack Query for cache-first reads with stale-while-revalidate
• Suspense boundaries with skeleton fallbacks on every list
• Infinite scroll via useInfiniteList
• Lazy image loading with aspect-ratio preservation
• Service worker precaches shell assets
• Vite 7 build with tree-shaking and Brotli compression

Deployment Guide Summary

• Provision Supabase project (or self-host Postgres + GoTrue)
• Run migrations from supabase/migrations/
• Set .env (SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, SERVICE_ROLE_KEY)
• Deploy to Cloudflare Workers via Wrangler (or any edge-compatible host)
• Visit /setup to create the Super Admin
• Configure branding, PWA icons, and OAuth providers
• Toggle demo mode off in production
• Publish — done

Use Cases / Who It Is For

• News & media outlets wanting structured reader debate
• Political parties & campaigns needing verified citizen engagement
• Municipalities & governments hosting public consultations
• NGOs & advocacy groups organizing thesis-based campaigns
• Universities & think tanks running academic debates
• Civic-tech startups launching a discourse product
• Trade unions & professional associations running member votes
• Anyone tired of toxic comment sections who wants real conversation

What’s Included

• Full source code (React 19 + TanStack Start + Vite 7 + Tailwind v4)
• Complete Supabase schema, migrations, RLS policies, and seed data
• Setup wizard for first-run initialization
• PWA assets and service worker
• Demo accounts & auto-provisioning server functions
• Multilingual i18n scaffold
• Professional documentation portal (/docs/)
• Changelog v1.0.0
• Deployment guide for Cloudflare Workers

Launch Debatt Today

Debatt v1.0.0 is a complete, production-ready SaaS debate platform — verified-only, bot-free, structured, civic, and beautifully engineered. Skip 6+ months of architecture work and ship a serious public-discourse product this week.

Verified citizens. Structured debate. Real public conversation.

Crafted by WRAPCODERS