Install Your Tools

Step-by-step installation guide for every tool in the program. Work through these in order — each one takes 5–10 minutes.

Work through each section in order. Don't skip ahead — some tools depend on others being installed first (specifically, Node.js must be installed before Claude Code).

Windows users: All commands in this guide use the Command Prompt or PowerShell. To open either: press Windows key + R, type cmd, press Enter. Or search "Command Prompt" in the Start menu.

Mac users: Open Terminal — press Cmd + Space, type "Terminal", press Enter.

1. GitHub Account

GitHub is where your code lives online. Think of it as the Google Drive of the coding world — it stores your files, tracks every change you ever made, and lets you collaborate with teammates. Every professional developer uses GitHub.

Go to github.com

Open your browser and go to github.com. You'll see a dark homepage with a sign-up form in the middle.

Create your account

Click the green "Sign up for GitHub" button (or look for a sign-up form directly on the page).

Enter:

Your email address (use your personal Gmail — you'll use this across all tools)
A password (strong one — save it somewhere)
A username — this is public and permanent. Use something professional. Good format: firstnamelastname or firstname-lastname. Example: subhashkotha or subhash-kotha. No spaces allowed.

Click "Continue" after each field.

Verify you're human

GitHub will show a puzzle or image challenge. Solve it and click Continue.

Choose your plan

On the plan selection screen, choose "Continue for free". You do not need a paid GitHub plan for this program.

Verify your email

GitHub sends a verification code to your email. Open your Gmail, find the email from GitHub, copy the 6-digit code, and paste it back on the GitHub page.

Your account is ready

You'll land on your GitHub dashboard — a page with your username at the top left and a feed of activity. This is your home base on GitHub.

Note your GitHub username and password for now — you'll save them properly into VaultMate in step 8 at the end of this page. VaultMate is the credential manager the program uses to store every API key and password securely in one place.

Your Turn — Once your account is set up, go to github.com/[yourusername] and check that your profile page loads. That URL is your public developer identity — you'll be sharing it throughout the program.

Choose your username carefully. It is permanent and public. Avoid usernames with numbers, underscores, or anything you wouldn't put on a business card. subhashkotha is better than subhash_k_2024.

2. Git

Git is the actual software that tracks changes to your code. GitHub is the website where that history is stored. Git is the tool on your computer; GitHub is the cloud storage. You need both.

Git vs GitHub — the key distinction. Git is like "Track Changes" in Word. GitHub is like the shared network drive where the document lives. You need both: Git to record your history locally, GitHub to store it in the cloud.

Check if Git is already installed

Open Command Prompt (Windows) or Terminal (Mac) and type git --version, then press Enter. If you see something like git version 2.47.0, Git is already installed — skip to the next section. If you see an error like "command not found" or "'git' is not recognized", continue to the next step.

Install Git on Windows

Option A — Using winget (recommended, fastest):

Open Command Prompt and paste this: winget install --id Git.Git -e --source winget

Press Enter and wait. It downloads and installs automatically. Takes about 2–3 minutes.

Option B — Manual download:

Go to git-scm.com/download/win. The download starts automatically. Open the downloaded .exe file and click through the installer — the default options are fine on every screen. Just keep clicking "Next" and finally "Install".

Install Git on Mac

Open Terminal and type git --version, then press Enter.

If Git isn't installed, macOS will automatically prompt you to install the Xcode Command Line Tools. Click "Install" in the popup window. This takes 5–10 minutes. When it finishes, run git --version again to confirm.

Configure your identity

After Git is installed, tell it who you are. Run these two commands — replace the values in quotes with your actual name and the Gmail you used for GitHub:

git config --global user.name "Your Name"

git config --global user.email "youremail@gmail.com"

This is stored on your computer and appears as the author on every change you make. Use the same email you registered on GitHub.

Verify

Run git --version. You should see git version 2.x.x. Any version from 2.30 onwards is fine.

Your Turn — Run git config --global user.name to confirm your name is saved. Run git config --global user.email to confirm your email. Both should print back the values you set. If either is blank, re-run the configuration commands above.

3. VS Code

VS Code (Visual Studio Code) is your code editor — the app where you'll spend most of your time writing and reading code. It's free, made by Microsoft, and is the most widely used code editor in the world.

Download VS Code

Go to code.visualstudio.com. The website detects your operating system automatically and shows the right download button. Click the large blue "Download for Windows" (or Mac) button.

Install it

Windows: Open the downloaded .exe file. Accept the license agreement. On the "Select Additional Tasks" screen, check all the boxes — especially "Add to PATH" and "Add 'Open with Code' action to Windows Explorer". Click Install.

Mac: Open the downloaded .zip or .dmg file. Drag VS Code into your Applications folder.

Open VS Code

Launch VS Code from your Start menu (Windows) or Applications folder (Mac). You'll see a welcome screen with some tabs. That's it — VS Code is installed.

Install required extensions

Extensions add features to VS Code. You need six specific ones for this program. Install them one by one:

Click the Extensions icon in the left sidebar — it looks like four squares, with one slightly separated. Or press Ctrl+Shift+X (Windows) / Cmd+Shift+X (Mac).

A search bar appears. Search for each extension by name and click the blue "Install" button:

a) Claude Code Search: Claude Code Publisher: Anthropic This adds the Claude AI assistant directly inside VS Code. The main AI tool of the program.

b) GitLens Search: GitLens Publisher: GitKraken Shows you who changed what line of code and when. Essential for understanding version history.

c) Tailwind CSS IntelliSense Search: Tailwind CSS IntelliSense Publisher: Tailwind Labs Auto-completes CSS class names as you type. Saves enormous time when styling.

d) Prettier — Code formatter Search: Prettier - Code formatter Publisher: Prettier Automatically formats your code to look clean and consistent every time you save.

e) Error Lens Search: Error Lens Publisher: Alexander Shows errors and warnings directly on the line where they occur — no more hunting through a list.

f) Auto Rename Tag Search: Auto Rename Tag Publisher: Jun Han When you rename an HTML or JSX opening tag, it automatically renames the closing tag too. Tiny but saves constant frustration.

Your Turn — After installing all 6 extensions, press Ctrl+Shift+X (Windows) or Cmd+Shift+X (Mac) and search for each name. Confirm each one shows a gear icon (meaning "Installed") rather than a blue "Install" button. If any are missing, install them now before moving on.

Configure Prettier as default formatter

Press Ctrl+Shift+P (Windows) / Cmd+Shift+P (Mac) to open the command palette. Type Open User Settings JSON and press Enter. A file opens with { and } and possibly some settings already inside.

Add these three settings inside the braces. If the file already has other settings, add a comma after the last existing line, then add these below it:

Three settings to add:

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": true,

"[javascript][typescript][typescriptreact][javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

Type these exactly as shown, one per line. The last one has no comma after it if it is the last setting in the file.

After installing all 6 extensions, close and reopen VS Code. This makes sure everything is properly loaded.

Do not skip the Prettier configuration step. Without it, your code will not auto-format on save, and files from different sessions will look inconsistent. This causes confusion when Claude Code reads your files later.

4. Node.js

Node.js lets your computer run JavaScript — the programming language behind React, the framework we use to build websites. Without Node.js, your computer can't run React projects locally.

Think of Node.js like the calculation engine that powers Excel's formulas — you don't interact with it directly, but nothing works without it. React apps need Node.js to run on your machine during development.

Go to nodejs.org

Open nodejs.org. You'll see two download options: LTS (Long Term Support) and Current.

Always download LTS. It's the stable version. As of 2026, LTS is Node.js 22.x.

Download and install

Click the big green "Download Node.js (LTS)" button. Open the downloaded installer and click through — the default options are correct on every screen. Just keep clicking "Next".

The installer automatically adds Node.js to your system PATH, which means you can use it from any folder in the terminal.

Verify the installation

Close your terminal, open a new one, and run node --version. You should see something like v22.11.0.

Then run npm --version. You should see something like 10.9.0. npm (Node Package Manager) is installed automatically alongside Node.js — it's what you use to install libraries and packages.

Important: Close and reopen your terminal after installing Node.js. The node and npm commands won't work in terminals that were already open before the installation.

Your Turn — Open a fresh terminal and run node --version then npm --version. Both should print version numbers. If either says "not recognized", Node.js didn't install correctly — re-run the installer and make sure you're using a new terminal window.

5. Supabase Account

Supabase is the backend service we use for everything that happens "behind the scenes" in an app — storing data, user logins, business logic. Think of it as your always-on cloud database. Free tier is generous enough for all training projects.

Go to supabase.com

Open supabase.com and click "Start your project" in the top right corner.

On the sign-up page, click "Continue with GitHub". This opens a GitHub authorization screen asking if you want to allow Supabase to access your GitHub account. Click the green "Authorize supabase" button.

You'll be redirected back to Supabase, now logged in.

Create your first project (optional at this stage)

You'll land on the Supabase dashboard. You don't need to create a project right now — that happens in session. For now, just confirm that you're logged in and can see the dashboard.

The dashboard shows an Organization (your personal workspace) and a button to create a new project. That's all you need for now.

Why sign up with GitHub? It links your accounts, simplifies authentication later, and means one fewer password to remember. You'll thank yourself in Week 3 when you're managing multiple services.

Your Turn — Log in to Supabase and confirm you can see the dashboard. Look for your organization name in the top left. If you see it, you're in. That's the only check needed at this stage.

6. Vercel Account

Vercel is how your apps go live on the internet. You build your app locally, push it to GitHub, and Vercel automatically deploys it — live, with a public URL, within 60 seconds. Free tier covers all training projects easily.

Go to vercel.com

Open vercel.com and click "Sign Up" in the top right.

Click "Continue with GitHub". Authorize Vercel to access your GitHub account when prompted. You'll be redirected back to Vercel, logged in.

Choose your plan

Vercel will ask about your use case. Select "Personal" and choose the Hobby (free) plan. You do not need a paid plan.

Your dashboard

You'll land on the Vercel dashboard — an empty page with "Import Project" and a few options. Leave it for now. You'll use this in Session 7 when you deploy your first project.

Your Turn — Verify you can log in to Vercel and see your dashboard. That's all you need right now. You do not need to create a project or connect anything — that happens in Session 7.

7. Expo Go (on your phone)

Expo Go lets you preview mobile apps on your actual phone during development. When we build the React Native mobile version of projects, you'll be able to open it instantly on your own device — no cable needed.

On your Android phone

Open the Google Play Store. Search for "Expo Go". The publisher is "Expo". Tap Install.

On your iPhone

Open the App Store. Search for "Expo Go". The publisher is "Expo". Tap Get.

Open the app once

After installing, open Expo Go. You'll see a home screen with a QR code scanner and some sample projects. You don't need to sign up for an Expo account. Close the app — it's ready for when we need it.

What Expo Go looks like: It's a simple white screen with your device camera ready to scan a QR code. When your instructor shares a QR code during a mobile session, you scan it with Expo Go and your app opens directly on your phone — exactly like a real app, but without going through the App Store.

Your Turn — Install Expo Go now and open it once to confirm it loads. You'll see a camera viewfinder. That's it — no account needed, nothing to configure. You're done with this step.

8. VaultMate

Every tool you set up in this program gives you an API key, a password, or a secret token. Across the whole program, you'll accumulate 15–20 of these. Without a system, you will lose them — API keys are shown only once on most platforms, and regenerating them means updating every place you've already used the key.

VaultMate is the credential manager this program uses. Every secret, API key, and password goes there — without exception. When you need to find the Supabase service role key three months from now, you open VaultMate. When Claude Code needs a credential, it reads VaultMate. When you start a new project, VaultMate is where you go to find what you had before.

Think of it as a locked filing cabinet for your digital credentials. Each drawer is a project. Each folder inside is a credential. Every item has a title, a category, and the actual secret value — stored on your machine, never uploaded anywhere.

API keys are shown only once. When a service like Supabase or Razorpay generates a secret key, it displays it exactly one time. If you close the window without saving it to VaultMate, you cannot retrieve it — you have to generate a new one and update every place the old one was used. This is the most common painful mistake in the program. VaultMate prevents it.

Download VaultMate

Your instructor will have shared a link to the VaultMate GitHub repository in the batch WhatsApp group. Go to that link.

On the GitHub repository page, click "Releases" in the right sidebar. You'll see the latest release at the top.

Under "Assets", download the installer file:

Windows: Download the .exe file (example: VaultMate-Setup-1.0.0.exe)
Mac: Download the .dmg file (example: VaultMate-1.0.0.dmg)

Install VaultMate

Windows: Open the downloaded .exe file. Windows may show a "Windows protected your PC" warning — click "More info" and then "Run anyway". This appears because the app is new and not yet signed by Microsoft. Click through the installer.

Mac: Open the downloaded .dmg file. Drag VaultMate into your Applications folder.

Open VaultMate

Launch VaultMate from your Start menu (Windows) or Applications folder (Mac). You'll see a clean dashboard with a sidebar on the left and an empty main area.

Create a project for your training work

In the left sidebar, click "+ New Project". Name it Training. This is where all credentials from this program will live.

Save your GitHub credentials as your first entry

Click on the Training project in the sidebar. Click "Add Credential".

Fill in the fields:

Title: GitHub Account
Category: Other
Username: your GitHub username (the one you just created)
Secret: your GitHub password
URL: https://github.com
Notes: Created for training program

Click Save.

You now have your first credential stored. Every other credential in this program follows the same pattern.

VaultMate stores everything locally. Your credentials are in a database on your own machine — not uploaded to any server, not accessible to anyone else. If you reinstall your operating system, export the database first (File → Export) and import it back after reinstalling. The GitHub repository is the source code for the app itself, not a server that stores your data.

Your Turn — Open VaultMate, click on the Training project, and verify your GitHub credential is listed there. Click on it to confirm the username and password are both saved correctly. If anything is missing, click Add Credential and add it now before moving on.

Done with Tools

If you've reached this point with everything installed, you're in good shape. Next step: set up Claude Code specifically — that's on the next page.

Before moving on, do a quick mental check:

GitHub account: created and email verified
Git: installed, configured with your name and email
VS Code: installed with all 6 extensions
Node.js: installed (LTS version)
Supabase: account created
Vercel: account created
Expo Go: installed on your phone
VaultMate: installed, Training project created, GitHub credentials saved

If any of these are missing, go back and complete them before continuing. Claude Code setup depends on a few of these being in place.