Deploy Saturday

Clicking Deploy is the starting line for this course. Every setting we'll touch only matters because something is running. So before we configure the firewall, audit the env vars, or argue with Bot Protection about who counts as a real visitor, we need something live.

That's Saturday. A small public site for a fictional indie sneaker label. Five styles, a drop schedule, a stock-check API, a webhook that flips a drop from coming-soon to live. The features were chosen on purpose. Each one gives us something to configure in a later lesson.

Let's get it deployed.

Outcome

Saturday is running at a Vercel-hosted URL on your own account, with its DROP_WEBHOOK_SECRET environment variable set.

Hands-on exercise 1.1

Get Saturday live on your Vercel account. The starter has everything you need: five product pages, a drop schedule, two API routes, real product photos. You don't have to write any code yet.

Requirements:

1. Deploy Saturday with the Deploy with Vercel button above
2. Set the DROP_WEBHOOK_SECRET environment variable when the deploy flow prompts for it, before the first deploy
3. Visit the live URL and confirm the homepage loads with the next drop and the product grid

Implementation hints:

• The button forks vercel-labs/academy-optimize-vercel-account into your own GitHub and connects it to a new Vercel project. Nothing to clone by hand to get it live.
• For DROP_WEBHOOK_SECRET, generate something long and random. openssl rand -hex 32 works. Don't reuse the example value from .env.example.
• Prefer to wire it up yourself? Clone the starter, push it to a new repo on your own account, then import it at vercel.com/new. The button just collapses those steps into one.
• Use a brand-new Vercel team if you want a clean slate for the course. Or use your existing one and just create a new project. Either is fine.
• Don't worry about marking the env var as sensitive yet. We do that in Lesson 2.1, on purpose.

Try It

After the deploy finishes, open the URL Vercel hands you. You should see something like this:

SATURDAY
INDEPENDENT FOOTWEAR / EST. 2026

Shoes for the part of the week that isn't a meeting.

Five styles. One drop at a time. Made in small batches and shipped from a single warehouse in Portland.

NEXT DROP
Off-Hours / Twilight
Saturday, June 7 / $175
[ VIEW DETAILS ]

Click into a product page. You should see the hero image, size grid, and a Check Stock button. The button doesn't do anything visible yet, but the endpoint behind it is wired up. We'll see it work in Lesson 3.2.

Now visit /drops. You should see the full schedule of five upcoming drops, sorted by date. This page is the one we'll move from interval revalidation to on-demand revalidation in Lesson 3.3.

If you see all three of those things, the deploy worked.

Done-When

• Saturday is deployed to a Vercel-hosted URL on your team
• DROP_WEBHOOK_SECRET is set as an environment variable in Vercel
• The homepage loads with the next drop teaser and product grid
• /drops and at least one /products/[slug] page render correctly
• You can find this new project in your Vercel dashboard

Troubleshooting

The deploy failed with a missing dependency error.

The starter declares pnpm in its lockfile. Vercel auto-detects pnpm in most cases, but if your team is set to npm by default, set the install command to pnpm install and the build command to pnpm build in Project Settings > Build and Deployment.

The product images don't load.

Check that the public/products/ directory made it into your new repo. The product data references /products/foundry.jpg, /products/crosswalk.jpg, etc. If those files are missing from public/, Next.js renders broken image placeholders. Re-copy the images and push again.

Solution

The starter is the solution. There's no code to write in this lesson; the only thing you're producing is a deployed URL.

The button deployed the main branch, which is the starter. The same repo has a complete branch with every code change this course makes already applied. You don't need it to follow along, but if a later lesson's code misbehaves, compare your file against the same file on complete. Running git diff main complete shows the full set of changes at once.

Once it's live, take a screenshot of the Vercel project's overview page. You'll see the deployment URL, the GitHub repo it's connected to, the production branch, and the framework Vercel detected. That overview is the page we'll return to every time we add a configuration in a later section.

We have something live. Next we'll find out where every setting we're about to touch actually lives in the dashboard.