---
title: "Deploy Your Starter"
description: "Deploy the pre-configured starter repo to Vercel with one click, clone it locally, and explore the Next.js 16 project structure with Tailwind CSS and shadcn/ui."
canonical_url: "https://vercel.com/academy/subscription-store/deploy-your-starter"
md_url: "https://vercel.com/academy/subscription-store/deploy-your-starter.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T06:12:58.348Z"
content_type: "lesson"
course: "subscription-store"
course_title: "Launch a Subscription Store with Vercel and Stripe"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Deploy Your Starter

# Deploy Your Starter

Starting from scratch with auth, payments, and styling takes days. The starter repo gives you Next.js 16, React 19, Tailwind CSS 4, and shadcn/ui pre-configured so you can focus on the interesting parts.

## Outcome

Deploy the starter repo to Vercel and run it locally with a working home page.

## Deploy to Vercel

Click the button below to fork the starter and deploy it to Vercel:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/academy-subscription-starter\&project-name=subscription-storefront\&repository-name=subscription-storefront)

This will:

1. **Fork the repository** to your GitHub account
2. **Create a Vercel project** linked to your fork
3. **Deploy to production** with a working landing page

## Hands-on Exercise 1.1

Deploy the starter repo and verify it runs locally:

**Requirements:**

1. Deploy using the "Deploy with Vercel" button
2. Name your repository (e.g., `subscription-storefront`)
3. Clone the repo to your machine
4. Install dependencies and start the dev server
5. Verify the home page loads

**Implementation hints:**

- The deploy button creates a new repo in your GitHub account
- Skip environment variables during deploy - you'll add them in the next lesson
- Use `pnpm` as your package manager for consistency with the course

## Try It

1. **Deploy to Vercel:**
   - Click the Deploy button above
   - Connect your GitHub account if prompted
   - Name your repository and click Deploy
   - Wait for the build to complete and visit your live URL

2. **Clone locally:**
   ```bash
   git clone https://github.com/YOUR_USERNAME/subscription-storefront.git
   cd subscription-storefront
   pnpm install
   ```

3. **Start the dev server:**
   ```bash
   pnpm dev
   ```

4. **Verify output:**
   ```
   ▲ Next.js 16.0.10
   - Local: http://localhost:3000

   ✓ Starting...
   ✓ Ready in 1.2s
   ```

5. **Open <http://localhost:3000>** - you should see the Forager's Guild home page

## Commit

No commit needed - this is the initial clone.

## Done-When

- [ ] Repository created in your GitHub account
- [ ] Project deployed to Vercel with working landing page
- [ ] Repo cloned locally
- [ ] `pnpm install` completed without errors
- [ ] Dev server running at localhost:3000
- [ ] Home page displays Forager's Guild branding

## Solution

**Step 1: Deploy with Vercel**

Click the "Deploy with Vercel" button above. This opens Vercel's deploy flow:

1. Connect your GitHub account
2. Name your repository (e.g., `subscription-storefront`)
3. Skip the environment variables step for now
4. Click **Deploy**

The deploy will succeed and show the Forager's Guild landing page. Auth won't work yet—you'll configure that in the next lessons.

**Step 2: Clone and Install**

```bash
git clone https://github.com/YOUR_USERNAME/subscription-storefront.git
cd subscription-storefront
pnpm install
```

**Step 3: Start Development**

```bash
pnpm dev
```

Visit <http://localhost:3000>. You'll see the starter home page with sign-in and sign-up buttons. Clicking them navigates to the auth pages, but authentication isn't wired up yet.

## Project Structure

Here's what the starter includes:

```
subscription-storefront/
├── app/
│   ├── (auth)/           # Auth pages (sign-in, sign-up)
│   ├── protected/        # Authenticated routes (account, pricing, etc.)
│   ├── actions.ts        # Server Actions (stubs to implement)
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── components/
│   ├── ui/               # shadcn/ui components (button, input, etc.)
│   └── ...               # App components (header, sidebar, logos)
├── utils/
│   └── styles.ts         # Tailwind cn() helper
├── proxy.ts              # Next.js 16 proxy (to implement)
├── package.json
└── .env.example
```

Key files you'll build in this section:

- `utils/supabase/client.ts` - Browser-side Supabase client (you create this)
- `utils/supabase/server.ts` - Server-side Supabase client (you create this)
- `proxy.ts` - Route protection (you implement this)
- `app/actions.ts` - Auth Server Actions (you implement this)

## Tech Stack Versions

The starter uses the latest versions:

| Package               | Version |
| --------------------- | ------- |
| Next.js               | 16.x    |
| React                 | 19.x    |
| Tailwind CSS          | 4.x     |
| @supabase/ssr         | 0.8.x   |
| @supabase/supabase-js | 2.x     |
| stripe                | 17.x    |


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)