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

User: user@demo.com / User123!
Creator: moderator@demo.com / Moderator123!
Admin: admin@demo.com / Admin123!

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

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

Debatt | Public Debate Platform JS Script