xBook — Social Networking JS Script

IMPORTANT: AI Utilization Prices

This platform makes use of AI-powered options (content material era, topic line ideas, analytics insights) that hook up with exterior AI suppliers. AI API utilization prices are NOT included within the buy value. You will want to supply your personal API keys and handle related prices individually. Typical prices differ primarily based on utilization quantity.

xBook is a feature-rich, production-ready social networking platform constructed with React 18, TypeScript 5, Vite 5, Tailwind CSS v3, and powered by Supabase (PostgreSQL, Auth, Storage, Edge Capabilities, Realtime). It delivers an entire Fb-like social expertise with market, real-time messaging, teams, pages, occasions, tales, reels, video platform, and a strong admin panel — all in a single codebase.

Designed for entrepreneurs, startups, and builders who wish to launch a social neighborhood platform shortly with out constructing from scratch. xBook is absolutely responsive, mobile-first, helps darkish/gentle themes, and comes with enterprise-grade safety (Row-Degree Safety on 50+ database tables).

Stay Demo

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

Consumer: [email protected] / User123!
Moderator: [email protected] / Moderator123!
Admin: [email protected] / Admin123!

Key Highlights

150+ React Parts — Manufacturing-quality, reusable UI constructed with shadcn/ui (Radix UI)
50+ Database Tables — Full PostgreSQL schema with Row-Degree Safety insurance policies
10 Edge Capabilities — Serverless backend logic (admin setup, AI translations, fraud detection, scheduled duties)
10 Storage Buckets — Organized media storage for profiles, posts, tales, reels, listings, and extra
Actual-Time Every thing — Messages, notifications, on-line presence, typing indicators by way of Supabase Realtime
Darkish & Mild Themes — System choice detection with guide toggle
Absolutely Responsive — Cellular-first design with adaptive sidebar, contact gestures, swipeable elements
4-Step Setup Wizard — Guided first-run set up with safe Tremendous Admin creation
Demo/Check Mode — Toggle by way of setting variable for fast demonstrations
Complete Documentation — Full setup, deployment, improve, and API reference information included

Authentication & Safety

E mail & Password Registration — 7-step onboarding wizard with profile picture crop, cowl picture, bio, curiosity choice (select as much as 8 from 14 classes), and pal finder
Social Login — Google OAuth and Apple Signal-In integration prepared
E mail Verification — Configurable on/off with resend button and 60-second cooldown timer
Password Reset — Safe reset movement by way of e mail hyperlink to devoted /reset-password web page
Password Energy Indicator — Actual-time visible energy suggestions throughout registration (weak/medium/sturdy/very sturdy)
Row-Degree Safety (RLS) — Each single desk protected with fine-grained PostgreSQL entry insurance policies
RBAC Roles — Admin, Moderator, Consumer roles saved in separate user_roles desk with security-definer checking capabilities
Block & Snooze Customers — Full consumer blocking system and non permanent snoozing with configurable length
Setup Wizard Safety — Automated redirect to /setup when no admin exists; edge operate blocks duplicate admin creation
Demo Mode — VITE_DEMO_MODE setting flag reveals fast login credentials on auth web page; utterly hidden when disabled

Consumer Profiles

Wealthy Profile Pages — Show identify, bio, avatar, cowl picture (with drag-to-reposition offset), location, web site, schooling, office, cellphone, date of delivery, pursuits array
Avatar & Cowl Photograph Cropping — Constructed-in picture cropper (react-easy-crop) with zoom and rotation controls
Profile Completion Progress Bar — Visible proportion indicator encouraging customers to fill out all profile fields
5 Profile Tabs — Posts (consumer timeline), About (intro card with all private particulars), Mates (grid with administration), Images (gallery from posts), Test-ins (map historical past)
Map-Based mostly Test-ins — Interactive Leaflet map exhibiting consumer’s check-in historical past with geocoding integration
On-line Presence Monitoring — Actual-time last_seen_at with inexperienced (on-line), yellow (away), grey (offline) standing indicators
Configurable Gender Choices — Admin-managed gender alternatives
Relationship Standing — Customizable relationship show
Mates Card — Fast-view 6-friend grid on profile sidebar
Images Card — Auto-generated gallery of photographs extracted from consumer’s posts

Posts & Information Feed

Wealthy Publish Creation — Textual content content material with a number of picture uploads (swipeable carousel with dot indicators), video uploads, and styled background choices for text-only posts
Emotions & Actions — Connect temper/exercise standing with emoji to posts (e.g., “feeling completely satisfied “)
Location Tagging — Test-in to areas inside posts
Privateness Controls — Per-post privateness: Public (everybody), Mates Solely (mutual associates), Solely Me (personal)
6 Response Varieties — Like , Love ❤️, Haha , Wow , Unhappy , Offended with animated emoji picker
Threaded Feedback — Nested reply chains with particular person reactions on every remark
Share System — Share posts to personal timeline, to teams, or to pages with authentic submit attribution
Save/Bookmark Posts — Save posts to private assortment accessible from devoted Saved web page
Pin to Profile High — Pin one essential submit to the highest of your profile timeline
Edit with Full Historical past — Edit posts with full revision historical past monitoring and diff viewer modal
Publish Scheduling — Schedule posts for future publishing with month-to-month calendar view and weekly timeline view
Publish Embedding — Generate embeddable HTML iframe code by way of edge operate for exterior web sites
AI-Powered Translation — Translate any submit to any language utilizing AI by way of edge operate
Publish Boosting — Promote posts to wider viewers utilizing promotion credit system
Remark Notification Subscription — Subscribe to get notified of recent feedback on particular posts
Disguise Posts from Feed — Disguise undesirable posts with out unfriending
Report Content material — Report inappropriate posts with motive and outline to moderation queue
Archive Posts — Archive outdated posts with out completely deleting them
Disable Feedback — Publish homeowners can toggle feedback on/off per submit
Picture Lightbox — Full-screen picture viewer with inline social panel (reactions and feedback alongside the picture)
Multi-Picture Carousel — Swipeable picture gallery with Embla carousel and dot navigation
Hashtag Auto-Linking — Hashtags in submit content material are routinely linked to discovery pages at /hashtag/:tag
Curiosity-Based mostly Feed — Customers can mark posts as “” or “not ” to affect future feed relevance

Tales

Photograph & Video Tales — Add ephemeral content material with computerized 24-hour expiration
Full-Display screen Viewer — Immersive story viewing expertise with progress bar indicators and auto-advance between tales
Story Reactions — React to tales with emoji and optionally available textual content message reply
Story Highlights — Save expired tales to everlasting spotlight collections with customized cowl photographs and titles
Story Ring Indicator — Colourful ring animation on profile avatars exhibiting unviewed tales
50MB Add Restrict — Devoted story-media storage bucket with beneficiant file measurement assist

Reels (Quick-Kind Video)

Video Add — Add short-form vertical movies (as much as 100MB) with caption and customized thumbnail
Like & Threaded Feedback — Full interplay system with nested reply threads
View Depend Monitoring — Automated view counting displayed on every reel
Creator Observe System — Observe favourite content material creators; follower counts displayed
Share & Save — Share reels externally and save to private assortment
Backside-Sheet Feedback — Cellular-optimized feedback panel sliding up from backside
Add Modal — Clear add interface with video preview, caption enter, and thumbnail choice

Actual-Time Messaging

1:1 Direct Messages — Non-public conversations between any two customers
Group Chats — Multi-user group conversations with admin/member roles
File Attachments — Ship photographs, paperwork, PDFs, and different recordsdata (as much as 10MB) with preview
Voice Messages — Report and ship voice notes with waveform visualization and playback
Message Reactions — React to particular person messages with any emoji
Learn Receipts — See precisely when messages are learn by recipients
Typing Indicators — Actual-time “typing…” standing proven when different customers are composing
Pin Messages — Pin essential messages to the highest of conversations for simple reference
Edit & Delete Messages — Edit despatched messages (reveals “edited” indicator); delete messages
Ahead Messages — Ahead any message to different conversations
GIF Picker — Search and ship animated GIFs by way of Tenor API proxy (edge operate handles CORS)
Full Emoji Picker — Categorized emoji keyboard with search performance
Group Chat Settings — Rename group, change group avatar, add/take away members, assign admin roles
Actual-Time Supply — Messages seem immediately with out web page refresh by way of Supabase Realtime PostgreSQL subscriptions
Unread Depend Badge — Visible indicator of unread messages in navigation

Teams

Public & Non-public Teams — Public teams (anybody can be a part of instantly) or Non-public teams (admin approval required)
10 Classes — Common, Know-how, Gaming, Music, Sports activities, Training, Enterprise, Leisure, Science, Artwork
Group Posts — Full submit creation inside teams with pin assist (admins can pin essential posts)
Auto-Created Group Dialog — Each group routinely will get a linked messaging dialog by way of database set off
Group Occasions — Create and handle occasions scoped to particular teams with full RSVP performance
Position Administration — Three-tier roles: Admin (full management), Moderator (content material administration), Member (commonplace entry)
Shareable Invite Hyperlinks — Generate invite codes with configurable expiration dates and most utilization limits
Per-Group Notification Preferences — Mute whole group, or selectively toggle notifications for posts, feedback, and occasions
Group Analytics Dashboard — Member progress charts, submit engagement metrics, exercise statistics
Exercise Feed — Chronological timeline of all group exercise (new members, posts, occasions)
Group Guidelines — Admin-editable guidelines/pointers part exhibited to all members
Hover Playing cards — Fast-preview popup exhibiting group data, member depend, and be a part of button on hover
Cowl Photograph & Avatar — Customizable group branding with picture add to group-images bucket
Member Administration — Approve/reject be a part of requests (personal teams), take away members, promote/demote roles
Group Suggestions — Uncover urged teams primarily based on classes
Publish Share Modal — Share group posts externally or to different conversations

Occasions

10 Classes — Social, Enterprise, Training, Leisure, Sports activities, Know-how, Well being & Wellness, Arts & Tradition, Neighborhood, Different
RSVP System — Three response choices: Going, , Not Going with full attendee checklist modal exhibiting who’s attending
Recurrence Help — None, Day by day, Weekly, Month-to-month, Yearly with configurable recurrence finish date and dad or mum/youngster occasion linking
Configurable Reminders — Set reminders at 15min, 30min, 1hr, 2hr, 1 day, or 1 week earlier than occasion; delivered by way of edge operate
Calendar View — Month-to-month calendar grid with coloured dots indicating occasions on every day; click on to filter
Map View — Interactive Leaflet map with marker clustering exhibiting occasion areas geographically
Threaded Feedback — Full dialogue system on occasions with nested reply threads
Associated Occasions — Uncover related occasions by matching class
.ics Calendar Export — One-click export to Google Calendar, Apple Calendar, Outlook, and different calendar apps
Share Modal — Share occasions by way of copyable hyperlink or social platforms
Cowl Photos — Customized cowl images for visible occasion branding
Weekly E mail Digest — Automated weekly abstract of upcoming occasions delivered by way of edge operate
“This Week” Sidebar Widget — Fast-view of occasions occurring this week in the appropriate sidebar
Occasion Modifying — Full edit functionality with date, location, description, and canopy picture updates

Market

Product Listings — Create listings with title, wealthy description, value, a number of picture uploads, class, situation, and placement
10 Classes — Electronics, Autos, Vogue & Equipment, Dwelling & Backyard, Sports activities & Outside, Toys & Video games, Books & Media, Music & Devices, Providers, Common
4 Circumstances — New, Used – Like New, Used – Good, Used – Honest
Itemizing Standing — Energetic, Offered, Reserved with color-coded visible indicators
Supply System — Consumers ship financial presents with optionally available message; sellers can settle for, reject, or counter-offer
Vendor Dashboard — Complete analytics exhibiting distinctive views, complete saves, energetic presents, accepted income, conversion price, save price, and 7-day pattern charts constructed with Recharts
Vendor Evaluations & Star Scores — 5-star score system with written textual content critiques; common score calculated and displayed
Verified Vendor Badges — Belief badges routinely awarded to sellers assembly verification standards by way of edge operate
Automated Fraud Detection — AI-powered fraud sign detection analyzing value anomalies, suspicious patterns, and itemizing metadata by way of devoted edge operate
Fraud Warning Banner — Visible warning banner displayed on listings with energetic unresolved fraud alerts
Worth Historical past Charts — Observe and visualize value modifications over time with line charts; computerized logging by way of database set off
Itemizing Templates — Save often used itemizing configurations (title, description, class, situation, location) as reusable templates
Save/Bookmark Listings — Save attention-grabbing listings to a devoted “Listings” tab on the Saved web page
Lately Seen — Automated monitoring and show of not too long ago browsed listings utilizing localStorage
View Counter — Observe distinctive itemizing views with viewer_id for analytics
Promoted Listings — Enhance itemizing visibility with credit-based promotion system that includes concentrating on by class and placement
Itemizing Reviews — Report suspicious or policy-violating listings; experiences go to admin moderation queue
Advisable & Trending Listings — Uncover related listings and common objects
Direct Message Integration — Contact sellers by way of pre-filled messages containing itemizing title and value
Share Listings — Share by way of copyable hyperlink or submit to exercise feed as text-based preview card
Bulk Actions — Handle a number of listings concurrently from the vendor dashboard interface

Watch (Video Platform)

Video Uploads — Add long-form movies categorized throughout 13 content material classes
Playlists — Create and handle public or personal video playlists
Stay Streaming Indicator — Visible “LIVE” badge overlay for live-streaming content material
Like & Threaded Feedback — Full interplay with nested remark replies
Save & Share — Bookmark movies and share externally
View Monitoring — Automated view depend monitoring
Class-Based mostly Suggestions — Uncover associated movies by content material class
Video Playing cards — Thumbnail preview playing cards with length overlay, view depend, and channel data
Playlist Panel — Aspect panel exhibiting playlist movies with present place highlighted

Notifications

Actual-Time In-App Notifications — Prompt supply with animated unread depend badge in header
11+ Notification Varieties — Pal requests, likes, feedback, shares, group invitations, group be a part of requests, occasion reminders, messages, mentions, creator follows, web page follows
Net Push Notifications — Browser permission-based native push notifications
Sound Alerts — Toggleable audio notification sounds with consumer choice
Swipeable Dismiss — Swipe-to-dismiss gestures on cell notification objects
“On This Day” Recollections — Day by day reminiscences card exhibiting posts from this date in previous years, powered by edge operate
Mark as Learn — Particular person and bulk “mark all as learn” performance
Notification Preferences — Granular per-type management over which notifications to obtain
Dropdown & Full Web page — Fast-access dropdown from header plus full notification web page at /notifications

World Search

Unified Search Bar — Single search enter looking throughout customers, posts, teams, pages, occasions, market listings, and hashtags concurrently
Categorized Tab Outcomes — Outcomes organized by content material sort with tab switching
Actual-Time Search — Prompt outcomes as you sort with debounced queries
Hashtag Discovery — Devoted hashtag aggregation pages at /hashtag/:tag
Keyboard Shortcut — Ctrl+Ok / Cmd+Ok to immediately focus the search bar

Admin Panel (Full Backend Administration)

Admin Dashboard — Overview with key platform metrics and real-time on-line consumer monitoring
Consumer Administration — Search and filter all customers; view detailed profiles; assign roles (admin, moderator); concern warnings with causes; apply non permanent bans (with configurable length) or everlasting bans
11 Settings Classes:
1. Common — Upkeep mode toggle, Search engine optimization-friendly URLs, platform-wide toggles
2. Customers — Consumer registration on/off, default consumer roles, profile subject settings
3. Login & Safety — Two-factor authentication, brute-force safety, session timeout configuration
4. Web site Data — Web site identify, meta description, base URL, contact e mail
5. API Keys — Handle third-party API keys (Google Maps, reCAPTCHA, and so on.)
6. Information & Storage — Storage backend choice (Amazon S3, DigitalOcean Areas, Wasabi, FTP, Google Cloud Storage, Backblaze B2), FFMPEG media processing toggle
7. E mail & SMS — SMTP server configuration, SMS gateway setup, OneSignal push notification integration, customizable HTML e mail templates
8. AI Settings — OpenAI and Replicate API integration, credit-based AI function monetization with consumer quotas
9. Options — Individually toggle platform options on/off (tales, reels, market, watch, occasions, teams, pages)
10. Funds — Multi-payment gateway configuration (Stripe, PayPal, Razorpay, and so on.), Professional subscription tier pricing, digital pockets limits
11. Cellular Apps — Cellular app configuration, app retailer obtain hyperlinks, deep linking setup
Web site Design — Add separate logos for gentle/darkish themes, favicon, set main theme colour, inject customized international CSS and JavaScript code
CMS Editor — Wealthy textual content WYSIWYG editor for creating static content material pages (Phrases of Service, Privateness Coverage, FAQ, and so on.) with slug-based URLs and publish/unpublish toggle
Content material Moderation Queue — Overview all reported content material with standing workflow (Pending → Permitted/Rejected) and reviewer notes
Consumer Warnings & Bans — Tiered enforcement: written warnings, non permanent bans with particular length, everlasting bans with documented causes
Moderation Exercise Log — Full audit path of each moderation motion with timestamps, moderator ID, motion sort, and particulars
Commercial Administration — Create and handle sponsored posts with demographic concentrating on (age vary, gender, location, curiosity class), set frequency caps, monitor efficiency dashboards with impression/click on/CTR analytics
Verification Requests — Course of consumer identification verification and vendor verification requests
Teams Administration — Admin overview and administration of all platform teams
Pages Administration — Admin overview and administration of all platform pages
Occasions Administration — Admin overview and administration of all platform occasions
Listings Administration — Admin overview and administration of all market listings
Genders Configuration — Handle obtainable gender choices for consumer profiles
Video & Audio Settings — Configure media processing choices and high quality settings
Push Notification Administration — Server-side push notification configuration and sending
E mail Template Administration — Customise automated notification e mail templates

Promoting & Monetization System

Sponsored Posts — Customers create promoted content material with concentrating on by age vary, gender, geographic location, and curiosity class
Frequency Caps — Configurable restrict on how usually particular person customers see the identical commercial
Efficiency Dashboard — Detailed analytics monitoring impressions, clicks, click-through price (CTR) with visible Recharts graphs
Horizontal Banner Advertisements — Banner advert placements all through the platform feed
Interstitial Advertisements — Full-screen ads displayed at configurable time intervals
Promotion Credit Financial system — Digital credit score system for enhancing posts and market listings
Credit score Transactions — Full transaction historical past with credit score earn/spend monitoring
Advert Efficiency Analytics — Complete reporting for advertisers with ROI metrics

Database Structure (50+ Tables with Row-Degree Safety)

Full PostgreSQL schema organized by area:

Core: profiles, user_roles, friendships, posts, post_likes, feedback, comment_likes, conversations, messages, message_reactions, message_read_receipts, notifications, site_settings, blocked_users, snoozed_users
Social: teams, 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
Market: 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

Each desk has RLS enabled. Safety-definer helper capabilities: has_role(), is_group_member(), is_group_admin_or_mod(), is_page_admin(), is_conversation_member(). Database triggers deal with: profile auto-creation on signup, group dialog auto-linking, member sync, value historical past logging, and updated_at timestamps.

Design System

Main Colour: Teal (#247b7b) with full HSL token system
Typography: Geist Sans + Geist Mono font household
Darkish & Mild Modes: Full dual-theme with system choice detection
Semantic Design Tokens: CSS customized properties for constant theming throughout 150+ elements
shadcn/ui Parts: 50+ Radix UI primitives (Dialog, Dropdown, Popover, Tabs, Toast, and so on.)
Responsive Breakpoints: Cellular-first with pill and desktop optimizations
Lucide React Icons: Constant icon system all through the platform

What You Get

Full supply code — no encrypted, obfuscated, or minified recordsdata
Complete HTML documentation website with sidebar navigation, search, and duplicate buttons
4-step setup wizard for simple first-time set up
Demo mode toggle (VITE_DEMO_MODE) for fast demonstrations
All database migration SQL recordsdata included and documented
10 ready-to-deploy serverless edge capabilities
Deployment guides for Vercel, Netlify, Docker, Nginx/VPS, and Cloudflare Pages
Improve & migration information for updating current installations
Rollback procedures documented
Free lifetime updates
Devoted assist

Documentation Consists of

System necessities & stipulations
Step-by-step set up information (6 numbered steps)
Surroundings variable reference (required & optionally available)
Setup wizard walkthrough (4 steps defined)
Construct & compile directions (dev, manufacturing, preview, type-check, assessments)
Deployment guides for six internet hosting platforms
Full improve & migration information (frontend, database, edge capabilities, storage)
Pre-flight improve guidelines (14 verification steps)
Rollback procedures (frontend & database)
Database schema reference (50+ tables by area)
API utilization examples (queries, inserts, edge operate calls)
Undertaking listing construction map
Safety & RLS documentation
Troubleshooting information (8 frequent points with options)
FAQ (7 often requested questions)
Full v1.0.0 changelog

Changelog — v1.0.0 (Preliminary Launch)

Core Platform: Full social networking — React 18 + TypeScript 5 + Vite 5 + Tailwind CSS v3, darkish/gentle themes, responsive mobile-first design, international search, hashtag discovery, deep linking
Authentication: 7-step registration, Google OAuth, Apple Signal-In, e mail verification, password reset, setup wizard, demo mode
Social: Posts (multi-image, video, backgrounds, emotions, location, privateness, 6 reactions, threaded feedback, scheduling, edit historical past, embedding, AI translation, boosting), Tales (24h expiry, highlights), Reels (100MB video, creator follows)
Messaging: Actual-time 1:1 and group chats, attachments, voice messages, reactions, learn receipts, typing indicators, pin/edit/ahead, GIF + emoji pickers
Teams: Public/personal, 10 classes, auto-created chat, occasions, roles, invite hyperlinks, notification prefs, analytics
Pages: Enterprise pages, followers, scheduled posts, multi-admin, occasions, analytics
Occasions: 10 classes, RSVP, recurrence, reminders, calendar/map views, .ics export, weekly digest
Market: Listings, presents, vendor dashboard, critiques, verified badges, fraud detection, value historical past, templates, promotions
Watch: Video platform, 13 classes, playlists, stay indicator
Admin: Full admin panel with 11 settings classes, CMS, website design, moderation queue, warnings/bans, exercise log, adverts administration, verification system
Infrastructure: 50+ tables with RLS, 10 edge capabilities, 10 storage buckets, realtime subscriptions, teal design system

Browser Help

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

Help & Contact

Need assistance? We offer immediate, skilled assist for all purchase-related questions, set up points, customization steering, and bug experiences.

Go to us at https://wrapcoders.com/contact

Source

[email protected]

Leave a Reply Cancel reply

Marketing Vanguard at Cannes: Why the Experience Is the Brand ft. Virgin Voyages’ Nathan Rosenberg

Education & Institute | Playschool Banner (EI002)

The Westies arrives on MGM+ this weekend — you won’t remember watching it in three months time, but this Irish mobster true story is fun while it lasts

Press ESC to close

IMPORTANT: AI Utilization Prices