MoBio

Open-Source, Self-Hosted Link in Bio & Personal Identity Platform

English • Bahasa Indonesia • Documentation • Report Bug • Request Feature

---

🌟 Overview

MoBio is a modern, privacy-first, self-hosted Link in Bio & Personal Website built for creators, engineers, and digital professionals who want complete ownership over their online presence.

Powered by React Router 7 and Cloudflare's serverless edge infrastructure (Workers, D1 SQLite, and R2 Object Storage), MoBio delivers sub-50ms global response times with zero monthly server costs under Cloudflare's generous free tier.

Featuring MoBio Studio—a powerful admin dashboard inspired by modern design systems—MoBio includes an integrated Real Live Preview & Visual Theme Editor, allowing you to customize colors, structural layouts, card styles, typography, and optical glass effects with instantaneous real-time feedback.

---

📸 Screenshots

MoBio Studio — Real Live Preview & Visual Builder

Public Storefront (Desktop & Mobile)

Desktop Viewport (1440px)	Mobile Viewport (390px)

Modern Admin Shell (Light & Dark Modes)

Light Mode Dashboard	Dark Mode Dashboard

Visual Theme Studio & Customization Controls

20 Structural Layouts	10 Profile Card Styles

---

⚡ Core Features

🎨 Visual Theme Studio & Real Live Preview

• True Production Rendering: Renders the actual public website components (FixedBackground, ProfileGlassCard, VerticalLinkList, ExploreSection, ContactSection) inside an embedded simulator canvas—not a fake mockup.
• Instant In-Memory Sync: Edits to themes, layouts, typography, and optical sliders reflect in <5ms via postMessage without premature database writes.
• Multi-Device Viewport Simulator: Instant preview for Desktop (1440px), Laptop (1280px), Tablet (768px), and Mobile (390px with simulated iOS bezel and status bar).
• Two-Way Dock Navigation Sync: Toolbar selector for Home, Explore, and Contact synchronizes bidirectionally with the in-canvas floating dock.
• 30 Color Themes: 15 Light and 15 Dark hand-crafted themes with gradient chips and auto-contrast indicators.
• 20 Page Layouts: Minimal Stack, Classic Hero, Bento Grid, Wide Hero, Split Column, Editorial, and more.
• 10 Profile Card Styles & 3 Sizes: Floating Glass, Hero Banner, Minimal Flat, Neumorphic, Border Glow, and Clean White.
• 24 Google Fonts: Curated typography pairings with dynamic in-browser font injection.
• Optics & Surface Sliders: Custom accent color picker with 16 curated chips, WCAG AA contrast check, glass blur (8–32px), opacity (40–95%), and specular border sheen.

🛠️ MoBio Studio Admin Shell

• Modern Architecture: Desktop collapsible sidebar, persistent topbar, breadcrumb navigation, and mobile touch drawer.
• Strict Light & Dark Mode: Unified semantic color tokens (AdminTokens.ts) guarantee pure, legible surfaces without dark-mode leakage.
• Theme-Aware Icon Picker: Full icon search across Basic Icons, Custom Uploads, and external HTTPS URLs, preserving brand colors for YouTube, Instagram, TikTok, Spotify, WhatsApp, LinkedIn, GitHub, and X.
• Atomic Draft & Publishing: All edits are saved to an isolated draft state. Preview draft changes privately before publishing atomically to the public website with a single click.

📁 Media Library & Android Compatibility

• Cloudflare R2 Integration: Direct object storage for avatars, cover banners, background images, and background MP4/WebM videos.
• Dual-Source Android Upload: Dedicated chooser for Android Gallery vs System File Manager, resolving MIME-type and video sniffing issues on mobile browsers.
• HTTP 206 Partial Content Video Streaming: Native video background playback with autoplay, muted, loop, and playsInline.

🧭 Modular Explore Showcase & Contact Channels

• 10 Content Models: Showcase projects, articles, music, videos, books, apps, photography galleries, events, code repositories, and custom links.
• Horizontal Arrow Navigation: Smooth-scrolling arrow navigation controls with boundary-aware disabling states and touch-swipe gesture support.
• Built-in Lightbox: Fullscreen image carousel and detailed metadata view.
• Direct Contact Channels: Email, WhatsApp, Telegram, and social media channels with direct intent handlers.

🔒 Privacy & Zero Trust Security

• Cloudflare Access OTP: Administrative endpoints are guarded behind Zero Trust Email One-Time Pin (OTP) authentication.
• Zero-Tracker Analytics (Click Monitor): Lightweight click analytics stored locally in Cloudflare D1 without logging IP addresses, User-Agents, or third-party cookies.
• Identity Shield: Production admin emails are automatically masked in public and admin metadata.

---

🏗️ Architecture

                 ┌────────────────────────────────────────────────────────┐
                 │                 Cloudflare Global Edge                 │
                 └───────────────────────────┬────────────────────────────┘
                                             │
                       ┌─────────────────────┴─────────────────────┐
                       │                                           │
                       ▼                                           ▼
          ┌─────────────────────────┐                 ┌─────────────────────────┐
          │  Public Link in Bio     │                 │   MoBio Studio Admin    │
          │  (me.yourdomain.com)    │                 │   (/studio)             │
          └────────────┬────────────┘                 └────────────┬────────────┘
                       │                                           │
                       │                                    Cloudflare Access
                       │                                   (Zero Trust Email OTP)
                       │                                           │
                       └─────────────────────┬─────────────────────┘
                                             │
                                  ┌──────────┴──────────┐
                                  │ React Router 7 SSR  │
                                  │  (Cloudflare Worker)│
                                  └──────────┬──────────┘
                                             │
                       ┌─────────────────────┴─────────────────────┐
                       │                                           │
                       ▼                                           ▼
          ┌─────────────────────────┐                 ┌─────────────────────────┐
          │      Cloudflare D1      │                 │      Cloudflare R2      │
          │  (Serverless SQLite DB) │                 │  (Media Object Storage) │
          └─────────────────────────┘                 └─────────────────────────┘

---

🚀 Quick Start & Installation

Prerequisites

• Node.js v22.0.0 or higher
• Cloudflare Account (Free tier is 100% sufficient)
• Wrangler CLI (npm install -g wrangler)

1. Clone the Repository

git clone https://github.com/dimasmong/MoBio.git
cd MoBio
npm install

2. Configure Local Development

Copy the environment examples:

cp .env.example .env
cp .dev.vars.example .dev.vars

3. Setup Cloudflare Resources

Create your Cloudflare D1 database:

npx wrangler d1 create mobio-studio-db

Copy the resulting database_id and paste it into wrangler.json under d1_databases.

Create your Cloudflare R2 media bucket:

npx wrangler r2 bucket create mobio-media-bucket

4. Apply Database Migrations

Initialize the database schema locally:

npx wrangler d1 migrations apply mobio-studio-db --local

For remote production deployment:

npx wrangler d1 migrations apply mobio-studio-db --remote

5. Start Development Server

npm run dev

Open your browser at http://localhost:5173 to view the public site, or http://localhost:5173/studio to access MoBio Studio.

---

📦 Deployment to Cloudflare

1. Login to Cloudflare via Wrangler:

   npx wrangler login

2. Verify your wrangler.json configuration:

   npm run check

3. Deploy to Cloudflare Workers:

   npm run deploy

4. Configure Cloudflare Access Zero Trust for /studio:
   • In Cloudflare Zero Trust Dashboard: Access ➔ Applications ➔ Add an Application (Self-hosted).
   • Set Path: yourdomain.com/studio*.
   • Add Policy: Allow your personal email via One-Time Pin (OTP).

Detailed setup instructions are available in docs/STUDIO-SETUP.md and docs/DEPLOYMENT.md.

---

📖 Documentation Index

• 📐 Architecture Guide — Technical internals, data models, and request lifecycle.
• ⚙️ Configuration Reference — Environment variables, bindings, and options.
• 🚀 Deployment Guide — Step-by-step production deployment to Cloudflare.
• 💻 Development Guide — Local workflow, script commands, and testing.
• 📦 Installation Guide — Complete setup instructions from scratch.
• 🔐 Studio Setup & Zero Trust — Securing MoBio Studio with Cloudflare Access.
• ❓ Troubleshooting Guide — Solutions to common issues.

---

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md and CODE_OF_CONDUCT.md before opening a pull request.

1. Fork the Project (https://github.com/dimasmong/MoBio/fork)
2. Create your Feature Branch (git checkout -b feat/amazing-feature)
3. Commit your Changes (git commit -m 'feat: add amazing feature')
4. Push to the Branch (git push origin feat/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is open-source and licensed under the MIT License © 2026 Dimas Mong.