Vibe Code a Linktree Clone SaaS with Next.js, Prisma & Clerk

git add .
git commit -m "Add Clerk authentication setup"

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())
}

npm run db:studio

git add .
git commit -m "Update schema for Linktree clone"

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)

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.

git add .
git commit -m "Update UI design"

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.

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.

**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!")

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

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.

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

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 `<img>` 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

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.

{
  "scripts": {
    "postinstall": "prisma generate"
  }
}