Day 1 / 03 / setup

Setup Before We Build

Prepare GitHub, Supabase, Vercel, Node.js, and the local project before Day 2.

Setup checklist

01GitHub accountGitHub is where the project code is saved and shared.

Steps

  1. Go to github.com and create an account, or sign in if you already have one.
  2. Verify your email address if GitHub asks you to.
  3. Make sure you can sign in before Day 2 starts.
  4. When we create a project, we will save it in a GitHub repository. A repository is the project folder saved online.

Commands or prompts

git status

git add .

git commit -m "setup checkpoint"

git push

Keep in mind

  • GitHub is not the app itself. It is the place that keeps the code history.
  • Do not upload secret keys or passwords to GitHub.
02Node.js and local projectNode.js lets the machine run JavaScript project commands.

Steps

  1. Mac: go to nodejs.org, download the LTS installer, open the .pkg file, and follow the installer steps.
  2. Windows: go to nodejs.org, download the LTS installer, open the .msi file, and keep the recommended options selected.
  3. After installing, close and reopen your terminal so the computer can find the new commands.
  4. Open the project folder in your code editor.
  5. Run npm install once to download the packages the project needs.
  6. Run npm run dev to start the project on your machine.

Commands or prompts

node -v

npm -v

npm install

npm run dev

Keep in mind

  • If a command fails, copy the full terminal message and ask AI to explain it in plain language.
  • The local server is only for your machine. Deployment comes later through Vercel.
03Supabase projectSupabase gives the app a place to save and read data.

Steps

  1. Go to supabase.com and sign in.
  2. Create a new project and choose a simple project name.
  3. Open the SQL editor when the trainer asks you to create a table.
  4. Copy the Project URL and anon public key from the API settings.

Commands or prompts

create table requests (
  id uuid primary key default gen_random_uuid(),
  title text not null,
  description text not null,
  department text,
  status text not null default 'New',
  created_at timestamptz not null default now()
);

Keep in mind

  • This table is only an example for the request tracker. Other apps may need different columns.
  • A table is like a spreadsheet for the app. Each row is one saved request.
  • Use the anon public key in the app. Do not paste private admin keys into browser code.
04Environment variablesEnvironment variables are private settings the app reads when it runs.

Steps

  1. Create a file named .env.local in the main project folder.
  2. Add the Supabase Project URL and anon public key.
  3. The app reads these values from .env.local instead of writing them directly inside the code.
  4. Restart the development server after changing .env.local.
  5. Do not upload .env.local to GitHub.

Commands or prompts

NEXT_PUBLIC_SUPABASE_URL=your-project-url

NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-public-key
Download .env.local example

Keep in mind

  • The NEXT_PUBLIC prefix means browser code is allowed to read this value.
  • Private keys should not use NEXT_PUBLIC because browser users could see them.
05Vercel account and deploymentVercel publishes the app and updates it when GitHub changes.

Steps

  1. Go to vercel.com and sign in with GitHub.
  2. Choose the GitHub repository for the project.
  3. Add the same Supabase environment variables in the Vercel project settings.
  4. Click deploy and wait for Vercel to build the app.
  5. Open the live URL and test the main flow.

Commands or prompts

git add .

git commit -m "ready to deploy"

git push

Keep in mind

  • In this course, CI/CD means: push to GitHub, Vercel rebuilds and updates the live app.
  • If the live app cannot save data, first check that Vercel has the same environment variables as your local project.
06Ready checkUse this checklist before Day 2 starts.

Steps

  1. GitHub account is ready and signed in.
  2. Node.js and npm commands work on the machine.
  3. Supabase project exists and has a requests table.
  4. Project has .env.local with the Supabase URL and anon key.
  5. Vercel account is connected to GitHub.

Commands or prompts

node -v

npm run dev

git status

Keep in mind

  • If one item is missing, write it down and fix it before the build session begins.