Introduction to Git

Without Git:
- AI generates code
- Something breaks
- No way to undo
- Start over

With Git:
- AI generates code
- Something breaks
- git checkout . (undo all changes)
- Try again

main (stable)
├── feature/new-ui (experimenting)
├── feature/auth (in progress)
└── fix/bug-123 (quick fix)

git push → Vercel builds → Site deploys

my-project/           # Repository
├── .git/             # Git's hidden folder (don't touch)
├── src/
├── package.json
└── README.md

Commit History:
├── abc123 "Add user authentication"
├── def456 "Fix login bug"
├── ghi789 "Update homepage design"
└── jkl012 "Initial commit"

main ─────●─────●─────●─────●
              \           /
feature ───────●─────●───┘

● = commit

Local (your computer)  ←→  Remote (GitHub)
     git push →
     ← git pull

# Configure identity (once)
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

# Initialize new repo
git init

# Clone existing repo
git clone https://github.com/user/repo.git

# Check status
git status

# Stage changes
git add .                    # Add all files
git add src/app/page.tsx     # Add specific file

# Commit changes
git commit -m "Add homepage"

# Push to remote
git push

# View commit history
git log

# Compact log
git log --oneline

# View specific file history
git log -- src/app/page.tsx

git status

On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:           # Staged (ready to commit)
  modified:   src/app/page.tsx

Changes not staged for commit:     # Modified but not staged
  modified:   src/components/Header.tsx

Untracked files:                   # New files Git doesn't know about
  src/components/Footer.tsx

git status
# See what changed

git add .
# Or selectively: git add src/specific-file.tsx

git commit -m "Describe what changed"

git push

# Discard changes to specific file
git checkout -- src/app/page.tsx

# Discard ALL unstaged changes
git checkout .

# Unstage file (keep changes)
git reset HEAD src/app/page.tsx

# Unstage all (keep changes)
git reset HEAD

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

# Undo commit, keep changes unstaged
git reset HEAD~1

# Undo commit, discard changes (dangerous!)
git reset --hard HEAD~1

Lovable:
Settings → GitHub → Connect Repository

Bolt.new:
Export → GitHub → Creates repo automatically

# In terminal within editor
git add .
git commit -m "AI-generated feature"
git push

# Claude Code workflow
claude "Add authentication to this app"
# Claude makes changes
git diff  # Review changes
git add .
git commit -m "Add authentication (via Claude)"

# Explain a command
gh copilot explain "git rebase -i HEAD~3"

# Suggest a command
gh copilot suggest "undo last commit but keep changes"

# In GitHub Issues, assign to @copilot
# Copilot works asynchronously and creates a PR
# Review and merge when ready

git pull                    # Get latest changes
git status                  # Check local state

git add .
git commit -m "Complete user profile feature"
git push

git add src/fix.tsx
git commit -m "Fix typo in header"
git push

# Before experimenting
git stash                   # Save current changes

# Experiment with AI
# ...

# If experiment fails
git checkout .              # Discard experiment

# Restore saved changes
git stash pop

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

# Good
git commit -m "Add user authentication with Supabase"
git commit -m "Fix login redirect bug"
git commit -m "Update homepage hero section"

# Bad
git commit -m "update"
git commit -m "stuff"
git commit -m "wip"

Too few commits:
├── "Built entire app"
└── Hard to undo specific changes

Too many commits:
├── "Add button"
├── "Change button color"
├── "Move button"
└── Cluttered history

Just right:
├── "Add user authentication"
├── "Add profile page"
├── "Fix auth redirect issue"
└── Logical, reviewable chunks

# Check what you're pushing
git status
git diff --staged

# Run tests/build
npm run build

# Then push
git push