Appendix
A. Architecture Guide

Appendix A: LinkHub Architecture Guide

For non-developers, understanding the structure (Flow) is more important than the code. Let's visually understand LinkHub's overall architecture.

Overall System Configuration

┌─────────────────────────────────────────────────┐
│              Visitor's Browser                    │
│  ┌───────────────────────────────────────────┐  │
│  │     linkhub.com/username (Profile Page)   │  │
│  │   [Link1] [Link2] [Link3] ...             │  │
│  └───────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘
                        │
                        ▼ HTTPS Request
┌─────────────────────────────────────────────────┐
│              LinkHub App (Vercel)                 │
│  ┌──────────┐  ┌──────────┐  ┌──────────────┐  │
│  │ Next.js  │  │  API     │  │ Supabase     │  │
│  │  SSR     │  │  Routes  │  │  Client      │  │
│  └──────────┘  └──────────┘  └──────────────┘  │
└─────────────────────────────────────────────────┘
                        │
                        ▼ Supabase SDK
┌─────────────────────────────────────────────────┐
│              Supabase (Cloud)                    │
│  ┌──────────┐  ┌──────────┐  ┌──────────────┐  │
│  │PostgreSQL│  │   Auth   │  │   Realtime   │  │
│  │(profiles,│  │ (Login)  │  │(Subscriptions│  │
│  │ links,   │  │          │  │  )           │  │
│  │ clicks)  │  │          │  │              │  │
│  └──────────┘  └──────────┘  └──────────────┘  │
└─────────────────────────────────────────────────┘

Page Request Flow

Flow when a visitor accesses linkhub.com/username:

  1. Visitor accesses the profile URL
  2. Next.js on Vercel looks up the profile for that username
  3. Fetches profile + link list from Supabase
  4. Server renders HTML (SSR)
  5. Profile page displayed in the visitor's browser
  6. On link click → record in clicks table → redirect to the URL

Role of Each Component

ComponentLocationRoleTechnology
Web AppVercelProfile pages, dashboardNext.js, React
DBSupabaseStore profiles, links, clicksPostgreSQL
AuthSupabaseSign up, loginMagic Link, OAuth
RealtimeSupabaseLive previewSupabase Realtime

Data Model

profiles
├── id (UUID, PK)
├── user_id (FK → auth.users)
├── username (unique)
├── display_name
├── bio
├── theme
└── created_at

links
├── id (UUID, PK)
├── profile_id (FK → profiles)
├── title
├── url
├── icon
├── sort_order
├── is_active
└── created_at

clicks
├── id (UUID, PK)
├── link_id (FK → links)
├── clicked_at
├── referrer
└── country

Relationships

  • auth.users 1:1 profiles — One profile per account
  • profiles 1:N links — Multiple links per profile
  • links 1:N clicks — Multiple click records per link

Tech Stack Summary

Frontend (Vercel)
├── Next.js 14 (App Router)
├── TypeScript
├── Tailwind CSS
└── Supabase Client

Database (Supabase)
├── PostgreSQL
├── Row Level Security
├── Auth (Magic Link, OAuth)
└── Real-time Subscriptions
7. MonetizationB. FAQ