# How to Vibe Code Your Own Linktree (and Stop Paying for It)

> Everything you are, in one simple link

- Site: https://linktr.ee
- Category: Link-in-bio SaaS
- Platforms: Web app, iOS app, Android app
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal-use subset in a couple of weeks, but skip trying to replicate the massive global caching infrastructure and enterprise tier.

The core loop of a link-in-bio page—a user profile schema, a dynamic public landing page renderer, and simple click tracking—is straightforward to scaffold with modern full-stack frameworks. However, building a production-grade clone that handles millions of visitors requires robust edge caching, resilient database indexing for click analytics, and strict URL-abuse moderation to prevent malicious phishing links.

### What you can't replicate

- 70 million registered user base and entrenched cultural ubiquity
- Billions of organic inbound backlinks from top-tier social media profiles
- Enterprise trust partnerships and direct platform integrations

## What it does

A digital identity and link-in-bio platform that consolidates social media profiles, e-commerce stores, content channels, and payment portals into a single customized landing page.

### Core features

- Custom bio URL routing and dynamic page rendering
- Drag-and-drop link builder with rich thumbnail support
- Theme customization (colors, fonts, animated backgrounds)
- Analytics tracking (page views, click-through rates, geographic splits)
- Mailing list subscription collection forms
- Digital product checkout and payment link integration
- User authentication and profile management dashboard

## The business

### Pricing

- Free: $0/mo
- Starter: ~$5-$8/mo
- Pro: ~$9-$15/mo
- Premium: ~$24-$35/mo

### Funding

$166M raised.
- Undisclosed Early Growth (~$10.7M, Oct 2020)
- Expansion Round (~$45M, Mar 2021)
- Series C ($110M, Mar 2022)
Investors: Coatue, Index Ventures, Insight Partners, Airtree Ventures

Founded 2016.
Team size: 300-350.

## The hard parts

- Sub-second global edge delivery for billions of monthly profile page loads
- High-throughput click and event tracking ingestion without slowing down page renders
- OAuth webhook handling and token refreshing for third-party social integrations
- Automated URL safety scanning and trust compliance detection to prevent phishing abuse

## How to vibe code Linktree

### Prerequisites

- Node.js (free): Required runtime for building and running the full-stack Next.js application.
- GitHub (free): Version control and repository hosting for continuous integration and deployment.

### Recommended AI tools

- Claude Code: Best-in-class terminal coding agent for scaffolding database schemas, building complex UI components, and iterating across multiple files.
- Cursor: AI-native code editor ideal for fine-tuning frontend styling, Tailwind components, and responsive layouts.

### Stack

- Frontend: Next.js with Tailwind CSS and Framer Motion
- Backend: Next.js Server Actions and API Routes
- Database: Turso (libSQL/SQLite at the edge)
- Auth: better-auth
- Payments: none (personal use)
- Other: Vercel AI SDK, PostHog

### Hosting

- Cloudflare (Global edge deployment and static asset delivery for sub-second public profile page loads): $0-5/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Turso database connection, and define core relational tables for users, links, and analytics events.

```
Create a new Next.js project configured with TypeScript and Tailwind CSS. Set up Drizzle ORM connecting to a Turso libSQL database. Define three tables: `users` (id, username, bio, avatar_url, theme_config), `links` (id, user_id, title, url, icon, is_active, sort_order), and `clicks` (id, link_id, visitor_ip, referrer, created_at). Ensure proper foreign key constraints and indexes on username and link lookups.
```

2. **Authentication & Dashboard Layout** — Implement authentication using better-auth and build the core admin dashboard where creators manage their profile settings and links.

```
Integrate `better-auth` into the Next.js application supporting email/password and GitHub OAuth. Build an authenticated dashboard layout with a sidebar and main content area. Create a profile settings page where users can update their bio, avatar upload, and select background accent colors stored in the `users` table.
```

3. **Link Management & Reordering** — Build the interactive link management interface allowing users to add, edit, delete, toggle, and reorder links in real time.

```
Build a link management interface inside the dashboard. Implement Server Actions to handle creating, updating, deleting, and toggling link visibility. Add drag-and-drop reordering functionality (or up/down priority buttons) that updates the `sort_order` field in the database instantly with optimistic UI updates.
```

4. **Dynamic Public Profile Page & Click Tracking** — Create the dynamic public profile renderer (`/[username]`) optimized for speed and implement asynchronous click-tracking logging.

```
Create a dynamic public profile route at `app/[username]/page.tsx`. Fetch user profile data and active links server-side with aggressive caching headers. Render a responsive, highly polished mobile-first layout displaying the avatar, bio, and interactive link buttons with custom themes. When a visitor clicks any link, trigger an asynchronous background logging event to record the click in the `clicks` table without delaying the outbound navigation.
```

5. **Analytics Dashboard & Polish** — Build an analytics view to visualize click counts, visitor trends, and geographic or referrer distributions.

```
Build an analytics tab in the dashboard that aggregates click data from the `clicks` table over selectable time ranges (last 7 days, 30 days). Use lightweight chart components to show clicks over time per link, top referrers, and total unique visitor counts. Polish all UI states, add loading skeletons, and ensure WCAG accessibility compliance.
```

### Cost vs paying

**Starting costs (one-time):**

- AI Coding Assistant (Claude Pro / Cursor): $20 one-time
- Custom Domain (optional): $12/yr
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Cloudflare Edge Hosting & Turso Database: $0/mo (Free tiers)
- Total: $0/mo

- Paying for the SaaS instead: $15/mo (Pro)
- Build time: 16-24 hours
- AI tool credits: $20 (one month of Claude Pro / Cursor)
- Break-even: Never (built for personal learning and fun)

## Sources

- [Clay - Linktree Funding & Company Profile](https://www.crunchbase.com/organization/linktree/financial_details)
- [Tracxn - Linktree Profile & Metrics](https://www.tracxn.com)
- [Wikipedia - Linktree History](https://en.wikipedia.org/wiki/Linktree)
- [Sacra - Linktree Revenue, Valuation & Business Model Analysis](https://sacra.com)
- [Himalayas - Linktree Tech Stack Overview](https://himalayas.app/companies/linktree/tech-stack)