Git and GitHub - Version Control for Pirates

Every programmer needs to know Git - a version control system. It's like a ship's log - you record the history of changes in your code.

What is Git?

Git is a version control system - it allows you to:

• Save the history of code changes
• Go back to previous versions
• Collaborate with other developers
• Branching - work on different features simultaneously
• Track who changed what and when

Git vs GitHub:

• Git - local tool (on your computer)
• GitHub - online platform for storing code (like Dropbox for developers)

Installing Git

Windows:

Download from: https://git-scm.com/install/windows

During installation choose:

• Git Bash
• Git from the command line
• Use Vim (or Nano if you prefer)

Mac:

Check whether you already have Git:

git --version

If it's missing, macOS offers to install the Xcode Command Line Tools (Git is part of them). You can also type xcode-select --install yourself or install Git via Homebrew:

brew install git

Linux (Ubuntu/Debian):

sudo apt-get update
sudo apt-get install git

Configuring Git - First Steps

After installation, configure Git with your details:

git config --global user.name "Jack Sparrow"
git config --global user.email "jack@blackpearl.com"

Why is this important? Every commit (saved change) will have your name and email - it's like a signature in the ship's log.

Check configuration:

git config --list

Initializing a Git Project

You have two scenarios:

Scenario 1: New project (local)

When you create a new Next.js project, Git is already initialized automatically!

create-next-app does it for you. Check:

ls -la

You'll see a .git/ folder - that's the Git repository.

Scenario 2: Existing folder (without Git)

If you have a folder without Git:

cd my-project
git init

This will create a .git/ folder and initialize the repository.

Basic Git Commands

1. git status - Repository state

Checks what has changed:

git status

You'll see:

• Untracked files - new files that Git doesn't track
• Modified files - changed files
• Staged files - files ready for commit

On branch main
Changes not staged for commit:
  modified:   app/page.tsx

Untracked files:
  app/pirates/page.tsx

2. git add - Adding files to staging

Staging area is a "waiting room" before commit.

# Add one file
git add app/page.tsx

# Add all files
git add .

# Add all .tsx files, also from subfolders (quotes: Git expands the pattern, not the terminal)
git add "*.tsx"

After git add, files are staged - ready to be saved (committed).

3. git commit - Saving changes

A commit is like a checkpoint in a game - you save the state of the code.

git commit -m "Add pirate landing page"

-m is message - a short description of what you changed.

Good commit messages:

• "Add hero section to landing page"
• "Fix button hover animation"
• "Update Pirate interface with level field"

Bad commit messages:

• "changes"
• "fix"
• "asdfghjk"
• "WIP" (Work In Progress - only temporarily)

4. git log - Commit history

See the history of all commits:

git log

You'll see:

commit a3f5b8c (HEAD -> main)
Author: Jack Sparrow <jack@blackpearl.com>
Date:   Sun Nov 24 10:30:00 2024 +0100

    Add pirate landing page

commit b2e4a9d
Author: Jack Sparrow <jack@blackpearl.com>
Date:   Sun Nov 24 09:15:00 2024 +0100

    Initial commit

Shortcuts:

# Short version (1 line per commit)
git log --oneline

# Last 5 commits
git log -5

# With branch graph
git log --graph --oneline

5. git diff - See changes

Compares current files with staged/committed version:

# Changes not added to stage
git diff

# Changes in staged files
git diff --staged

You'll see:

diff --git a/app/page.tsx b/app/page.tsx
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
 export default function Home() {
   return (
-    <h1>Hello World</h1>
+    <h1>Ahoy, Pirates!</h1>
   )
 }

.gitignore - Ignoring Files

Some files should NOT be in Git:

• node_modules/ - huge folder (hundreds of MB)
• .env.local - secrets (API keys, passwords)
• .next/ - build output
• dist/, build/ - compiled files

The .gitignore file tells Git what to ignore:

# .gitignore
node_modules/
.next/
.env.local
.env
.DS_Store
*.log

Next.js automatically creates .gitignore - you already have this configured!

Branching - Work Branches

A branch is a separate line of project development. You can work on a new feature without affecting the main code.

Creating a branch

# Create a new branch
git branch feature/landing-page

# Switch to the new branch
git checkout feature/landing-page

# Or one command (create + switch)
git checkout -b feature/landing-page

Naming convention:

• feature/name - new feature
• fix/name - bug fix
• refactor/name - refactoring
• docs/name - documentation

Switching between branches

# See all branches
git branch

# Switch to main
git checkout main

# Switch to feature branch
git checkout feature/landing-page

Merging branches

When you finish a feature, you merge changes into main:

# Switch to main
git checkout main

# Merge changes from feature branch
git merge feature/landing-page

Fast-forward merge: If main hasn't changed, Git simply moves the pointer - this is the easiest merge.

3-way merge: If both branches have new commits, Git creates a new merge commit.

Deleting a branch

After merging you can delete the branch:

git branch -d feature/landing-page

GitHub - Remote Repository

GitHub is like a pirate island - a place where you store your treasures (code).

Creating a Repository on GitHub

1. Go to: https://github.com
2. Click the green "New" button (or "New repository")
3. Fill in:
   • Repository name: krakens-call
   • Description: "Epic pirate game built with Next.js"
   • Public or Private (your choice)
   • DO NOT check "Initialize with README" (you already have a local project)
4. Click "Create repository"

Connecting Local Project with GitHub

GitHub will give you commands - copy them:

# Add remote repository
git remote add origin https://github.com/username/krakens-call.git

# Rename branch to main (if needed)
git branch -M main

# Push code to GitHub
git push -u origin main

Explanation:

• origin - name of the remote repository (default convention)
• -u - set upstream (default branch for push/pull)
• main - branch name

git push - Sending changes

Every local commit → send to GitHub:

# Push all commits to origin/main
git push

# Push a specific branch
git push origin feature/landing-page

git pull - Downloading changes

If you work in a team, others may introduce changes:

# Download changes from GitHub and merge into local branch
git pull

# Pull from a specific branch
git pull origin main

pull = fetch + merge:

• git fetch - downloads changes
• git merge - merges them into your branch

git clone - Cloning a repository

Downloading an existing project from GitHub:

git clone https://github.com/username/krakens-call.git
cd krakens-call
npm install
npm run dev

Workflow with Git and GitHub

Typical pirate workflow:

1. New feature

# Create branch
git checkout -b feature/pirate-profile

# Work on code...
# Edit app/profile/page.tsx

# Check changes
git status
git diff

# Add to stage
git add app/profile/

# Commit
git commit -m "Add pirate profile page with stats"

# Push to GitHub
git push origin feature/pirate-profile

2. Pull Request on GitHub

1. Go to GitHub
2. You'll see a banner: "feature/pirate-profile had recent pushes"
3. Click "Compare & pull request"
4. Fill in:
   • Title: "Add pirate profile page"
   • Description: What you did, why, screenshots
5. Click "Create pull request"

Pull Request (PR) is a request to merge changes from your branch into main. The team can do a code review.

3. Review and Merge

1. Other developers review the code
2. They leave comments
3. You make fixes (new commits on the same branch)
4. When everything's OK, someone clicks "Merge pull request"
5. The branch gets merged into main

4. Sync local main

# Switch to main
git checkout main

# Download changes from GitHub
git pull

# Delete local feature branch
git branch -d feature/pirate-profile

Undoing Changes - When Something Goes Wrong

Undo changes in a file (not committed)

# Restore file to last commit
git checkout -- app/page.tsx

# Restore all files
git checkout -- .

Remove files from stage (git add)

# Remove from stage, keep changes in file
git reset app/page.tsx

# Remove everything from stage
git reset

Undo last commit (locally)

# Undo commit, keep changes in files
git reset --soft HEAD~1

# Undo commit, delete changes in files (DANGER!)
git reset --hard HEAD~1

Warning: --hard DELETES changes with no way to recover them!

Revert commit (already pushed)

If the commit is already on GitHub:

# Create a new commit that reverses the changes
git revert a3f5b8c

# Push
git push

revert creates a new commit - safer than reset.

Git in Cursor

Cursor has built-in Git support!

Source Control panel

1. Click the Source Control icon (on the left, 3 branching circles)
2. You'll see:
   • Changed files
   • + button (git add)
   • Field for commit message
   • Commit button

Workflow in Cursor:

1. Edit files
2. Open Source Control (Ctrl + Shift + G, on a Mac also Control)
3. Click + next to files (stage)
4. Type commit message
5. Click Commit
6. Click "..." → Push

AI Commit Messages: Cursor AI can suggest commit messages based on your changes!

Using AI for Git

Ask Cursor AI:

Prompt 1:

How to undo the last commit in Git?

Prompt 2:

Write a good commit message for landing page changes - I added a hero section and cta button

Prompt 3:

How to resolve a merge conflict in app/page.tsx?

Git Best Practices

Commit often - small, frequent commits > rare, large ones Good commit messages - explain WHAT and WHY Branch per feature - one feature = one branch Pull before push - always git pull before git push Don't commit secrets - .env in .gitignore Code review - use Pull Requests Main always works - don't merge broken code into main

Don't commit node_modules/ - huge, unnecessary Don't push --force on main (unless you absolutely must) Don't commit WIP without description - describe what's in progress

Summary

Git - version control system, the ship's log of code GitHub - platform for storing code online git init - repository initialization git add - adding files to stage git commit - saving changes (snapshot) git push - sending commits to GitHub git pull - downloading changes from GitHub git branch - creating branches git merge - merging changes between branches Pull Request - request for review and merge .gitignore - files ignored by Git Cursor Source Control - GUI for Git in the editor

Next steps: In the following modules we'll use Git to:

• Save project progress
• Create feature branches
• Deploy to Vercel (Vercel connects with GitHub!)

See you there!