Quickstart

Get started using a GitHub fork.

Setting Up

Grab Guestbook Repository

Fork https://github.com/beck-chan/y2k-guestbook/ on GitHub, then clone your copy into your local environment:

git clone https://github.com/YOUR_USER/y2k-guestbook.git
cd y2k-guestbook
# Install dependencies
npm install

With the GitHub CLI installed and signed in (gh auth login):

# Fork to your account and clone in one step
gh repo fork beck-chan/y2k-guestbook --clone
cd y2k-guestbook
# Install dependencies
npm install

Set Up Environment Variables

Copy the .env.example file to .env.local:
```
cp .env.example .env.local
```

Fill in values from your Supabase project and site origin:

# Supabase project URL
NEXT_PUBLIC_SUPABASE_URL=https://<your-database-url>.supabase.co

# Supabase publishable key (browser-safe, RLS still applies)
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_<your-publishable-key>

# Secret key. Local ONLY — for `npx y2k-guestbook allow-admin`
SUPABASE_SECRET_KEY=sb_secret_<your-secret-key>

# App origin for OAuth return. Used to build redirectTo on the server.
SITE_URL=http://localhost:3000

# Supabase pooler URI — for rate limiting
DATABASE_URL=postgresql://postgres.<your-database-url>:[YOUR-PASSWORD]@<your-database-region>.pooler.supabase.com:<port>/postgres

# Optional admin URL prefix (default /admin). No trailing slash.
# NEXT_PUBLIC_GUESTBOOK_ADMIN_PATH=/admin

Installing

Enable Authentication Hook

Copy the contents of schema.sql to your clipboard.
Within Supabase, select SQL Editor from the left sidebar, then paste in the contents of schema.sql.
Click Run to execute the schema.
If you receive a Potential issue detected popup, click Run query to execute the schema.

Within Supabase, select Authentication from the left sidebar, then click Auth Hooks.
Click Add hook, then select Before User Created hook:
- For Hook type select Postgres.
- For Postgres Schema, select schema.public.
For Postgres funtion, select function: hook_before_user_created.
Click Create hook.

Within Supabase, select Authentication from the left sidebar, then click URL Configuration.
Confirm that http://localhost:3000 is already entered under Site URL for local previews and builds.
(Optional, for deployment builds) To enter a redirect URL for deployment:
1. Under Redirect URLs, click Add URL.
2. Paste in your deployment callback URL. This is your SITE_URL with auth/callback appended to the end.
  
  For example: https://<your-project-url>.vercel.app/auth/callback.
3. Click Save URLs.

Allow Your Admin User

From your Next.js app root, allow-list a Google account as your admin user:

npx y2k-guestbook allow-admin you@gmail.com

You'll need to authorize Google to connect on your first sign in.

Run Development Server

To preview your application locally, run:

# Serves by default at `http://localhost:3000` 
npm run dev

Your interface should initially mimic the demo guestbook, but with no hit counter:

y2k demobook

Serve Your Guestbook

To build the application locally to upload manually to your hosting provider:

# Linter check for errors
npm run lint
# Compile
npm run build
# Serve build 
npm run start

The easiest way to do this is just to connect your guestbook GitHub repository to a Vercel project:

From your Vercel dashboard:

If you already have projects with Vercel, click Add New and select Project.
If you've just freshly signed up for Vercel, select GitHub under Import Git Repository on your main page:
- Follow the prompts to authorize the connection to your GitHub account.
- You can allow Vercel to access all your repositories, or just the one you want to deploy.
Click Import for your guestbook repository, then set the Project Name.

Your project name will become the URL slug for your application if it's unique and available.

Click Environment Variables to enter the following variables:

# Supabase project URL
NEXT_PUBLIC_SUPABASE_URL=https://<your-database-url>.supabase.co

# Supabase publishable key (browser-safe, RLS still applies)
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_<your-publishable-key>

# App origin for OAuth return. Used to build redirectTo on the server.
# For example, Vercel:
SITE_URL=http://your-project-url.vercel.app

# Supabase pooler URI — for rate limiting
# MAKE SURE TO TOGGLE THE LOCK ICON TO THE RIGHT OF `Value` FOR THIS KEY TO MAKE IT INVISIBLE!!!
DATABASE_URL=postgresql://postgres.<your-database-url>:[YOUR-PASSWORD]@<your-database-region>.pooler.supabase.com:<port>/postgres

What's Next

Manage admin authentication and add analytics to display a hit counter:

Manage Admin Auth

Enable Notifications