CleanStart Community API + Admin Tool

Lightweight Vercel project that powers two widgets on https://www.cleanstart.com/community:

1. Community Images — proxies the CleanStart images API and returns the 4 latest community images.
2. Community Discussions — a Webflow CMS-backed list, plus a simple admin page so team members can publish a LinkedIn discussion to the page in under a minute (no Designer access required).

Production domain: https://community-api.cleanstart.com

File layout

community-images/
├── api/
│   ├── community-images.js       # GET — 4 latest community images (public)
│   ├── community-discussions.js  # GET — 2 latest discussions from Webflow (public)
│   └── create-discussion.js      # POST — admin creates a CMS item (auth required)
├── public/
│   └── admin/
│       └── index.html            # Admin form at /admin
├── webflow-embed-discussions.html  # Paste into the Webflow page embed
├── package.json
├── vercel.json
└── README.md

What you need to provide

#	Value	Where to get it
1	Webflow API token	Webflow dashboard → Workspace settings → Integrations / API Access → Generate token. Scope required: CMS: read and write.
2	Community Discussions Collection ID	Create the CMS collection first (see below). Then curl -H "Authorization: Bearer <TOKEN>" https://api.webflow.com/v2/sites/<SITE_ID>/collections — copy the id of the new collection.
3	Admin access key	Generate with openssl rand -hex 24. Used as ?key=... in the admin URL.

One-time Webflow CMS setup

In Webflow Designer → CMS panel → Create New Collection.

• Name: Community Discussions
• Slug: community-discussions (auto)
• Fields:

Display name	Field type	Required	Slug (auto)
Name	Plain text	✓ (default)	name
Author Name	Plain text	✓	author-name
Author Initials	Plain text		author-initials
Author Pic	Image		author-pic
Excerpt	Plain text (multi-line)	✓	excerpt
LinkedIn URL	Link	✓	linkedin-url
Published Date	Date/Time	✓	published-date

Important: the slugs must match exactly. If Webflow generates different slugs, edit them inline or update the field keys in api/create-discussion.js and api/community-discussions.js.

Environment variables (Vercel → Settings → Environment Variables)

Name	Value
WEBFLOW_API_TOKEN	Webflow API token
WEBFLOW_COLLECTION_ID	Community Discussions collection ID
ADMIN_ACCESS_KEY	Random hex string (e.g. openssl rand -hex 24)

Apply to Production + Preview + Development → Save → Redeploy.

Legacy note: if you previously set ADMIN_PASSWORD, it still works as a fallback, but prefer ADMIN_ACCESS_KEY.

Smoke-test

# Public (no auth):
curl https://community-api.cleanstart.com/api/community-images
curl https://community-api.cleanstart.com/api/community-discussions

# Admin create (auth required — key via query param OR Bearer header):
curl -X POST "https://community-api.cleanstart.com/api/create-discussion?key=$ADMIN_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "authorName":"Test User",
    "excerpt":"Testing the new admin flow.",
    "linkedinUrl":"https://www.linkedin.com/posts/test-user-abc123/"
  }'

Expected: { "ok": true, "item": { … } }. Then check Webflow CMS — the new item should be live.

Admin access (magic link)

• URL: https://community-api.cleanstart.com/admin?key=YOUR_ADMIN_ACCESS_KEY
• Bookmark this URL once — no login prompt after that.
• If you open /admin without ?key=, you'll be prompted once and the key is written into the URL (so the bookmark remembers it).
• To rotate: change ADMIN_ACCESS_KEY in Vercel → redeploy. Old links stop working immediately.

Auto-fill behavior in the form

• Paste the LinkedIn URL first → the form auto-derives Author Name and Initials from the profile slug (e.g. /in/john-smith-abc123/ → "John Smith", "JS"). Both fields stay editable.
• Initials auto-update as you type the name, until you manually edit them (then they stop auto-updating).
• Excerpt has a 280-char recommended counter (400 hard max) and a "Paste & clean from clipboard" button that strips emoji, hashtags, line breaks, and smart quotes, then trims to 280 chars.

Webflow embed

On https://www.cleanstart.com/community, drop an Embed block in place of the existing "Community Discussions" cards and paste the contents of webflow-embed-discussions.html. It already points at https://community-api.cleanstart.com.

Local development

cp .env.example .env.local    # fill in the three values
npm i -g vercel                # once
vercel dev                     # serves on http://localhost:3000

Open http://localhost:3000/admin?key=<ADMIN_ACCESS_KEY> to test locally.

Summary of human steps

1. Create the Webflow CMS collection (one-time, ~3 min).
2. Generate a Webflow API token and fetch the Collection ID.
3. Generate ADMIN_ACCESS_KEY with openssl rand -hex 24.
4. Add the three env vars in Vercel and redeploy.
5. Bookmark https://community-api.cleanstart.com/admin?key=<KEY>.
6. Paste webflow-embed-discussions.html on the Webflow community page and publish.