Linktree Clone SaaS

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

}

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"

  }

}