apps/docs/content/docs.v6/ai/tutorials/linktree-clone.mdx
In this comprehensive vibe coding tutorial, you'll build a complete Linktree clone SaaS application from scratch using AI assistance. This guide teaches you how to leverage AI tools to rapidly develop a full-stack application with:
By the end of this tutorial, you'll have a working SaaS application where users can sign up, create their profile, and manage their personal link page — all built with AI-assisted development.
:::info[What is Vibe Coding?]
Vibe coding is a development approach where you collaborate with AI assistants to build applications. You describe what you want to build, and the AI helps generate the code while you guide the direction and make architectural decisions.
:::
Before starting this tutorial, make sure you have:
:::note[Recommended AI Models]
For best results, we recommend using the latest AI models such as (minimum) Claude Sonnet 4, Gemini 2.5 Pro, or GPT-4o. These models provide better code generation accuracy and understand complex architectural patterns.
:::
Let's start by creating a new Next.js application:
npx create-next-app@latest app-name
Once the setup is complete, you'll need to add Prisma and Prisma Postgres to your project. We've prepared a detailed prompt that handles the complete setup for you.
👉 Find the setup prompt here: Next.js + Prisma Prompt
How to use it:
prompt.md at the root of your projectThe AI will set up Prisma ORM, create your database connection, and configure everything automatically.
Let's verify everything is working correctly:
npm run dev
npm run db:studio
If both commands run without errors and you can see sample data in Prisma Studio, you're ready to continue!
:::tip[Good Practice: Commit Early and Often]
Throughout this tutorial, we'll commit our changes regularly. This makes it easy to track progress and roll back if something goes wrong.
Start by linking your project to GitHub:
git init
git add .
git commit -m "Initial setup: Next.js app with Prisma"
:::
Now let's add user authentication using Clerk, which provides a complete authentication solution out of the box.
Steps to follow:
👉 Clerk Next.js Quickstart: clerk.com/docs/nextjs/getting-started/quickstart
The guide will walk you through installing the SDK, adding environment variables, and wrapping your app with the ClerkProvider.
Once complete, commit your changes:
git add .
git commit -m "Add Clerk authentication setup"
Since we're building a Linktree clone, we need to update the database schema to support our specific data model. This includes:
User model with a unique username (for public profile URLs like /username)Link model to store each user's linksReplace the contents of your prisma/schema.prisma file with the following:
generator client {
provider = "prisma-client"
output = "../app/generated/prisma"
}
datasource db {
provider = "postgresql"
}
// Example User model for testing
model User {
id Int @id @default(autoincrement())
email String @unique
username String @unique // Important for the public profile URL
clerkId String @unique // Links to Clerk Auth
name String?
links Link[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Link {
id Int @id @default(autoincrement())
title String
url String
userId Int
user User @relation(fields: [userId], references: [id])
createdAt DateTime @default(now())
}
Since we're changing the schema structure, we need to reset the database. The existing seed data was just for testing purposes, so it's safe to drop and recreate:
npx prisma db push --force-reset
This command:
:::warning[Use with Caution]
The --force-reset flag deletes all existing data. This is fine during prototyping, but never use it on a production database! Once your schema is stable, switch to prisma migrate dev for proper migration tracking.
:::
Open Prisma Studio to verify the new schema is applied:
npm run db:studio
You should see the updated User and Link tables (they'll be empty, which is expected).
Commit your changes:
git add .
git commit -m "Update schema for Linktree clone"
Here's the challenge: when a user signs in with Clerk, they exist in Clerk's system but not in your database. We need to bridge this gap.
Our approach: create a "Claim Username" flow where users pick their unique username (e.g., yourapp.com/johndoe) after signing in for the first time.
:::info[Use ASK Mode First]
When working with AI assistants, we recommend using ASK mode by default to review suggested changes before applying them. Only switch to AGENT mode once you're comfortable with the proposed code.
:::
Copy and paste the following prompt into your AI assistant:
Connect Clerk authentication to your Prisma database with a "Claim Username" flow.
**Goal:**
When a user signs in via Clerk, they don't automatically exist in YOUR database. Create a flow where:
1. Logged out → Show landing page with "Sign In" button
2. Logged in but no DB profile → Show "Claim Username" form
3. Has DB profile → Show dashboard
**User Model (already in schema):**
model User {
id Int @id @default(autoincrement())
email String @unique
username String @unique
clerkId String @unique
name String?
links Link[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
**Files to create/update:**
1. `app/actions.ts` - Server Action with `claimUsername(formData)`
2. `app/page.tsx` - Three-state UI (logged out / claim username / dashboard)
3. `app/api/users/route.ts` - Update POST to accept `clerkId`, `email`, `username`, `name`
**Requirements:**
- Use `'use server'` directive in `app/actions.ts`
- Use `currentUser()` from `@clerk/nextjs/server` to get auth user
- Store `clerkId`, `email`, `username`, and `name` in User model
- Use `redirect("/")` after successful profile creation
- Handle username uniqueness (Prisma will throw if duplicate)
**Pattern:**
1. Server Action receives FormData, validates username (min 3 chars, alphanumeric + underscore)
2. Creates User in Prisma with Clerk's `user.id` as `clerkId`
3. Page.tsx checks: `currentUser()` → then `prisma.user.findUnique({ where: { clerkId } })`
4. Render different UI based on auth state and DB state
**Keep it simple:**
- No middleware file needed
- No webhook sync (user creates profile manually)
- Basic validation (username length >= 3)
- Errors just throw (no fancy error UI for MVP)
After the AI generates the code, you may see TypeScript errors. This is because the Prisma Client needs to be regenerated to reflect the schema changes:
npx prisma generate
Test the complete flow:
npm run db:studio)If everything works, commit your changes!
Let's give our app a more polished, friendly look inspired by platforms like Buy Me a Coffee.
👉 Visit Buy Me a Coffee for design inspiration
Copy and paste this prompt to your AI assistant:
Design a minimal, friendly UI inspired by Buy Me a Coffee.
**Theme:**
- Force light mode only (no dark mode switching)
- Clean white background (#FFFFFF)
- Black text (#000000) for headings
- Gray (#6B7280) for secondary text
- Bright yellow (#FFDD00) for CTA buttons
- Light gray (#F7F7F7) for cards/sections
- Subtle borders (#E5E5E5)
**Typography & Spacing:**
- Large, bold headlines (text-5xl or bigger)
- Generous whitespace and padding
- Rounded corners everywhere (rounded-full for buttons, rounded-xl for cards)
**Buttons:**
- Primary: Yellow background, black text, rounded-full, font-semibold
- Secondary: White background, border, rounded-full
**Overall feel:**
- Friendly, approachable, not corporate
- Minimal — only essential elements
- Mobile-first with good touch targets (py-4, px-8 on buttons)
- One unified canvas — background applies to the entire page (body), with white cards floating on top. No separate section backgrounds.
Use Tailwind CSS. Keep it simple.
After the AI applies the changes:
Once verified, commit the changes:
git add .
git commit -m "Update UI design"
Now let's add the core functionality: managing links! Users should be able to add new links and delete existing ones from their dashboard.
Copy and paste this prompt:
Build a simple dashboard for managing links using Next.js App Router and Server Actions.
**Requirements:**
- Server Component page that fetches user data from database
- "Add Link" form with Title and URL inputs
- List of existing links with Delete button
- Use Server Actions (no API routes) for create/delete operations
- Use `revalidatePath("/")` after mutations to refresh the page
**Pattern:**
1. Create server actions in `actions.ts` with `'use server'` directive
2. Pass actions directly to form `action` prop
3. Keep page.tsx as a Server Component (no 'use client')
4. Use hidden inputs for IDs (e.g., `<input type="hidden" name="linkId" value={id} />`)
**Keep it simple:**
- No loading states
- No client components
- No confirmation dialogs
- Just forms + server actions + revalidation
This is the MVP pattern for CRUD with Next.js App Router.
Test the link management:
Both operations should work instantly without page navigation.
This is the heart of a Linktree clone: public profile pages that anyone can visit at /username.
Copy and paste this prompt:
Build a public profile page at /[username] using Next.js App Router dynamic routes.
**Requirements:**
- Create `app/[username]/page.tsx` as a Server Component
- Fetch user + links from database by username (from URL params)
- Return 404 if user not found (use `notFound()` from next/navigation)
- Display: avatar (first letter), username, name, and list of links
- Links open in new tab with `target="_blank"`
- Add a small "Create your own" link at the bottom
**Pattern:**
1. Get params: `const { username } = await params`
2. Query database with `findUnique({ where: { username } })`
3. If no user: call `notFound()`
4. Render profile with links as clickable buttons
**Keep it simple:**
- No auth required (it's a public page)
- Pure Server Component (no 'use client')
- Basic styling with hover effects
This is the core "Linktree" feature — anyone can visit /username to see the links.
Test your public profile:
localhost:3000/your-username (replace with your actual username)Make it easy for users to share their profile URL with a one-click copy button.
Copy and paste this prompt:
**Requirements:**
- Create a Client Component (`'use client'`) for the button
- Use `navigator.clipboard.writeText(url)` to copy
- Show "Copied!" feedback for 2 seconds after clicking
- Use `useState` to toggle the button text
**Pattern:**
1. Create `app/components/copy-button.tsx` with 'use client'
2. Accept `url` as a prop
3. On click: copy to clipboard, set `copied` to true
4. Use `setTimeout` to reset after 2 seconds
5. Import and use in your Server Component page
**Keep it simple:**
- One small client component
- No toast libraries
- Just inline text feedback ("Copy link" → "Copied!")
When someone visits a non-existent username, they should see a friendly error page instead of a generic 404.
Copy and paste this prompt:
Create a custom 404 page for Next.js App Router.
**Requirements:**
- Create `app/not-found.tsx` (Server Component)
- Display: 404 heading, friendly message, "Go home" button
- Match your app's design (colors, fonts, spacing)
**Pattern:**
- Next.js automatically uses `not-found.tsx` when `notFound()` is called
- Or when a route doesn't exist
- No configuration needed — just create the file
**Keep it simple:**
- Static page, no data fetching
- One heading, one message, one link
- Same styling as rest of the app
Test the 404 page by visiting a random URL like /this-user-does-not-exist. You should see your custom 404 page with a link back to the homepage.
Let's make the app more visually distinctive with a custom background pattern.
First, either:
Then, save it as background.svg in your public/ folder.
Copy and paste this prompt:
Add a custom SVG background to my app.
**Requirements:**
- The svg file is in the `public/` folder (e.g., `public/background.svg`)
- Apply it as a fixed, full-cover background on the body
**Pattern:**
In `globals.css`, update the body:
```css
body {
background: var(--background) url("/background.svg") center/cover no-repeat fixed;
min-height: 100vh;
}
```
**Key properties:**
- `center/cover` — centers and scales to fill
- `no-repeat` — prevents tiling
- `fixed` — background stays in place when scrolling
Files in `public/` are served at the root URL, so `/background.svg` works.
Commit your changes once it's working correctly.
Create visual depth by adding semi-transparent card containers that "float" over the background.
Copy and paste this prompt:
Add a reusable card container class to create visual separation from the background.
**Requirements:**
- Create a `.card` class in `globals.css`
- Apply glassmorphism: semi-transparent white + blur
- Use on all main content areas (landing, forms, dashboard, profile pages)
**Pattern:**
In `globals.css`, add:
```css
.card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
```
**Usage:**
Wrap content sections with `<div className="card">...</div>`
For public profile pages (/[username]):
Wrap the entire profile (avatar, name, username, and links list) in a single .card container
This creates a Linktree-style floating card effect
Footer/attribution links stay outside the card
Hero section:
Add a soft radial glow behind the content (large blurred white circle, blur-3xl, 50% opacity)
No visible container edges — just organic, fading brightness
Content floats freely over the glow
**Result:**
- Content "lifts" off the background
- Subtle blur creates depth
- Consistent UI across all pages
If users sign in with Google or another OAuth provider, Clerk stores their profile photo. Let's display it on public profiles!
Copy and paste this prompt:
On the public profile page (`/[username]`), display the user's Clerk profile image (Google photo, etc.) instead of the initial letter avatar.
**Pattern:**
```typescript
// Fetch Clerk user to get profile image
const client = await clerkClient();
const clerkUser = await client.users.getUser(user.clerkId);
```
**Display:**
- Use a plain `` tag (not Next.js Image component)
- If `clerkUser.imageUrl` exists, show the image
- Otherwise fallback to the yellow initial avatar
**Keep it simple:**
- No try/catch — let errors bubble up
- No next.config changes needed
- No database schema changes needed
Visit your public profile page and verify your profile image (from Google, GitHub, etc.) is displayed instead of the initial letter avatar.
Small icons can significantly improve UI clarity. Let's add some using Lucide React.
Copy and paste this prompt:
Add Lucide React icons to improve the UI.
First install: npm install lucide-react
Add icons to these elements:
- View button: ExternalLink icon
- Delete button: Trash2 icon (replace text with icon)
- Empty links state: Link icon
Import icons from 'lucide-react' and use with size prop (e.g., size={18}).
Keep buttons minimal — only add icons where they improve clarity.
Browse through your app and verify the icons appear on:
Time to ship! Let's deploy your app to Vercel.
:::warning[Important Steps]
Follow these steps carefully to avoid deployment errors.
:::
Add a postinstall script to ensure Prisma Client is generated during deployment.
Add this to your package.json scripts section:
{
"scripts": {
"postinstall": "prisma generate"
}
}
📖 Reference: Deploy to Vercel - Build Configuration
Delete the scripts/ folder if it exists. This folder was auto-generated during initial setup for seed data, you don't need it in production.
DATABASE_URLNEXT_PUBLIC_CLERK_PUBLISHABLE_KEYCLERK_SECRET_KEYAfter your first deployment:
https://your-app.vercel.app)NEXT_PUBLIC_APP_URL=https://your-app.vercel.app
:::warning[Don't Forget This Step]
If you skip setting NEXT_PUBLIC_APP_URL, features like the "Copy Link" button will copy localhost URLs instead of your production URL.
:::
Test your deployed app thoroughly:
Congratulations! Your Linktree clone is live! 🎉