ChatYard

A minimal Next.js app for sharing public AI conversation links with the world. The UI follows a warm Anthropic-inspired palette: cream fields, charcoal type, and coral accents.

Stack

• Next.js (App Router) + TypeScript + Tailwind CSS v4
• Supabase (Postgres + Row Level Security) via the Supabase CLI

Deploy (Vercel)

Repository: https://github.com/Chessing234/chatyard

Sync env vars from Supabase (CLI) → Vercel, then deploy (requires supabase login, vercel login, and linked project under supabase/.temp/project-ref; falls back to .env.local if the Management API is unreachable):

npm run vercel:env      # sets NEXT_PUBLIC_SUPABASE_* on the Vercel project
npm run deploy:vercel   # production deploy

Manual path:

1. vercel.com → Add New… → Project → import Chessing234/chatyard.
2. Add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY (from Supabase Settings → API, or from .env.local after npm run stack:remote).
3. Deploy.

Production URL (example team project; your dashboard may show the same or an updated alias):

• https://chatyard-takshkothari09-5470s-projects.vercel.app

NEXT_PUBLIC_* values are exposed to the browser by design (Supabase anon / publishable key is safe for that use).

Where to get NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY

You need a Supabase project (free tier is fine). Same database your app already uses locally, or a new one.

Option A — Supabase Dashboard (simplest)

1. Go to supabase.com/dashboard and open your project (or New project).
2. Left sidebar: Project Settings (gear) → API.
3. Copy:
   • Project URL → use as NEXT_PUBLIC_SUPABASE_URL (looks like https://xxxx.supabase.co).
   • Under Project API keys, copy the anon public key (or a publishable key if your project uses the newer key type). Never paste the service_role key into Vercel for this app.

Option B — You already ran npm run stack:remote on your Mac

That command creates ChatYard/.env.local with both variables. Open that file and copy the two NEXT_PUBLIC_… lines into Vercel’s environment variable form (same names, same values).

Option C — Supabase CLI

supabase login
supabase projects list                    # find your project REFERENCE ID
supabase projects api-keys --project-ref YOUR_REF -o pretty

Use https://YOUR_REF.supabase.co as the URL and the anon / publishable client key from the output.

Database: If this is a brand-new empty project, apply the schema once from your machine (in the ChatYard repo): supabase link --project-ref YOUR_REF then supabase db push.

Database schema

Table public.chats:

Column	Type	Notes
id	uuid	Primary key, default gen_random_uuid()
title	text	Max 50 characters (enforced in DB + app)
chat_url	text	Public http(s) link
tags	text[]	Subset of 20 preset tags
anonymous	boolean	Always true for new submissions (legacy rows may differ)
username	text	Unused for new submissions (null)
submitted_at	timestamptz	Default now()

Migrations live in supabase/migrations/. RLS allows public select and insert (no auth required to read or submit).

Local Supabase (Docker + CLI)

One command (starts Docker-backed Supabase, applies migrations, writes .env.local, then you can run Next):

npm install
npm run stack:up
npm run dev

Or stack + Next in one go:

npm run dev:local

What npm run stack:up runs (scripts/supabase-local-up.sh):

1. Checks docker info
2. supabase start
3. supabase db reset (migrations + supabase/seed.sql)
4. Parses supabase status -o env and writes NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY to .env.local

Docker / Supabase errors

If you see input/output error or meta.db / blob ... expected from Docker while pulling images, Docker Desktop’s internal store is unhealthy. Try Quit Docker Desktop fully, reopen it, or use Troubleshoot → Reset to factory defaults (wipes local Docker volumes). Ensure you have enough free disk space, then run npm run stack:up again.

Manual steps (equivalent to stack:up)

supabase start
supabase db reset

Then create .env.local using values from supabase status (API URL + anon key), or rely on npm run stack:up to generate it.

db reset applies migrations and runs supabase/seed.sql (comments only by default).

Use the anon key in the browser app, not the service role key.

After stack:up (or manual Supabase + .env.local), run npm run dev and open http://localhost:3000.

Hosted Supabase (Supabase CLI only — no dashboard copy/paste)

Use this when local Docker is broken or unavailable. Everything below uses the Supabase CLI.

1. Log in (one-time per machine), or set SUPABASE_ACCESS_TOKEN for CI:

   supabase login

2. Pick or create a cloud project (CLI):

   npm run stack:orgs          # supabase orgs list
   npm run stack:projects      # supabase projects list

   Create a new project (replace org id, password, region):

   supabase projects create chyard --org-id <ORG_ID> --db-password '<STRONG_PASSWORD>' --region us-east-1

3. Link, push migrations, write .env.local in one npm script:

   export SUPABASE_PROJECT_REF="your-project-ref"   # optional if you already ran `supabase link` from this repo (ref is in `supabase/.temp/project-ref`)
   # If `supabase link` prompts for a DB password:
   # export SUPABASE_DB_PASSWORD='...'
   
   npm run stack:remote

   This runs: supabase link → supabase db push → supabase projects api-keys (parsed into NEXT_PUBLIC_SUPABASE_URL + NEXT_PUBLIC_SUPABASE_ANON_KEY).

4. Run the app

   npm run dev

   Or: npm run dev:remote (runs stack:remote then next dev).

For production on Vercel, use npm run vercel:env then npm run deploy:vercel, or copy the two NEXT_PUBLIC_* values from .env.local after stack:remote.

Features

• Submit (/submit): paste a public chat URL, title (≤ 50 chars), tags — always anonymous.
• Feed (/): card layout; filters for tags (OR match) and newest/oldest sort.
• Chat (/chat/[id]): title, tags, anonymous submitter, link to open the shared chat in a new tab.

Scripts

Command	Description
npm run stack:up	Docker + supabase start, db reset, .env.local from supabase status
npm run stack:remote	supabase link + db push + projects api-keys → .env.local
npm run vercel:env	Supabase CLI (or .env.local) → Vercel production env vars
npm run deploy:vercel	vercel deploy --prod --yes
npm run stack:stop	supabase stop
npm run stack:status	supabase status
npm run stack:projects	supabase projects list
npm run stack:orgs	supabase orgs list
npm run dev:local	stack:up then next dev
npm run dev:remote	stack:remote then next dev
npm run dev	Next dev server only
npm run build	Production build
npm run start	Start production server
npm run lint	ESLint

License

MIT