Pushing Your App to GitHub

The Complete Walkthrough

Time to take the app you built and move it from your laptop up to GitHub, step by step. We'll do it the manual way first so you understand each piece — then you'll see how to hand the whole thing to Claude Code.

---

Step 1: Check Your Git Status

Open your terminal and navigate into your app folder:

cd ~/Documents/focus-dashboard
git status

You'll see one of two things.

A) Git is already set up (likely, if you used create-next-app):

On branch main
nothing to commit, working tree clean

(or a list of changes you haven't committed yet)

B) Git isn't set up yet:

fatal: not a git repository

If you got B, run git init first, then continue.

---

Step 2: Make Sure You Have a .gitignore

A .gitignore file tells Git what to leave alone. Some things should never be committed:

• node_modules/ — thousands of files that anyone can reinstall with one command
• .env files — these hold secrets like database passwords and API keys
• .next/ — generated build files Git doesn't need

create-next-app creates a .gitignore for you. Confirm it exists:

ls -la | grep gitignore

If it's there, you're set. If not, ask Claude Code:

"Create a .gitignore file for a Next.js project."

---

Step 3: Stage and Commit Everything

git add .
git commit -m "Initial commit: Focus Dashboard with task management"

Adjust the message to describe your actual app.

---

Step 4: Create a GitHub Repository

1. Go to github.com (make sure you're logged in)
2. Click + → New repository
3. Name it to match your local folder (e.g., focus-dashboard)
4. Leave "Initialize with README" unchecked
5. Click Create repository

---

Step 5: Connect and Push

GitHub shows you the commands. Run them in your terminal:

git remote add origin https://github.com/YOUR-USERNAME/focus-dashboard.git
git branch -M main
git push -u origin main

Replace YOUR-USERNAME with your actual GitHub username. If you're prompted to authenticate, use the GitHub CLI (gh auth login) or your personal access token from the previous lesson.

---

Step 6: Verify

Visit https://github.com/YOUR-USERNAME/focus-dashboard.

You should see all your files. Click through a few. Your commit message will appear next to each file. That's your app, safely in the cloud.

---

Letting Claude Code Do It

Once you understand the steps above, you rarely need to type them yourself. From inside your project, you can simply say:

"Initialize Git if needed, make sure there's a .gitignore for Next.js, commit everything with a clear message, create a private GitHub repo called focus-dashboard, and push it."

Claude Code will run each command, show you what it's doing, and stop if anything needs your input. You stay in the driver's seat — you understand every step, even when you're not typing it.

---

Your New Daily Habit

From now on, end every work session with the same three steps:

git add .
git commit -m "Brief description of what you did"
git push

Or just tell Claude Code: "commit my changes and push them." This becomes muscle memory fast — make it automatic.

---

Protecting Your Secrets

Soon you'll connect a database, and you'll create a .env.local file holding secret keys. These must never land on GitHub.

Your .gitignore should already exclude .env files. Double-check:

cat .gitignore | grep env

You should see .env* (or .env.local) in the output. If you don't, ask Claude Code:

"Add .env.local and .env to the .gitignore file."

Why this matters so much: if you accidentally commit secrets to a public repo, they're exposed to the entire internet. People scan GitHub for leaked keys constantly. A leaked database key can mean someone reads or deletes your data; a leaked API key can drain your account. .gitignore is what stands between you and that headache.

---

What's Actually in Your Repo

Take a moment to look at your repository and recognize the main pieces:

Notice that node_modules/ is not on GitHub — exactly as it should be. When anyone (or a deployment server) downloads your project, they run npm install to rebuild that folder from package.json.

---

Working Across Multiple Computers

Want to pick up your app on a different machine? Once your repo is on GitHub:

# One-time setup on the new computer
git clone https://github.com/YOUR-USERNAME/focus-dashboard.git
cd focus-dashboard
npm install
npm run dev

This downloads your code, reinstalls the dependencies, and starts the dev server. Your project is right where you left it.

---

Summary

• Check git status first — if Git isn't set up, run git init
• Make sure a .gitignore exists so node_modules/ and .env files stay out
• Stage and commit: git add . then git commit -m "..."
• Create a repo on GitHub (don't initialize it with a README)
• Connect with git remote add origin [url], then git push -u origin main
• Build the daily habit: work → git add . → git commit → git push
• Never commit .env files — leaked secrets are a real and costly risk
• Claude Code can run the entire flow for you once you know what each step does