xBook — Social Networking 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.
xBook — Social Networking JS Script
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).
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