xBook — Social Networking JS Script

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 — 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).

Live Demo

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

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