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