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.

Subbit — Question and Answer Community Systems SaaS Platform

Subbit is a powerful, production-ready, white-label community platform built with React 18, TypeScript, Tailwind CSS, and Supabase. Launch your own Reddit-style community hub in minutes — fully customizable, monetization-ready, and packed with every feature your users expect from a modern social platform.

Whether you’re building a niche forum for fitness enthusiasts, a crypto discussion board, a gaming community, or a SaaS knowledge base — Subbit gives you a complete, self-hosted solution with zero recurring platform fees.

Live Demo

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

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

Guided Setup Wizard

No technical expertise required. Subbit includes a 6-step setup wizard that guides you through the entire installation process:

• Step 1 — Welcome: Overview of the setup process and what will be configured.
• Step 2 — Super Admin: Create the first administrator account with email and password. The admin role is automatically assigned.
• Step 3 — App Identity: Set your platform name and description — instantly reflected across the entire site.
• Step 4 — System Settings: Configure user registration toggle, maintenance mode, default language, and posts-per-page pagination.
• Step 5 — Security: Set email verification requirements, minimum password length, maximum login attempts, and CAPTCHA toggle.
• Step 6 — Launch: Review all settings in a summary screen and activate your platform with one click.

The wizard automatically detects whether setup has been completed — fresh installations redirect to /setup, and completed installations redirect to the login page. No manual database seeding required.

Community System

Create unlimited topic-based communities, each with its own identity, rules, and moderation team:

• Community Profiles: Custom name, description, icon, and banner image for each community.
• Membership System: Users join communities freely. The creator automatically becomes the community admin.
• Role Hierarchy: Three-tier roles per community — Admin, Moderator, and Member — each with granular permissions.
• Community Rules: Define and display ordered rules in the community sidebar. Fully CRUD-managed.
• User Flairs: Customizable flair system with text, emoji, and color per community. Users can select their own flair.
• Invite Links: Generate shareable invite links with optional expiration dates and usage limits. Track how many times each invite has been used.
• Community Bans: Community admins and moderators can ban users with a reason. Banned users cannot post or comment.
• Moderation Logs: Complete audit trail of all moderation actions within each community.
• Community Browser: Explore and discover communities at /explore with search and filtering.

Rich Post System

A full-featured content creation system supporting multiple post types:

• Text Posts: Rich text content with Markdown rendering support.
• Image Posts: Multiple image attachments per post with a lightbox viewer for full-screen previews.
• Video Posts: Video attachments uploaded to cloud storage.
• Polls: Attach single-choice or multiple-choice polls to any post with optional end dates. Results aggregated in real-time.
• Crossposts: Share posts across communities while preserving the original source.
• Tags: Freeform tags for post categorization and discovery.
• Pinning: Community admins can pin important posts to the top of the feed.
• Post Saving: Bookmark posts into named collections for later reading.
• Share Menu: Share posts via native share dialog or copy link.
• View Tracking: Automatic post view count with atomic database increment.

Reddit-Style Voting

Full upvote/downvote system on both posts and comments. Votes are stored individually and scores are denormalized for performance. Karma is automatically recalculated via database triggers whenever votes change.

Threaded Comments

• Nested/threaded replies using a self-referencing parent_id structure — unlimited depth.
• Independent upvote/downvote scoring per comment.
• Edit support with updated_at timestamp tracking.
• Comment count denormalized on the parent post for instant display.
• Community moderators and site admins can delete any comment.

Real-Time Direct Messaging

A complete 1:1 messaging system powered by Supabase Realtime:

• Instant Delivery: Messages appear in real-time without page refresh or polling.
• File Attachments: Send images, documents, and other files in conversations.
• Emoji Reactions: React to individual messages with emojis.
• Typing Indicators: See when the other person is typing — real-time presence-based.
• Read Receipts: Messages are marked as read when the recipient views them.
• Message Editing: Edit sent messages with an edited_at timestamp.
• Floating Chat Widget: A persistent chat widget available on every page for quick access to conversations.
• Online Status: Green dot indicators showing which users are currently online.

Notification System

• In-app notification feed with real-time delivery.
• Notification types: post comments, comment replies, new followers, direct messages, gold awards, ad status changes, reports, and contact submissions.
• Per-user notification preferences — users can toggle each notification type on/off.
• Unread count badge on the notification bell icon.
• Click-through links to the relevant post, comment, or user profile.
• Database triggers automatically create notifications — no manual dispatch needed.

Monetization — Triple Payment Provider Support

Subbit supports three payment providers out of the box. Enable one, two, or all three — each operates independently:

Stripe

• Stripe Checkout for subscription purchases.
• Stripe Billing Portal for self-service subscription management.
• Webhook handler for subscription lifecycle events (created, updated, cancelled, payment failed).
• Signature verification on all incoming webhooks.

PayPal

• PayPal Subscription API integration.
• Webhook handler with PayPal signature verification via the Notifications API.
• Supports sandbox and production environments.

Razorpay

• Razorpay Subscription API integration.
• HMAC-SHA256 webhook signature verification.
• Full subscription lifecycle handling.

Graceful Fallback: If a payment provider is not configured (no API keys), the checkout endpoint returns a friendly “coming soon” message instead of crashing. You can deploy immediately and add payment providers later.

Premium Subscription Features

• Monthly and yearly subscription plans with configurable pricing.
• Premium badge displayed on user profiles and posts.
• Premium status tracked in the database with automatic expiration.
• is_premium() database function for server-side premium checks.

Gold Economy & Gamification

Gold Awards

• Users can give gold awards to posts and comments they appreciate.
• Atomic gold transfer via a SECURITY DEFINER database function — prevents race conditions and ensures balance integrity.
• Full transaction history with type tracking (earned, spent).
• Gold balance dashboard for each user.

Badge System

• Configurable badge definitions with categories: karma, posts, comments, followers, communities, account age, and role-based.
• Automatic badge awarding via the check_and_award_badges() function — triggered by database events (new post, new comment, new follower, karma change, community join).
• Custom icons, colors, and display order per badge.
• Badge showcase on user profiles.

Leaderboard

• Public leaderboard page ranking users by karma, badges earned, or post count.
• Automatic karma recalculation from post and comment votes via database triggers.

Self-Serve Advertising Platform

• Campaign Creation: Users create ad campaigns with title, description, destination URL, creative image, ad type, placement, budget, and scheduling (start/end dates).
• Community Targeting: Target ads to specific communities or run site-wide.
• Approval Workflow: All ads start as “pending” and require admin approval. Admins can approve or reject with a reason.
• Analytics: Impression and click tracking with visual analytics charts per campaign.
• Moderation Audit Log: All admin actions on ads are logged with timestamps.
• Ad Banner Component: Ready-to-use ad banner that integrates into the post feed.
• Automatic Notifications: Ad owners receive notifications when their ad is approved or rejected (with reason).

Moderation Tools

Community-Level Moderation

• Community admins and moderators can remove posts and comments.
• Ban users from individual communities with a reason.
• All moderation actions are logged to an audit trail.
• Moderation queue and log panels in the community sidebar.

Site-Wide Moderation

• Dedicated moderation dashboard in the admin panel.
• Site-wide user bans — banned users are automatically signed out and blocked from logging in.
• Reports queue for reviewing user-submitted content reports.
• Report categories: spam, harassment, misinformation, and more.

Admin Panel

A comprehensive, isolated admin panel at /admin — separate from the main app UI with its own header and navigation.

Overview

• Analytics Dashboard: Total users, posts, comments, communities, active users, signup trends, top communities, premium metrics, and revenue charts.
• User Management: View all users, assign roles (admin/moderator/user), and issue site-wide bans.

CMS (Content Management System)

• General Settings: Site name, description, maintenance mode, registration toggle, language, posts-per-page.
• Branding: Upload light/dark logos, configure favicon, set primary color theme — applied dynamically across the entire platform.
• Custom Pages: Create CMS-managed pages with slug-based routing (/page/:slug).
• Footer Links: Manage footer navigation with sections, ordering, and external link support.
• Announcement Banner: Site-wide announcement banner management.
• Community Management: Create, edit, and manage communities from the admin panel.

Monetization

• Payment Providers: Configure Stripe, PayPal, and Razorpay API keys.
• Pricing: Set monthly and yearly subscription prices.
• Transactions: View payment transaction history.
• Webhooks: Monitor webhook endpoints and events.

Responsive Sidebar

• Mobile (<768px): Drawer navigation with hamburger menu.
• Tablet (768px–1399px): Mini sidebar with icon-only navigation and tooltips.
• Desktop (≥1400px): Full sidebar with labels and category grouping.

Authentication & Security

• Email + Password: Standard signup and login with configurable email verification.
• OAuth: Google and Apple sign-in support.
• Password Reset: Email-based password recovery flow.
• Role-Based Access Control (RBAC): Three site-wide roles (admin, moderator, user) stored in a separate user_roles table — never on the profile.
• Row-Level Security (RLS): Every single database table has RLS enabled with granular policies.
• Security Definer Functions: Functions like has_role() use SECURITY DEFINER to prevent recursive RLS issues.
• Ban Enforcement: Site-wide and community-level bans are checked on every authentication event.
• Password Strength Indicator: Visual password strength meter on signup.

User Profiles

• Avatar and banner image uploads (stored in cloud storage).
• Display name, username, and bio.
• Karma score calculated from post and comment votes.
• Badge showcase on profile pages.
• Complete post history.
• Follower/following counts with modal lists.
• Online/offline status indicator.
• Hover cards for quick user previews across the platform.

UI & Design

• Dark/Light/System Theme: Three theme modes with persistent user preference.
• Dynamic Theming: Primary color and branding applied from CMS settings in real-time.
• Dynamic Favicon: Favicon configurable from the CMS branding panel.
• Fully Responsive: Mobile-first design that works beautifully on all screen sizes.
• Mobile Bottom Navigation: Native-feeling bottom tab bar on mobile devices.
• Landing Page: Complete marketing landing page with hero, features, pricing, FAQ, and communities sections.
• Cookie Consent Banner: GDPR-compliant cookie consent with accept/dismiss actions.
• Skeleton Loading States: Beautiful skeleton loaders throughout the entire application.
• Hover Cards: Quick-preview hover cards for users, communities, posts, and tags.
• Image Lightbox: Full-screen image viewer for post images.
• Smooth Animations: Framer Motion animations across all page transitions and interactions.

Legal & Compliance Pages

• Privacy Policy page (CMS-managed content).
• User Agreement / Terms of Service page.
• Accessibility statement page.
• Platform rules page.
• Contact form with admin notification and submission management.

Backend Architecture

• Database: PostgreSQL via Supabase with 30+ tables, comprehensive RLS policies, and 25+ database functions and triggers.
• Authentication: Supabase Auth with email, Google, and Apple sign-in.
• Edge Functions: 9 serverless Deno functions handling payments, webhooks, moderation, and link previews.
• File Storage: 8 dedicated storage buckets — avatars, banners, post-images, post-videos, message-attachments, ad-images, community-banners, and site-assets.
• Realtime: Supabase Realtime for instant message delivery, typing indicators, online presence, and live notifications.

Updating & Re-deploying

Updating an existing installation is straightforward:

1. Pull the latest code from Git.
2. Run npm install to update dependencies.
3. Apply new database migrations with npx supabase db push.
4. Deploy updated edge functions with npx supabase functions deploy.
5. Check for any new secrets required by the update.
6. Build and deploy the frontend with npm run build.
7. Verify — the update is complete.

Detailed instructions with troubleshooting are included in the documentation.

Comprehensive Documentation

Includes a standalone documentation site (docs/index.html) covering:

• Step-by-step installation and setup guide.
• Environment variable reference.
• Complete database schema documentation.
• Authentication and security architecture.
• Feature-by-feature usage guides.
• Edge function reference.
• Payment provider integration guides (Stripe, PayPal, Razorpay).
• Deployment instructions (Vercel, Netlify, Nginx, Docker).
• Update/re-deploy checklist.
• Troubleshooting FAQ.
• Complete routing map (28 routes).
• Changelog.

Tech Stack

Frontend	React 18, TypeScript, Tailwind CSS 3, Vite 5
UI Library	shadcn/ui (Radix UI primitives)
Routing	React Router 6
State	TanStack React Query 5
Forms	React Hook Form + Zod validation
Animation	Framer Motion 12
Charts	Recharts 2
Backend	Supabase (PostgreSQL, Auth, Edge Functions, Storage, Realtime)
Testing	Vitest + Playwright

What You Get

• Complete source code (React + TypeScript)
• All Supabase migrations (database schema, RLS, functions, triggers)
• 9 Edge Functions (payments, webhooks, moderation)
• Standalone documentation site
• Setup wizard for zero-config installation
• Free lifetime updates

Requirements

• Node.js 18+ (LTS recommended)
• Supabase project (free tier works for development)
• Any static hosting provider (Vercel, Netlify, or self-hosted)