Build a Full-Stack App with Next.js, Supabase, and Claude: From Zero to Deployed on Vercel

Create a smart bookmark manager that saves URLs, generates summaries and tags using Claude, and provides a dashboard for searching and filtering bookmarks. This application leverages Next.js App Router, Supabase for authentication and databases, and Claude for AI-powered enrichment, all deployed seamlessly to Vercel.

Prerequisites

• Next.js: 16.2.4 — Next.js docs
• Supabase: @supabase/supabase-js 2.104.0 — Supabase docs
• Vercel: 51.8.0 — Vercel docs
• Node.js: v18.0.0 or higher

Step 1 — Set Up the Next.js Project

npx create-next-app@16.2.4 bookmark-manager

Create a new Next.js project named bookmark-manager. This initializes the project structure using the specified version of Next.js.

Expected result: A new directory named bookmark-manager with the base Next.js files.

Step 2 — Install Required Packages

cd bookmark-manager
npm install @supabase/supabase-js vercel

Install Supabase and Vercel packages. These libraries facilitate database interactions and deployment capabilities.

Expected result: The node_modules directory will include the installed packages.

Step 3 — Configure Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
CLAUDE_API_KEY=your_claude_api_key

Store sensitive data like Supabase URL, Supabase anon key, and Claude API key in environment variables to keep them secure.

Expected result: The .env.local file will contain the necessary keys.

Step 4 — Set Up Supabase Project

1. Go to Supabase and create a new project.
2. Use the following SQL to create the bookmarks table:

CREATE TABLE bookmarks (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES auth.users ON DELETE CASCADE,
  url TEXT NOT NULL,
  summary TEXT,
  tags TEXT[]
);

Define a table structure for storing bookmarks with user references.

Expected result: A new table named bookmarks will appear in your Supabase dashboard.

Step 5 — Implement Supabase Client

Create a file named supabaseClient.js in the lib directory:

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

export default supabase;

Initialize the Supabase client using the environment variables. This client will perform database operations in the app.

Expected result: The supabaseClient.js file will create a configured Supabase client.

Step 6 — Create Authentication Middleware

Create a file named middleware.js in the root directory:

import { withAuth } from '@supabase/ssr';

export default withAuth({
  authRequired: true,
});

Set up authentication middleware to protect routes and ensure users are authenticated before accessing certain parts of the app.

Expected result: The middleware.js file will enforce authentication across the app.

Step 7 — Build the Bookmark Dashboard

Create a new page app/dashboard/page.js:

import supabase from '../../lib/supabaseClient';

export default async function Dashboard() {
  const { data: bookmarks } = await supabase.from('bookmarks').select('*');
  
  return (
    <div>
      <h1>Your Bookmarks</h1>
      <ul>
        {bookmarks.map((bookmark) => (
          <li key={bookmark.id}>{bookmark.url}</li>
        ))}
      </ul>
    </div>
  );
}

Create a dashboard page that fetches and displays the user's bookmarks from the Supabase database.

Expected result: The dashboard will list all bookmarks saved by the user.

Step 8 — Implement Bookmark Creation

Create a new API route app/api/bookmarks/route.js:

import supabase from '../../../lib/supabaseClient';

export async function POST(req) {
  const { url } = await req.json();
  const { data, error } = await supabase
    .from('bookmarks')
    .insert([{ url }]);
  
  return new Response(JSON.stringify(data), { status: 200 });
}

Set up an API route to handle the addition of new bookmarks. This allows users to save bookmarks from the dashboard.

Expected result: The API will accept POST requests to add new bookmarks to the database.

Step 9 — Integrate Claude for Summarization

Create a new file app/api/summarize/route.js:

import { Claude } from 'anthropic-sdk';

const client = new Claude({ apiKey: process.env.CLAUDE_API_KEY });

export async function POST(req) {
  const { url } = await req.json();
  const summary = await client.summarize(url);
  
  return new Response(JSON.stringify({ summary }), { status: 200 });
}

Call the Claude API to generate summaries for bookmarks when they are added.

Expected result: The API will return a summary for the provided URL.

Step 10 — Deploy to Vercel

vercel login
vercel --prod

Deploy the application to Vercel. Ensure the environment variables are configured in the Vercel dashboard.

Expected result: The application will be live on a Vercel domain, accessible via the provided URL.

What You've Built

You have successfully created a full-stack bookmark manager using Next.js, Supabase, and Claude. Users can authenticate, save URLs, automatically generate summaries, and access a searchable dashboard, all deployed seamlessly to Vercel.

Next Steps

• Implement tag filtering for bookmarks.
• Add user profile management features.
• Enhance the UI with Tailwind CSS for better styling.
• Explore adding additional features like bookmark categorization.