Cabi & Friends

Directory of the people, producers and places Cabi works with across Japan. Intended home: friends.cabifoods.com

How it fits together

• GitHub stores this code. Every push to main redeploys on Vercel; pull requests get preview URLs.
• Vercel hosts the site (app.html served through api/page.js with per-page SEO, admin.html) and the serverless API in /api. No build step.
• Airtable is the source of truth for producer information. It's copied into Supabase every hour.
• Dropbox holds the producer photo folders. An hourly Supabase Edge Function copies them into Supabase Storage and writes their public URLs back to Airtable ("Image URLs").
• Supabase is the website's database (a copy of Airtable + prefectures, submissions, admins), photo storage, staff sign-in and the hourly scheduler (Supabase Cron).

Dropbox app folder ──(:05 hourly, Edge Function dropbox-sync)──▶ Storage `producer_images` ──URLs──▶ Airtable "Image URLs"
Airtable ──(every 15 min, Edge Function airtable-sync)──▶ Supabase `friends` + `friend_images`
visitor ──▶ /api/page (app.html + SEO) ──▶ /api/data ──(anon key, RLS: published only)──▶ Supabase
visitor ──▶ Submit form ──▶ /api/submit ──(service key)──▶ submissions table
                     └──── photos PUT straight to the private `submissions` bucket (signed URLs)
staff  ──▶ /admin (magic-link sign-in) ──▶ /api/admin ──▶ approve → producer row + photos copied to public `friends` bucket

The page loads live data from /api/data. If that fails it falls back to the bundled data.js, so the site never shows empty.

Path	What it is
app.html	The whole public site (Directory, Map, Profile, Prefecture, About, Get in touch). Real URLs: /friend/:slug, /pref/:slug, ?lang=ja for Japanese
api/page.js, lib/seo.js	Per-page titles, descriptions, hreflang, Open Graph, JSON-LD, Google Analytics (GA_MEASUREMENT_ID) and server-rendered text; /sitemap.xml from api/sitemap.js
admin.html	Staff review screen at /admin
api/data.js	Published producers + prefectures as window.FRIENDS / window.PREFS (60 s CDN cache)
api/submit.js	Submit a Producer: validation, rate limit, signed photo uploads
api/admin.js	Approve / decline submissions, edit and publish producers
api/config.js	Public Supabase URL + anon key for the admin sign-in
supabase/functions/dropbox-sync/	Edge Function: Dropbox app folder → Storage producer_images → Airtable Image URLs
supabase/functions/airtable-sync/	Edge Function: Airtable → site database (every 15 min, and from /admin)
supabase/functions/dropbox-connect/	Edge Function: one-click Dropbox authorisation (token goes straight to Vault)
supabase/dropbox.sql	Bucket, sync bookkeeping tables, both hourly Cron jobs
scripts/dropbox-connect-link.sh	Prints a 30-minute Dropbox connect link
scripts/set-secret.sh	Sets one Edge Function secret with hidden input
supabase/schema.sql	Tables, constraints, row-level security, storage buckets (re-runnable)
supabase/seed.sql	47 prefectures + the current 27 producers and their bundled photos

Setup (one time)

1. GitHub

Create an empty repo (e.g. cabifoods/cabifriends), then from this folder:

git remote add origin [email protected]:YOUR-ORG/cabifriends.git && git push -u origin main

2. Supabase

1. Create a project (region: Tokyo ap-northeast-1).
2. SQL editor → run supabase/schema.sql, then supabase/seed.sql.
3. Authentication → Sign In / Providers → turn off "Allow new users to sign up" (staff are invited, nobody signs up).
4. Authentication → URL Configuration → Site URL https://friends.cabifoods.com, and add redirect URLs https://friends.cabifoods.com/admin, https://*.vercel.app/admin and http://localhost:3000/admin.
5. For each staff member: Authentication → Users → Invite user, then in the SQL editor insert into admins (email) values ('[email protected]');
6. Project Settings → API: copy the URL, the anon public key and the service_role secret key.

3. Vercel

1. Add New → Project → import the GitHub repo. Framework preset: Other. No build command, no output directory.
2. Settings → Environment Variables: add SUPABASE_URL, SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY (and optionally SUBMIT_SECRET) for Production and Preview. See .env.example.
3. Redeploy. Check that /api/data starts with window.FRIENDS=[{ (not /* api unavailable */).
4. Domains → add friends.cabifoods.com, then add the CNAME it shows wherever cabifoods.com DNS is managed.

Run locally

npm i -g vercel && npm install && vercel link && vercel env pull .env.local && vercel dev

Or serve the folder with any static server: everything works from data.js except submitting and /admin.

Approval workflow

1. Someone fills in Submit a Producer. The submission is saved as new; photos go to the private bucket.
2. Staff open /admin, sign in with the emailed link, and pick a submission. The listing form is pre-filled from the submission: check names, prefecture, description (EN/JA), tags, and tick which photos to publish.
3. Approve & publish creates the producer and copies the ticked photos to the public bucket. It appears on the Directory and Map within a minute. Approve as draft saves it hidden; publish it later from the Producers tab. Decline keeps the submission under Rejected (it can be moved back).
4. The Producers tab lists everyone (published or not) for edits and publish / unpublish.

Producers without coordinates are placed at the centre of their prefecture on the map. Photo uploads and deletions for existing producers are done in Supabase → Storage (friends bucket) + the friend_images table.

This is the beginning of the README. Read the rest at the original. Read the full README ↗