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