Debatt | Public Debate Platform JS Script

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 & OrganizationsDebatt 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.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.Debatt 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 FeaturesThesis-driven debates - every debate opens with a single, clear propositionStanced arguments - every reply is labeled FOR, AGAINST, or NEUTRALVerified-only participation - no anonymous accounts, no botsOrganization accounts with verification, applications, and moderator managementFollow system for users, organizations, topics, and debatesFollowing activity feed with personalized recommendationsTopic explorer with sorting, filtering, and paginationReal-time notifications for replies, follows, and moderation eventsAccount status banners (verification pending, restricted, banned, etc.)SMS verification + email verification flowCivic identity badges and verified organization logosBan & restriction system with full moderation historyGDPR, Privacy, Terms legal shell built inMultilingual i18n with language switcher and coverage scriptPWA - installable, offline-ready, with update toastSEO-optimized per-route metadata, OG tags, Twitter cardsMulti-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 settingsAdmin - platform-wide moderation, user management, insights dashboardModerator - debate moderation, restricted user management, ban actionsStaff - organization-level operator for verified orgsAgent / Provider - extended roles for partner integrationsUser (Subscriber) - verified citizen with full debate participationAuthentication SystemEmail + password sign-in and sign-up with stepperGoogle OAuth pre-wiredSMS verification flowEmail verification with branded templatesSession persistence via Supabase Auth (localStorage)Auth state invalidator auto-refreshes router + React Query on sign-in/outServer-side requireSupabaseAuth middleware on every protected server functionBearer token auto-attach via attachSupabaseAuth global function middlewareRole-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 → /adminStaff → workspace dashboardUser → /feedUnverified → /verify or /account-statusSetup 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 /loginSecure 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 flagPWA SystemInstallable on iOS, Android, Windows, macOS, LinuxOffline support via Workbox-powered service workerCustom offline page (public/offline.html)Update toast with one-click refresh when new version is availableInstall prompt hook (useInstallPrompt) with platform detectionAdmin-controlled branding - name, icons, theme color, splashPreview-safe registration - never registers in dev or Lovable preview hostsKill switch via ?sw=off query parameterSupabase IntegrationPostgres database with typed schema (types.ts auto-generated)Row-Level Security (RLS) on every public table with explicit GRANTsThree-client architecture:client.ts - browser client for auth + realtimeauth-middleware.ts - authenticated server client (RLS as user)client.server.ts - service-role admin client (bypasses RLS)Realtime subscriptions for notifications, debate updates, moderationStorage buckets for avatars, organization logos, debate mediaMigrations versioned under supabase/migrations/Server functions via createServerFn (typed RPC) - not Edge FunctionsPublic API routes under /api/public/* for webhooks with signature verificationDemo / Test Mode (.env Controlled) Ship a fully functional demo to reviewers with one click:Quick-login panel dynamically shown via .env flagThree pre-provisioned demo personas:Admin (super_admin) - [email protected] (Acme Creators) - [email protected] (subscriber) - [email protected] accounts auto-provisioned via demo.functions.tsHidden in production by toggling a single environment variable Demo Mode badge visible globally when activeResponsive Navigation SystemDesktop - full sidebar + top tabs + right railTablet - collapsible sidebar with icon-only modeMobile - bottom tab bar + sheet-based drawerBreakpoints driven by Tailwind v4 design tokensSkip-to-content accessibility linkSplash screen for PWA cold-startDocumentation System Ships with a polished documentation portal under /docs/:Setup guide - environment, install, first run, setup wizardDeployment guide - Cloudflare Workers, custom domains, env varsConfiguration - .env reference, demo mode toggle, brandingFeature reference - debates, organizations, moderation, PWAChangelog versioned as v1.0.0 and onwardSearchable sidebar, anchor TOC, active-section highlight Syntax-highlighted code blocksMobile-friendly with collapsible navSecurity FeaturesServer-side role validation - never trust client storageSeparate user_roles table - eliminates privilege escalationSECURITY DEFINER has_role() - recursion-safe RLSRLS enabled on every public table with explicit GRANTsWebhook signature verification via HMAC + timingSafeEqualZod input validation on every server functionService-role key isolated to .server.ts files (never bundled to client)Auth-protected loaders only under _authenticated layoutOne-time setup endpoint auto-locks after Super Admin creationNo anonymous sign-ups by defaultPerformance OptimizationSSR via TanStack Start on Cloudflare Workers (edge runtime)Route-level code splitting automatic via file-based routingTanStack Query for cache-first reads with stale-while-revalidateSuspense boundaries with skeleton fallbacks on every listInfinite scroll via useInfiniteListLazy image loading with aspect-ratio preservationService worker precaches shell assetsVite 7 build with tree-shaking and Brotli compressionDeployment Guide SummaryProvision 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 - doneUse Cases / Who It Is ForNews & media outlets wanting structured reader debatePolitical parties & campaigns needing verified citizen engagementMunicipalities & governments hosting public consultationsNGOs & advocacy groups organizing thesis-based campaignsUniversities & think tanks running academic debatesCivic-tech startups launching a discourse productTrade unions & professional associations running member votesAnyone tired of toxic comment sections who wants real conversationWhat’s IncludedFull 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/)