mfmfintro-backend

Backend APIs for the project (Vercel + Hono + Supabase).

Local Development

1) Install

npm install

2) Environment Variables

Create .env.local (this file is gitignored):

SUPABASE_URL=your_supabase_url_here
SUPABASE_ANON_KEY=your_supabase_anon_key_here

3) Supabase Storage (member avatars)

We upload manually via the dashboard.

1. Supabase Dashboard → Storage → New Bucket
2. Turn Public bucket ON
3. Drag & drop images into the bucket
4. Use Get URL and save it as members.avatar_url

4) Supabase Tables

Run the following in Supabase SQL Editor.

counters

CREATE TABLE IF NOT EXISTS public.counters (
  id INT PRIMARY KEY DEFAULT 1,
  count INT NOT NULL DEFAULT 0,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

INSERT INTO public.counters (id, count)
VALUES (1, 0)
ON CONFLICT (id) DO NOTHING;

ALTER TABLE public.counters ENABLE ROW LEVEL SECURITY;

CREATE POLICY "allow_read_counters" ON public.counters
  FOR SELECT USING (true);

CREATE POLICY "allow_update_counters" ON public.counters
  FOR UPDATE USING (true);

members

CREATE TABLE IF NOT EXISTS public.members (
  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  name TEXT NOT NULL,
  role TEXT NOT NULL,
  avatar_url TEXT,
  tw_url TEXT
);

ALTER TABLE public.members ENABLE ROW LEVEL SECURITY;

CREATE POLICY "allow_read_members" ON public.members
  FOR SELECT USING (true);

5) Run

npm run dev

Local dev server: http://localhost:3000

API

POST /api/counter

Increments the counter by 1 and returns the updated value.

Response:

{ "count": 123 }

GET /api/members

Returns members sorted by id ascending.

Response:

[
  {
    "id": 1,
    "name": "Example",
    "role": "Project Manager / Frontend Engineer",
    "avatar_url": "https://...",
    "tw_url": "https://x.com/..."
  }
]

Quick Test (PowerShell)

PowerShell curl is an alias, so use curl.exe.

curl.exe -X POST http://localhost:3000/api/counter
curl.exe -X GET http://localhost:3000/api/members

Format

npm run format

Deploy (Vercel)

npm run deploy

Notes

• This repo is Vercel-ready via api/[[...route]].ts.
• Local development uses a Node server (tsx watch src/server.ts) to avoid vercel dev recursive invocation.