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:

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

Role of Each Component

Component	Location	Role	Technology
Web App	Vercel	Profile pages, dashboard	Next.js, React
DB	Supabase	Store profiles, links, clicks	PostgreSQL
Auth	Supabase	Sign up, login	Magic Link, OAuth
Realtime	Supabase	Live preview	Supabase 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. 수익화 B. 자주 묻는 질문