Vercel Setup (The Frontend)

Before you start this guide: You must have completed 05 — LLM API Keys.

Vercel is the company that will host your public website (the "frontend" where users sign up) permanently on the internet for free.

We are going to deploy the website to Vercel right now so that Vercel gives us our official, permanent .vercel.app domain name.

Connect GitHub

Before Vercel can host your website, it needs to grab the code from your GitHub account.

• 1.1 If you haven't already, take all the code in your shipclawfast-starter-kit folder (the code you downloaded in Step 03) and upload it to a new private repository on your own GitHub account.

• 1.2 Open your browser and go to: https://vercel.com/signup

• 1.3 Sign up using the Continue with GitHub button. (This automatically links Vercel to your code).

Import the Project

1. Once logged into Vercel, click the black "Add New..." button in the top right and select Project.

2. You will see a list of your GitHub repositories. Find the one holding your starter kit code and click Import.

3. You are now on the "Configure Project" screen.

[CRITICAL SHIFT - DO NOT SKIP THIS!] Vercel must build our application as a "Monorepo". If you get this wrong, Vercel will crash with a pnpm install error.

Scroll down and open the "Build and Output Settings" toggle.

• Set the Build Command to: cd apps/web && pnpm run build
• Set the Output Directory to: apps/web/.next
• Leave the Install Command completely empty.

Now, look for the section called "Root Directory".

• [CRITICAL!] Ensure the Root Directory box is completely blank (or just a default ./ dot). DO NOT change this to apps/web. Vercel must physically read from the top of your repository to find the PNPM Workspace configs.

Add the Public Variables

Scroll down to the "Environment Variables" section. Vercel needs to know how to connect the website buttons to your Supabase database.

1. Open your .env file in VS Code so you can look at the passwords you collected earlier.

2. In the Vercel variables box, type the Name and paste the Value for each of these EXACTLY as shown. Click the "Add" button after each one:

What about the API URL? Do not add the NEXT_PUBLIC_API_URL yet! Leave it completely blank for now. We want to secure our official domain name first before we attach the backend API. (Note: When you do eventually add URLs to Vercel, NEVER include a trailing slash / at the end! It will crash the Express router.)

Hit Deploy

1. Once those 3 variables are in the list, and your Build Commands are set, click the big Deploy button.

2. Vercel will now install PNPM and build your website. This takes about 2 to 3 minutes. Do not close the window.

3. When it finishes, you will see a screen with fireworks that says "Congratulations!"

4. Click the "Continue to Dashboard" button.

Save Your New Domain Name

Now that Vercel built your site, they permanently assigned you a public domain name on the internet. We need to save this!

1. On your Vercel project dashboard, look near the top left. You will see a "Domains" section.

2. You will see a link that looks something like shipclawfast-starter-kit-xxxx-yourname.vercel.app. Copy this entire URL.

3. Go to your .env file in VS Code.

4. Press Enter to make a new line at the bottom.

5. Type exactly this, and paste your Vercel URL at the end:

WEB_URL=https://your-domain.vercel.app

(Make sure it starts with https:// and does not have a / at the very end!)

Connect Google OAuth

Now that you have your live Vercel domain name, we can finalize the Google Login button that we left unfinished back in Step 04!

1. Go back to your Google Cloud Console. 2. Navigate to APIs & Services -> Credentials. 3. Click on the ShipClawFast-Login OAuth client ID you created previously. 4. Scroll down to Authorized JavaScript origins and click ADD URI.

• Paste your exact Vercel URL here (e.g. https://shipclawfast-starter-kit-xxxx.vercel.app). 5. Scroll down to Authorized redirect URIs and click ADD URI.
• Paste your Supabase callback URL here again (e.g. https://xxx.supabase.co/auth/v1/callback). 6. Click the blue SAVE button at the bottom.

Connect Supabase To Vercel

If you try to log in to your fancy new website right now, Google will successfully authenticate you, but Supabase will accidentally redirect your computer back to http://localhost:3000 because it doesn't know your real website exists yet!

Let's tell Supabase where you live.

1. Open your browser and go to your Supabase Dashboard (https://supabase.com/dashboard). 2. In the left sidebar, click Authentication (the icon with two people). 3. Under "Configuration" in the inner menu, click URL Configuration. 4. Look at the Site URL box. Delete http://localhost:3000 and paste your exact new Vercel URL. 5. Scroll down to Redirect URLs and click Add URL. 6. Paste your Vercel URL again, but this time add /** at the exact end of it.

• Example: https://shipclawfast-starter-kit-xxxx-yourname.vercel.app/** 7. Click the green Save button.

(Google Login is now permanently wired to your live architecture!)

Checklist — Before moving on

• I set the Vercel Build Command and Output Directory to point to apps/web
• I left the Vercel Root Directory and Install Command completely blank
• I added the 3 NEXT_PUBLIC_ variables to Vercel
• Vercel built successfully and gave me a domain
• I pasted the new Vercel domain into my .env file as WEB_URL=
• I added the Vercel domain to Google Cloud Console's "Authorized JavaScript origins"
• I updated the Supabase Site URL and Redirect URLs to my new Vercel domain

"Wait, my website is broken!" If you visit your shiny new Vercel domain right now, the page will load, but if you click "Login" it might not work. This is completely on purpose and normal! It is broken right now because we haven't given it an API URL yet. We will fix that later.

When every checkbox above is ticked, move on to 07 — Polar Setup.