Pre-Amble

Things we will be using: Next.js, Vercel, Supabase, this component library, and this payment page.

The other things I used: Cursor, Github, Tldraw,

STEP-BY-STEP PLAN

1. Set Up Dev Environment

This is the docs:https://nextjs.org/docs/app/getting-started/installation

Install Next.js

npx create-next-app

What is your project named? my-app Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? Yes Would you like your code inside a src/ directory? No Would you like to use App Router? (recommended) Yes Would you like to use Turbopack for next dev? No Would you like to customize the import alias (@/* by default)? No

Install Supabase

npm install @supabase/supabase-js

Create a configuration file lib/supabaseClient.js

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Set up Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Create a supabase project