Launch a Subscription Store

★ 9

by vercel-labs · part of vercel-labs/academy-skills

🧩 One of 7 skills in the vercel-labs/academy-skills package — works on its own, and pairs well with its siblings.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

Launch a Subscription Store

Companion skill for the Launch a Subscription Store course. Build a production-ready subscription storefront with Next.js 16, Supabase Auth, and Stripe.

Commands

`/subscription-store learn`

Start the guided learning loop. 17 lessons covering authentication, payments, and access control.

`/subscription-store new`

Scaffold a new subscription store project:

Deploy starter repo to Vercel (one-click)
Clone locally and install dependencies
Create Supabase project and configure env vars
Set up Stripe account and API keys
Verify dev server runs with working home page

`/subscription-store submit`

Evaluate your current implementation against the active lesson's outcomes.

Content source

https://vercel.com/academy/subscription-store.md           → course overview
https://vercel.com/academy/subscription-store/<lesson>.md   → lesson content

Core concepts

Authentication (Supabase Auth)

Browser and server Supabase clients via @supabase/ssr
Sign-up/sign-in with Server Actions and error handling
Session management via proxy.ts pattern (replaces legacy middleware)

Payments (Stripe)

Stripe SDK setup for server and client
Checkout flow via Server Action → Stripe hosted checkout
Subscription management via Stripe Customer Portal

Access control

Server-side subscription checks in Server Components
Client-side UI states responding to subscription status
Protected API routes with authorization checks

Progress detection

Signal	Lesson area
Starter deployed, `package.json` exists	Setup (1)
`.env.local` with `NEXT_PUBLIC_SUPABASE_URL`	Supabase config (2-3)
`app/(auth)/sign-up/page.tsx` exists	Auth pages (4)
`proxy.ts` with session handling	Route protection (5)
`.env.local` with `STRIPE_SECRET_KEY`	Stripe config (6)
Pricing page fetching from Supabase	Pricing (7)
Checkout Server Action implemented	Checkout flow (8)
Subscription management page rendering	Management (9-10)
Access control checks in Server Components	Access control (11-14)
Error boundaries and loading states	Polish (15)
Header with auth-aware navigation	Navigation (16)
Deployed to production	Ship (17)

Teaching guidelines

This course has 17 lessons — pace accordingly, don't rush
Each lesson has a clear "hands-on exercise" — make sure they do it
Supabase and Stripe both require external dashboard steps — guide precisely
Check .env.local frequently — missing keys are the #1 blocker
The proxy.ts pattern is new (Next.js 16) — expect questions about it