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:

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:

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

3. Start the dev server:

   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

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

Step 3: Start Development

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: