mcld-project

Stack

• Framework: Next.js 16 (App Router, Turbopack)
• Auth: Supabase Auth (email/password, SSR via @supabase/ssr)
• Database: PostgreSQL via Supabase + Drizzle ORM
• UI: shadcn/ui (Radix) + Tailwind
• Hosting: Vercel

Setup

1. Install dependencies

pnpm install

2. Configure environment

cp .env.example .env.local
sudo nano .env

Fill in your Supabase credentials from supabase.com/dashboard > Project Settings > API (or Dashboard > Framework > Next.js > Environment Variables):

only on .env.local:

• NEXT_PUBLIC_SUPABASE_URL — Project URL
• NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY — Publishable (anon) key

only on .env:

• DATABASE_URL — Connection string (Dashboard > Direct (connextion string) > Copy connection string (for the password go to Database > Settings > Database password > Reset password))

3. Configure Supabase Auth (if you dont use port 3000)

In your Supabase dashboard under Authentication > URL Configuration:

• Site URL: http://localhost:PORT
• Redirect URLs: add http://localhost:PORT/auth/callback

Make sure Email provider is enabled under Authentication > Sign In/Providers.

4. Set up the database

pnpm db:push # push schema to Supabase
pnpm db:generate # generate migration files
pnpm db:migrate # run migrations

5. Run

pnpm dev

Open http://localhost:3000. You'll be redirected to /login if not authenticated.

Adding shadcn/ui components

npx shadcn@latest add <component>

Examples:

npx shadcn@latest add button
npx shadcn@latest add card input label
npx shadcn@latest add dialog dropdown-menu

Components are installed to components/ui/. Browse available components at ui.shadcn.com.

Project structure

app/
layout.tsx # Root layout (Helvetica font)
page.tsx # Home (protected, shows user + sign out)
login/
page.tsx # Login / signup form
actions.ts # Server actions (login, signup, signout)
auth/
callback/
route.ts # Email confirmation callback
components/ui/ # shadcn/ui components
utils/supabase/
client.ts # Browser Supabase client
server.ts # Server Supabase client
middleware.ts # Session refresh + auth redirect logic
proxy.ts # Next.js 16 proxy (replaces middleware.ts)
drizzle/ # Drizzle schema + migrations
drizzle.config.ts # Drizzle config