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.

xBook is a feature-rich, production-ready social networking platform built with React 18, TypeScript 5, Vite 5, Tailwind CSS v3, and powered by Supabase (PostgreSQL, Auth, Storage, Edge Functions, Realtime). It delivers a complete Facebook-like social experience with marketplace, real-time messaging, groups, pages, events, stories, reels, video platform, and a powerful admin panel — all in a single codebase.

Designed for entrepreneurs, startups, and developers who want to launch a social community platform quickly without building from scratch. xBook is fully responsive, mobile-first, supports dark/light themes, and comes with enterprise-grade security (Row-Level Security on 50+ database tables).

Live Demo

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

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

Key Highlights

150+ React Components — Production-quality, reusable UI built with shadcn/ui (Radix UI)
50+ Database Tables — Complete PostgreSQL schema with Row-Level Security policies
10 Edge Functions — Serverless backend logic (admin setup, AI translations, fraud detection, scheduled tasks)
10 Storage Buckets — Organized media storage for profiles, posts, stories, reels, listings, and more
Real-Time Everything — Messages, notifications, online presence, typing indicators via Supabase Realtime
Dark & Light Themes — System preference detection with manual toggle
Fully Responsive — Mobile-first design with adaptive sidebar, touch gestures, swipeable components
4-Step Setup Wizard — Guided first-run installation with secure Super Admin creation
Demo/Test Mode — Toggle via environment variable for quick demonstrations
Comprehensive Documentation — Full setup, deployment, upgrade, and API reference guide included

Authentication & Security

Email & Password Registration — 7-step onboarding wizard with profile photo crop, cover photo, bio, interest selection (choose up to 8 from 14 categories), and friend finder
Social Login — Google OAuth and Apple Sign-In integration ready
Email Verification — Configurable on/off with resend button and 60-second cooldown timer
Password Reset — Secure reset flow via email link to dedicated /reset-password page
Password Strength Indicator — Real-time visual strength feedback during registration (weak/medium/strong/very strong)
Row-Level Security (RLS) — Every single table protected with fine-grained PostgreSQL access policies
RBAC Roles — Admin, Moderator, User roles stored in separate user_roles table with security-definer checking functions
Block & Snooze Users — Full user blocking system and temporary snoozing with configurable duration
Setup Wizard Protection — Automatic redirect to /setup when no admin exists; edge function blocks duplicate admin creation
Demo Mode — VITE_DEMO_MODE environment flag shows quick login credentials on auth page; completely hidden when disabled

User Profiles

Rich Profile Pages — Display name, bio, avatar, cover photo (with drag-to-reposition offset), location, website, education, workplace, phone, date of birth, interests array
Avatar & Cover Photo Cropping — Built-in image cropper (react-easy-crop) with zoom and rotation controls
Profile Completion Progress Bar — Visual percentage indicator encouraging users to fill out all profile fields
5 Profile Tabs — Posts (user timeline), About (intro card with all personal details), Friends (grid with management), Photos (gallery from posts), Check-ins (map history)
Map-Based Check-ins — Interactive Leaflet map showing user’s check-in history with geocoding integration
Online Presence Tracking — Real-time last_seen_at with green (online), yellow (away), gray (offline) status indicators
Configurable Gender Options — Admin-managed gender selections
Relationship Status — Customizable relationship display
Friends Card — Quick-view 6-friend grid on profile sidebar
Photos Card — Auto-generated gallery of images extracted from user’s posts

Posts & News Feed

Rich Post Creation — Text content with multiple image uploads (swipeable carousel with dot indicators), video uploads, and styled background options for text-only posts
Feelings & Activities — Attach mood/activity status with emoji to posts (e.g., “feeling happy “)
Location Tagging — Check-in to locations within posts
Privacy Controls — Per-post privacy: Public (everyone), Friends Only (mutual friends), Only Me (private)
6 Reaction Types — Like , Love ❤️, Haha , Wow , Sad , Angry with animated emoji picker
Threaded Comments — Nested reply chains with individual reactions on each comment
Share System — Share posts to own timeline, to groups, or to pages with original post attribution
Save/Bookmark Posts — Save posts to personal collection accessible from dedicated Saved page
Pin to Profile Top — Pin one important post to the top of your profile timeline
Edit with Full History — Edit posts with complete revision history tracking and diff viewer modal
Post Scheduling — Schedule posts for future publishing with monthly calendar view and weekly timeline view
Post Embedding — Generate embeddable HTML iframe code via edge function for external websites
AI-Powered Translation — Translate any post to any language using AI via edge function
Post Boosting — Promote posts to wider audience using promotion credits system
Comment Notification Subscription — Subscribe to get notified of new comments on specific posts
Hide Posts from Feed — Hide unwanted posts without unfriending
Report Content — Report inappropriate posts with reason and description to moderation queue
Archive Posts — Archive old posts without permanently deleting them
Disable Comments — Post owners can toggle comments on/off per post
Image Lightbox — Full-screen image viewer with inline social panel (reactions and comments alongside the image)
Multi-Image Carousel — Swipeable image gallery with Embla carousel and dot navigation
Hashtag Auto-Linking — Hashtags in post content are automatically linked to discovery pages at /hashtag/:tag
Interest-Based Feed — Users can mark posts as “interested” or “not interested” to influence future feed relevance

Stories

Photo & Video Stories — Upload ephemeral content with automatic 24-hour expiration
Full-Screen Viewer — Immersive story viewing experience with progress bar indicators and auto-advance between stories
Story Reactions — React to stories with emoji and optional text message reply
Story Highlights — Save expired stories to permanent highlight collections with custom cover images and titles
Story Ring Indicator — Colorful ring animation on profile avatars showing unviewed stories
50MB Upload Limit — Dedicated story-media storage bucket with generous file size support

Reels (Short-Form Video)

Video Upload — Upload short-form vertical videos (up to 100MB) with caption and custom thumbnail
Like & Threaded Comments — Full interaction system with nested reply threads
View Count Tracking — Automatic view counting displayed on each reel
Creator Follow System — Follow favorite content creators; follower counts displayed
Share & Save — Share reels externally and save to personal collection
Bottom-Sheet Comments — Mobile-optimized comments panel sliding up from bottom
Upload Modal — Clean upload interface with video preview, caption input, and thumbnail selection

Real-Time Messaging

1:1 Direct Messages — Private conversations between any two users
Group Chats — Multi-user group conversations with admin/member roles
File Attachments — Send images, documents, PDFs, and other files (up to 10MB) with preview
Voice Messages — Record and send voice notes with waveform visualization and playback
Message Reactions — React to individual messages with any emoji
Read Receipts — See exactly when messages are read by recipients
Typing Indicators — Real-time “typing…” status shown when other users are composing
Pin Messages — Pin important messages to the top of conversations for easy reference
Edit & Delete Messages — Edit sent messages (shows “edited” indicator); delete messages
Forward Messages — Forward any message to other conversations
GIF Picker — Search and send animated GIFs via Tenor API proxy (edge function handles CORS)
Full Emoji Picker — Categorized emoji keyboard with search functionality
Group Chat Settings — Rename group, change group avatar, add/remove members, assign admin roles
Real-Time Delivery — Messages appear instantly without page refresh via Supabase Realtime PostgreSQL subscriptions
Unread Count Badge — Visual indicator of unread messages in navigation

Groups

Public & Private Groups — Public groups (anyone can join immediately) or Private groups (admin approval required)
10 Categories — General, Technology, Gaming, Music, Sports, Education, Business, Entertainment, Science, Art
Group Posts — Full post creation within groups with pin support (admins can pin important posts)
Auto-Created Group Conversation — Every group automatically gets a linked messaging conversation via database trigger
Group Events — Create and manage events scoped to specific groups with full RSVP functionality
Role Management — Three-tier roles: Admin (full control), Moderator (content management), Member (standard access)
Shareable Invite Links — Generate invite codes with configurable expiration dates and maximum usage limits
Per-Group Notification Preferences — Mute entire group, or selectively toggle notifications for posts, comments, and events
Group Analytics Dashboard — Member growth charts, post engagement metrics, activity statistics
Activity Feed — Chronological timeline of all group activity (new members, posts, events)
Group Rules — Admin-editable rules/guidelines section displayed to all members
Hover Cards — Quick-preview popup showing group info, member count, and join button on hover
Cover Photo & Avatar — Customizable group branding with image upload to group-images bucket
Member Management — Approve/reject join requests (private groups), remove members, promote/demote roles
Group Recommendations — Discover suggested groups based on categories
Post Share Modal — Share group posts externally or to other conversations

Pages

Business & Organization Pages — Dedicated pages with custom slug URLs accessible at /page/:slug
Multiple Page Categories — Business, Entertainment, Education, Community, Technology, Health, Arts, Sports, Food, Other
Page Posts — Create content as the page identity with optional scheduling for future publication
Follower System — Users follow pages to see content in their main feed
Multi-Admin Support — Add multiple administrators to manage a single page collaboratively
Page Events — Create and manage events under the page’s brand
Analytics Dashboard — Follower growth, post reach, engagement metrics with trend charts
Contact Information — Display email, phone, website URL, and physical location
About Section — Detailed page description and information
Hover Cards — Quick-preview popup on page name hover showing key details
Scheduled Posts — Calendar view and weekly timeline for managing scheduled page content
Page Recommendations — Discover suggested pages based on categories and interests

Events

10 Categories — Social, Business, Education, Entertainment, Sports, Technology, Health & Wellness, Arts & Culture, Community, Other
RSVP System — Three response options: Going, Interested, Not Going with full attendee list modal showing who’s attending
Recurrence Support — None, Daily, Weekly, Monthly, Yearly with configurable recurrence end date and parent/child event linking
Configurable Reminders — Set reminders at 15min, 30min, 1hr, 2hr, 1 day, or 1 week before event; delivered via edge function
Calendar View — Monthly calendar grid with colored dots indicating events on each day; click to filter
Map View — Interactive Leaflet map with marker clustering showing event locations geographically
Threaded Comments — Full discussion system on events with nested reply threads
Related Events — Discover similar events by matching category
.ics Calendar Export — One-click export to Google Calendar, Apple Calendar, Outlook, and other calendar apps
Share Modal — Share events via copyable link or social platforms
Cover Images — Custom cover photos for visual event branding
Weekly Email Digest — Automated weekly summary of upcoming events delivered via edge function
“This Week” Sidebar Widget — Quick-view of events happening this week in the right sidebar
Event Editing — Full edit capability with date, location, description, and cover photo updates

Marketplace

Product Listings — Create listings with title, rich description, price, multiple image uploads, category, condition, and location
10 Categories — Electronics, Vehicles, Fashion & Accessories, Home & Garden, Sports & Outdoors, Toys & Games, Books & Media, Music & Instruments, Services, General
4 Conditions — New, Used – Like New, Used – Good, Used – Fair
Listing Status — Active, Sold, Reserved with color-coded visual indicators
Offer System — Buyers send monetary offers with optional message; sellers can accept, reject, or counter-offer
Seller Dashboard — Comprehensive analytics showing unique views, total saves, active offers, accepted revenue, conversion rate, save rate, and 7-day trend charts built with Recharts
Seller Reviews & Star Ratings — 5-star rating system with written text reviews; average rating calculated and displayed
Verified Seller Badges — Trust badges automatically awarded to sellers meeting verification criteria via edge function
Automated Fraud Detection — AI-powered fraud signal detection analyzing price anomalies, suspicious patterns, and listing metadata via dedicated edge function
Fraud Warning Banner — Visual warning banner displayed on listings with active unresolved fraud signals
Price History Charts — Track and visualize price changes over time with line charts; automatic logging via database trigger
Listing Templates — Save frequently used listing configurations (title, description, category, condition, location) as reusable templates
Save/Bookmark Listings — Save interesting listings to a dedicated “Listings” tab on the Saved page
Recently Viewed — Automatic tracking and display of recently browsed listings using localStorage
View Counter — Track unique listing views with viewer_id for analytics
Promoted Listings — Boost listing visibility with credit-based promotion system featuring targeting by category and location
Listing Reports — Report suspicious or policy-violating listings; reports go to admin moderation queue
Recommended & Trending Listings — Discover similar listings and popular items
Direct Message Integration — Contact sellers via pre-filled messages containing listing title and price
Share Listings — Share via copyable link or post to activity feed as text-based preview card
Bulk Actions — Manage multiple listings simultaneously from the seller dashboard interface

Watch (Video Platform)

Video Uploads — Upload long-form videos categorized across 13 content categories
Playlists — Create and manage public or private video playlists
Live Streaming Indicator — Visual “LIVE” badge overlay for live-streaming content
Like & Threaded Comments — Full interaction with nested comment replies
Save & Share — Bookmark videos and share externally
View Tracking — Automatic view count tracking
Category-Based Recommendations — Discover related videos by content category
Video Cards — Thumbnail preview cards with duration overlay, view count, and channel info
Playlist Panel — Side panel showing playlist videos with current position highlighted

Notifications

Real-Time In-App Notifications — Instant delivery with animated unread count badge in header
11+ Notification Types — Friend requests, likes, comments, shares, group invites, group join requests, event reminders, messages, mentions, creator follows, page follows
Web Push Notifications — Browser permission-based native push notifications
Sound Alerts — Toggleable audio notification sounds with user preference
Swipeable Dismiss — Swipe-to-dismiss gestures on mobile notification items
“On This Day” Memories — Daily memories card showing posts from this date in past years, powered by edge function
Mark as Read — Individual and bulk “mark all as read” functionality
Notification Preferences — Granular per-type control over which notifications to receive
Dropdown & Full Page — Quick-access dropdown from header plus full notification page at /notifications

Global Search

Unified Search Bar — Single search input searching across users, posts, groups, pages, events, marketplace listings, and hashtags simultaneously
Categorized Tab Results — Results organized by content type with tab switching
Real-Time Search — Instant results as you type with debounced queries
Hashtag Discovery — Dedicated hashtag aggregation pages at /hashtag/:tag
Keyboard Shortcut — Ctrl+K / Cmd+K to instantly focus the search bar

Admin Panel (Complete Backend Management)

Admin Dashboard — Overview with key platform metrics and real-time online user tracking
User Management — Search and filter all users; view detailed profiles; assign roles (admin, moderator); issue warnings with reasons; apply temporary bans (with configurable duration) or permanent bans
11 Settings Categories:
1. General — Maintenance mode toggle, SEO-friendly URLs, platform-wide toggles
2. Users — User registration on/off, default user roles, profile field settings
3. Login & Security — Two-factor authentication, brute-force protection, session timeout configuration
4. Website Info — Site name, meta description, base URL, contact email
5. API Keys — Manage third-party API keys (Google Maps, reCAPTCHA, etc.)
6. Files & Storage — Storage backend selection (Amazon S3, DigitalOcean Spaces, Wasabi, FTP, Google Cloud Storage, Backblaze B2), FFMPEG media processing toggle
7. Email & SMS — SMTP server configuration, SMS gateway setup, OneSignal push notification integration, customizable HTML email templates
8. AI Settings — OpenAI and Replicate API integration, credit-based AI feature monetization with user quotas
9. Features — Individually toggle platform features on/off (stories, reels, marketplace, watch, events, groups, pages)
10. Payments — Multi-payment gateway configuration (Stripe, PayPal, Razorpay, etc.), Pro subscription tier pricing, digital wallet limits
11. Mobile Apps — Mobile app configuration, app store download links, deep linking setup
Site Design — Upload separate logos for light/dark themes, favicon, set primary theme color, inject custom global CSS and JavaScript code
CMS Editor — Rich text WYSIWYG editor for creating static content pages (Terms of Service, Privacy Policy, FAQ, etc.) with slug-based URLs and publish/unpublish toggle
Content Moderation Queue — Review all reported content with status workflow (Pending → Approved/Rejected) and reviewer notes
User Warnings & Bans — Tiered enforcement: written warnings, temporary bans with specific duration, permanent bans with documented reasons
Moderation Activity Log — Complete audit trail of every moderation action with timestamps, moderator ID, action type, and details
Advertisement Management — Create and manage sponsored posts with demographic targeting (age range, gender, location, interest category), set frequency caps, monitor performance dashboards with impression/click/CTR analytics
Verification Requests — Process user identity verification and seller verification requests
Groups Management — Admin overview and management of all platform groups
Pages Management — Admin overview and management of all platform pages
Events Management — Admin overview and management of all platform events
Listings Management — Admin overview and management of all marketplace listings
Genders Configuration — Manage available gender options for user profiles
Video & Audio Settings — Configure media processing options and quality settings
Push Notification Management — Server-side push notification configuration and sending
Email Template Management — Customize automated notification email templates

Advertising & Monetization System

Sponsored Posts — Users create promoted content with targeting by age range, gender, geographic location, and interest category
Frequency Caps — Configurable limit on how often individual users see the same advertisement
Performance Dashboard — Detailed analytics tracking impressions, clicks, click-through rate (CTR) with visual Recharts graphs
Horizontal Banner Ads — Banner ad placements throughout the platform feed
Interstitial Ads — Full-screen advertisements displayed at configurable time intervals
Promotion Credits Economy — Virtual credit system for boosting posts and marketplace listings
Credit Transactions — Full transaction history with credit earn/spend tracking
Ad Performance Analytics — Comprehensive reporting for advertisers with ROI metrics

Database Architecture (50+ Tables with Row-Level Security)

Complete PostgreSQL schema organized by domain:

Core: profiles, user_roles, friendships, posts, post_likes, comments, comment_likes, conversations, messages, message_reactions, message_read_receipts, notifications, site_settings, blocked_users, snoozed_users
Social: groups, group_members, group_posts, group_post_likes, group_post_comments, group_invites, group_notification_preferences, pages, page_admins, page_followers, page_posts, page_post_likes, page_post_comments, group_events, group_event_rsvps, event_comments, event_reminder_preferences, reels, reel_likes, reel_comments, creator_follows
Marketplace: listings, listing_offers, listing_views, listing_price_history, listing_templates, listing_reports, listing_fraud_signals, saved_listings, seller_reviews, promoted_listings, promotion_credits, credit_transactions
System: content_reports, moderation_log, cms_pages, hidden_posts, saved_posts, post_edit_history, post_interests, post_notification_subscriptions, sponsored_posts, conversation_members

Every table has RLS enabled. Security-definer helper functions: has_role(), is_group_member(), is_group_admin_or_mod(), is_page_admin(), is_conversation_member(). Database triggers handle: profile auto-creation on signup, group conversation auto-linking, member sync, price history logging, and updated_at timestamps.

Design System

Primary Color: Teal (#247b7b) with full HSL token system
Typography: Geist Sans + Geist Mono font family
Dark & Light Modes: Complete dual-theme with system preference detection
Semantic Design Tokens: CSS custom properties for consistent theming across 150+ components
shadcn/ui Components: 50+ Radix UI primitives (Dialog, Dropdown, Popover, Tabs, Toast, etc.)
Responsive Breakpoints: Mobile-first with tablet and desktop optimizations
Lucide React Icons: Consistent icon system throughout the platform

What You Get

Full source code — no encrypted, obfuscated, or minified files
Comprehensive HTML documentation site with sidebar navigation, search, and copy buttons
4-step setup wizard for easy first-time installation
Demo mode toggle (VITE_DEMO_MODE) for quick demonstrations
All database migration SQL files included and documented
10 ready-to-deploy serverless edge functions
Deployment guides for Vercel, Netlify, Docker, Nginx/VPS, and Cloudflare Pages
Upgrade & migration guide for updating existing installations
Rollback procedures documented
Free lifetime updates
Dedicated support

Documentation Includes

System requirements & prerequisites
Step-by-step installation guide (6 numbered steps)
Environment variable reference (required & optional)
Setup wizard walkthrough (4 steps explained)
Build & compile instructions (dev, production, preview, type-check, tests)
Deployment guides for 6 hosting platforms
Complete upgrade & migration guide (frontend, database, edge functions, storage)
Pre-flight upgrade checklist (14 verification steps)
Rollback procedures (frontend & database)
Database schema reference (50+ tables by domain)
API usage examples (queries, inserts, edge function calls)
Project directory structure map
Security & RLS documentation
Troubleshooting guide (8 common issues with solutions)
FAQ (7 frequently asked questions)
Full v1.0.0 changelog

Changelog — v1.0.0 (Initial Release)

Core Platform: Full social networking — React 18 + TypeScript 5 + Vite 5 + Tailwind CSS v3, dark/light themes, responsive mobile-first design, global search, hashtag discovery, deep linking
Authentication: 7-step registration, Google OAuth, Apple Sign-In, email verification, password reset, setup wizard, demo mode
Social: Posts (multi-image, video, backgrounds, feelings, location, privacy, 6 reactions, threaded comments, scheduling, edit history, embedding, AI translation, boosting), Stories (24h expiry, highlights), Reels (100MB video, creator follows)
Messaging: Real-time 1:1 and group chats, attachments, voice messages, reactions, read receipts, typing indicators, pin/edit/forward, GIF + emoji pickers
Groups: Public/private, 10 categories, auto-created chat, events, roles, invite links, notification prefs, analytics
Pages: Business pages, followers, scheduled posts, multi-admin, events, analytics
Events: 10 categories, RSVP, recurrence, reminders, calendar/map views, .ics export, weekly digest
Marketplace: Listings, offers, seller dashboard, reviews, verified badges, fraud detection, price history, templates, promotions
Watch: Video platform, 13 categories, playlists, live indicator
Admin: Complete admin panel with 11 settings categories, CMS, site design, moderation queue, warnings/bans, activity log, ads management, verification system
Infrastructure: 50+ tables with RLS, 10 edge functions, 10 storage buckets, realtime subscriptions, teal design system

Browser Support

Chrome 90+
Firefox 90+
Safari 15+
Edge 90+
Opera 76+

Support & Contact

Need help? We provide prompt, professional support for all purchase-related questions, installation issues, customization guidance, and bug reports.

Visit us at https://wrapcoders.com/contact

xBook — Social Networking JS Script