VSCode + GitHub + Vercel + Supabase: Build and Deploy a Full-Stack App from Scratch (Part 1)

Who This Guide Is For

If you have never written a line of code in a professional environment — never used a terminal, never heard of “pushing to GitHub,” never deployed anything to the internet — this guide is written specifically for you. By the end of Part 1, you will have a real working project saved on your computer, tracked with version control, and backed up on GitHub. By the end of Part 2, it will be live on the internet with its own database.

We are going to build a Task Manager app — a simple web page where you can add tasks, check them off, and see them saved in a database. It sounds basic, but it uses the exact same professional tools and workflow that developers at real companies use every single day.

No prior experience required. Every command, every click, every step is covered.

The Big Picture: What Are We Actually Doing?

Before we install anything, let’s understand the four tools and why each one exists.

Here is how they connect:

You write code in VS Code → save a snapshot with Git → back it up to GitHub → Vercel sees the new code and automatically updates your live website → your app reads and writes data from Supabase.

That full chain is what “production-grade deployment” means. Let’s build it.

Part 1 Roadmap

1. Install VS Code
2. Install Node.js (needed to run JavaScript projects)
3. Install Git (the version control engine)
4. Create your project (a Next.js app)
5. Learn the VS Code interface
6. Run your project locally
7. Your first Git commits
8. Create a GitHub account and repository
9. Push your code to GitHub

Step 1 — Install VS Code

VS Code (Visual Studio Code) is the code editor you will write everything in. It is free, runs on Windows, Mac, and Linux, and is used by millions of professional developers.

How to install:

1. Go to code.visualstudio.com
2. Click the big blue Download button for your operating system
3. Run the installer — accept all default options
4. When it finishes, open VS Code

You should see a purple/dark welcome screen. That’s it — VS Code is installed.

Install these essential extensions:

Extensions add features to VS Code. Click the four-square icon on the left sidebar (or press Ctrl+Shift+X on Windows / Cmd+Shift+X on Mac) to open the Extensions panel. Search for and install each of these:

1. ESLint — catches code errors as you type
2. Prettier – Code Formatter — automatically formats your code cleanly
3. Tailwind CSS IntelliSense — autocomplete for CSS styles
4. GitLens — shows who changed what line and when
5. GitHub Copilot (optional, paid) — AI coding assistant

Click the green Install button next to each extension name.

Step 2 — Install Node.js

Node.js lets you run JavaScript on your computer (not just in a browser). It also comes with npm (Node Package Manager), which lets you download thousands of pre-built code libraries — like ordering parts instead of building everything from scratch.

How to install:

1. Go to nodejs.org
2. Download the LTS version (the one labeled “Recommended For Most Users”)
3. Run the installer — accept all defaults

Verify the installation:

Open the Terminal inside VS Code: click Terminal in the top menu → New Terminal. A black panel will open at the bottom of your screen. Type each command and press Enter:

node --version
npm --version

You should see version numbers printed, like v20.11.0 and 10.2.4. If you see those, Node.js is installed correctly.

What is the Terminal? The terminal (also called the command line or shell) is a text-based way to talk to your computer. Instead of clicking icons, you type instructions. It sounds scary but you will only use a handful of commands in this guide — all of which are written out for you.

Step 3 — Install Git

Git is the version control system. It tracks every change you make to your code so you can always go back to an earlier version if something breaks.

How to install:

On Windows: Go to git-scm.com, download the installer, and run it. Accept all default options (there are many screens — just keep clicking Next).

On Mac: Open Terminal (the one built into your Mac, search “Terminal” in Spotlight) and run:

xcode-select --install

A popup will appear asking you to install developer tools. Click Install. Git is included automatically.

On Linux (Ubuntu/Debian):

sudo apt-get install git

Verify the installation:

In the VS Code terminal, type:

git --version

You should see something like git version 2.43.0.

Tell Git who you are:

Git needs to know your name and email so it can stamp your changes with your identity. Run these two commands (replace with your own name and email):

git config --global user.name "Your Name"
git config --global user.email "your@email.com"

You only need to do this once ever. Git will remember it for all future projects.

Step 4 — Create Your First Project

We will create a Next.js project. Next.js is a popular framework that makes building modern web apps fast and organized. It is the official recommended way to build React apps and works seamlessly with Vercel (Vercel actually created Next.js).

Choose where to save your projects:

First, navigate to a folder where you want to keep your projects. Many developers create a projects folder in their home directory. In the terminal:

On Windows:

cd C:\Users\YourName
mkdir projects
cd projects

On Mac/Linux:

cd ~
mkdir projects
cd projects

What do these commands mean?
cd = “change directory” (move into a folder)
mkdir = “make directory” (create a new folder)
~ = shortcut for your home folder (like C:\Users\YourName)

Create the Next.js app:

npx create-next-app@latest my-task-manager

This command downloads and runs the Next.js project creator. It will ask you several questions. Here is exactly what to answer:

✔ Would you like to use TypeScript? › No
✔ Would you like to use ESLint? › Yes
✔ Would you like to use Tailwind CSS? › Yes
✔ Would you like your code inside a `src/` directory? › No
✔ Would you like to use App Router? › Yes
✔ Would you like to use Turbopack for next dev? › No
✔ Would you like to customize the import alias? › No

Use the arrow keys to move between options and press Enter to select. After answering all questions, it will download everything automatically. Wait about 30-60 seconds.

Open your new project in VS Code:

cd my-task-manager
code .

The code . command opens the current folder in VS Code. The VS Code window will refresh and show your project’s files in the left sidebar.

Step 5 — Understanding Your Project Structure

Look at the file explorer in VS Code’s left sidebar. Here is what each important folder and file does:

my-task-manager/
├── app/                  ← Your pages and routes live here
│   ├── globals.css       ← Global CSS styles
│   ├── layout.js         ← The outer wrapper for every page
│   └── page.js           ← Your homepage (what visitors see first)
├── public/               ← Images and static files go here
├── .gitignore            ← Tells Git which files NOT to track
├── next.config.mjs       ← Next.js configuration
├── package.json          ← List of your project's dependencies
├── tailwind.config.js    ← Tailwind CSS configuration
└── README.md             ← Project description file

The most important file for now is app/page.js — this is your homepage. Click on it to open it.

Step 6 — Run Your Project Locally

Let’s see your project running in a browser. In the VS Code terminal, make sure you are inside the my-task-manager folder, then run:

npm run dev

You will see output like this:

▲ Next.js 14.x.x
- Local:        http://localhost:3000
- ready in 2.3s

Open your browser and go to http://localhost:3000. You will see the default Next.js welcome page. Congratulations — your app is running on your computer!

Important: localhost:3000 only works on YOUR computer. Nobody else in the world can see it yet. That is what deployment (covered in Part 2) is for.

To stop the server, press Ctrl+C in the terminal.

Let’s build our Task Manager page:

Open app/page.js in VS Code and replace everything in it with this code:

'use client'
import { useState } from 'react'

export default function Home() {
  const [tasks, setTasks] = useState([])
  const [newTask, setNewTask] = useState('')

  function addTask() {
    if (!newTask.trim()) return
    setTasks([...tasks, { id: Date.now(), title: newTask, completed: false }])
    setNewTask('')
  }

  function toggleTask(id) {
    setTasks(tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ))
  }

  return (
    <main className="max-w-xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6 text-gray-800">My Task Manager</h1>

      <div className="flex gap-2 mb-6">
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addTask()}
          placeholder="Add a new task..."
          className="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={addTask}
          className="bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition"
        >
          Add Task
        </button>
      </div>

      <ul className="space-y-3">
        {tasks.length === 0 && (
          <p className="text-gray-400 text-center py-8">No tasks yet. Add one above!</p>
        )}
        {tasks.map((task) => (
          <li key={task.id} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg border">
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTask(task.id)}
              className="w-4 h-4 cursor-pointer"
            />
            <span className={task.completed ? 'line-through text-gray-400' : 'text-gray-800'}>
              {task.title}
            </span>
          </li>
        ))}
      </ul>
    </main>
  )
}

Save the file (Ctrl+S on Windows / Cmd+S on Mac). If your dev server is running, visit http://localhost:3000 and you will see your Task Manager — you can type tasks and check them off.

Note: Right now, tasks disappear when you refresh the page because they are only stored in memory. In Part 2, we will connect Supabase so they are saved permanently in a database.

Step 7 — Version Control with Git

This is one of the most important skills you will learn. Git lets you save “snapshots” of your project so you can always go back in time if you break something.

Understanding the three Git states:

Think of Git like preparing a package to mail:

1. Working Directory — files you have changed but not yet packaged
2. Staging Area — files you have packed into the box (but not mailed yet)
3. Repository — the mailed package (a permanent snapshot)

Check what Git sees:

In the terminal (make sure you are inside your my-task-manager folder):

git status

You will see a list of files in red. These are files that have changed since the last snapshot (or in our case, since the project was created). The create-next-app command already ran git init for you, so Git is already tracking this project.

Stage your changes:

git add .

The . means “add everything in this folder.” Run git status again and you will see the files are now green — they are in the staging area.

Commit (take the snapshot):

git commit -m "Initial project setup with task manager UI"

The -m flag lets you write a message describing what this snapshot contains. Write commit messages that explain WHAT changed and WHY, not just “updated stuff.” Good examples:

• "Add task manager homepage with add/check functionality"
• "Fix bug where empty tasks could be added"
• "Connect Supabase database to task list"

View your commit history:

git log --oneline

This shows a list of all your snapshots with their IDs. Press q to exit the log view.

The Git workflow you will use every day:

# 1. Make changes to your code
# 2. Check what changed
git status

# 3. Stage all changes
git add .

# 4. Save the snapshot
git commit -m "Describe what you changed"

# 5. Repeat

That’s the core Git loop. You will do this dozens of times per project.

Step 8 — Create a GitHub Account

GitHub is where your code lives in the cloud. It is free for public and private repositories.

1. Go to github.com
2. Click Sign up in the top right
3. Enter your email address, create a password, and choose a username
4. Verify your email address (GitHub will send a verification code)
5. On the welcome screen, select “Free” plan

You now have a GitHub account. Your username will appear in your project URLs, like github.com/yourusername/my-task-manager.

Step 9 — Create a GitHub Repository

A repository (often called a “repo”) is your project’s home on GitHub.

1. Click the + icon in the top right of GitHub and select New repository
2. Fill in:
   • Repository name: my-task-manager
   • Description: A full-stack task manager app
   • Visibility: Public (or Private if you prefer)
   • ⚠️ Important: Do NOT check “Add a README file” or “Add .gitignore” — your project already has those
3. Click Create repository

GitHub will show you a page with instructions. You will see a URL like https://github.com/yourusername/my-task-manager.git. Copy this URL — you need it in the next step.

Step 10 — Connect Your Local Project to GitHub

Now we link the project on your computer to the empty repository on GitHub.

Authenticate GitHub in VS Code:

The first time you push to GitHub, VS Code or your terminal will ask you to sign in. The easiest method:

1. In the terminal, run the push command below
2. A browser window will open asking you to authorize GitHub — click Authorize
3. You may be asked to enter a code — copy it from the terminal and paste it on GitHub

Push your code to GitHub:

Run these two commands in your terminal (replace the URL with your actual repository URL):

# Connect your local project to GitHub
git remote add origin https://github.com/yourusername/my-task-manager.git

# Push your code up to GitHub
git push -u origin main

What these commands mean:

• git remote add origin [url] — tells your local Git “this is where the cloud backup lives”
• git push -u origin main — sends your local snapshots to GitHub. The -u origin main sets up a connection so next time you just type git push

After this runs, go back to your GitHub repository page and refresh it. You will see all your project files are now there!

Step 11 — The Daily Workflow from Now On

Every time you make changes to your project, this is all you need to do:

# After making changes to your code:
git add .
git commit -m "What you changed"
git push

Three commands. That’s it. Your code is now safely backed up in the cloud and (after Part 2) will automatically update your live website.

Pulling changes (if you work on multiple computers):

# To download the latest code from GitHub to your computer
git pull

Git Reference Card: Commands You Will Use Most

Troubleshooting Common Issues

“permission denied” or authentication error when pushing

GitHub switched from passwords to tokens. Solution: go to GitHub → Settings → Developer Settings → Personal Access Tokens → Generate New Token. Check the repo permission and generate. Use this token as your password when the terminal asks.

“npm command not found”

Node.js is not installed correctly. Close and reopen VS Code after installing Node.js, then try again.

“src refspec main does not match any”

You have not made your first commit yet. Run git add . and git commit -m "first commit" before pushing.

Changes not showing on GitHub after git push

Make sure you actually committed first. Run git status — if you see “nothing to commit, working tree clean” then you are good. If not, commit first then push.

What You Accomplished in Part 1

• ✅ Installed VS Code with professional extensions
• ✅ Installed Node.js and npm
• ✅ Installed and configured Git
• ✅ Created a real Next.js project
• ✅ Built a working Task Manager UI
• ✅ Learned the core Git workflow (add → commit → push)
• ✅ Created a GitHub account and repository
• ✅ Pushed your code to GitHub

Your project is now version-controlled and safely backed up in the cloud. In Part 2, we will connect a real database using Supabase, deploy your app live to the internet using Vercel, connect a custom domain, and set up automatic deployments so every time you push to GitHub, your live site updates instantly.

Continue reading: VSCode + GitHub + Vercel + Supabase — Part 2: Database, Deployment, and Going Live