We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

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/download/win

During installation choose:

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

Mac:

Git is already installed! Check:

1git --version

If not present, install via Homebrew:

1brew install git

Linux (Ubuntu/Debian):

1sudo apt-get update
2sudo apt-get install git

Configuring Git - First Steps ⚙️

After installation, configure Git with your details:

1git config --global user.name "Jack Sparrow"
2git 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:

1git 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:

1ls -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:

1cd my-project
2git init

This will create a 

.git/
folder and initialize the repository.

Basic Git Commands 🧭

1. git status - Repository state

Checks what has changed:

1git status

You'll see:

  • Untracked files - new files that Git doesn't track
  • Modified files - changed files
  • Staged files - files ready for commit
1On branch main
2Changes not staged for commit:
3  modified:   app/page.tsx
4
5Untracked files:
6  app/pirates/page.tsx

2. git add - Adding files to staging

Staging area is a "waiting room" before commit.

1# Add one file
2git add app/page.tsx
3
4# Add all files
5git add .
6
7# Add all .tsx files
8git 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.

1git 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:

1git log

You'll see:

1commit a3f5b8c (HEAD -> main)
2Author: Jack Sparrow <jack@blackpearl.com>
3Date:   Mon Nov 24 10:30:00 2024 +0100
4
5    Add pirate landing page
6
7commit b2e4a9d
8Author: Jack Sparrow <jack@blackpearl.com>
9Date:   Mon Nov 24 09:15:00 2024 +0100
10
11    Initial commit

Shortcuts:

1# Short version (1 line per commit)
2git log --oneline
3
4# Last 5 commits
5git log -5
6
7# With branch graph
8git log --graph --oneline

5. git diff - See changes

Compares current files with staged/committed version:

1# Changes not added to stage
2git diff
3
4# Changes in staged files
5git diff --staged

You'll see:

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

.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:

1# .gitignore
2node_modules/
3.next/
4.env.local
5.env
6.DS_Store
7*.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

1# Create a new branch
2git branch feature/landing-page
3
4# Switch to the new branch
5git checkout feature/landing-page
6
7# Or one command (create + switch)
8git checkout -b feature/landing-page

Naming convention:

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

Switching between branches

1# See all branches
2git branch
3
4# Switch to main
5git checkout main
6
7# Switch to feature branch
8git checkout feature/landing-page

Merging branches

When you finish a feature, you merge changes into 

main
:

1# Switch to main
2git checkout main
3
4# Merge changes from feature branch
5git 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:

1git 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:

1# Add remote repository
2git remote add origin https://github.com/username/krakens-call.git
3
4# Rename branch to main (if needed)
5git branch -M main
6
7# Push code to GitHub
8git 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:

1# Push all commits to origin/main
2git push
3
4# Push a specific branch
5git push origin feature/landing-page

git pull - Downloading changes

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

1# Download changes from GitHub and merge into local branch
2git pull
3
4# Pull from a specific branch
5git 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:

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

Workflow with Git and GitHub 🔄

Typical pirate workflow:

1. New feature

1# Create branch
2git checkout -b feature/pirate-profile
3
4# Work on code...
5# Edit app/profile/page.tsx
6
7# Check changes
8git status
9git diff
10
11# Add to stage
12git add app/profile/
13
14# Commit
15git commit -m "Add pirate profile page with stats"
16
17# Push to GitHub
18git 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

1# Switch to main
2git checkout main
3
4# Download changes from GitHub
5git pull
6
7# Delete local feature branch
8git branch -d feature/pirate-profile

Undoing Changes - When Something Goes Wrong ⏪

Undo changes in a file (not committed)

1# Restore file to last commit
2git checkout -- app/page.tsx
3
4# Restore all files
5git checkout -- .

Remove files from stage (git add)

1# Remove from stage, keep changes in file
2git reset app/page.tsx
3
4# Remove everything from stage
5git reset

Undo last commit (locally)

1# Undo commit, keep changes in files
2git reset --soft HEAD~1
3
4# Undo commit, delete changes in files (DANGER!)
5git 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:

1# Create a new commit that reverses the changes
2git revert a3f5b8c
3
4# Push
5git 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 (Cmd/Ctrl + Shift + G)
  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:

1How to undo the last commit in Git?

Prompt 2:

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

Prompt 3:

1How 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! 🚀

Go to CodeWorlds→