K
K12worX Education501(c)(3) Public Charity
Jamboree

Making Commits

Commits are snapshots of your code at a point in time. Learn how to create meaningful commits that tell the story of your work.

What You'll Learn

  • What a commit is and why it matters
  • How to stage and commit changes
  • Writing good commit messages
  • Atomic commits vs large commits
  • Viewing and understanding commit history

What is a Commit?

A commit is a saved snapshot of your project at a specific moment.

Think of It Like...

Save points in a video game:

  • You can return to any save point
  • Each save has a description
  • You can see what changed since last save

Chapters in a book:

  • Each commit is a chapter
  • Together they tell a story
  • You can jump to any chapter

What's in a Commit?

Each commit contains:

  1. Changes: What files were modified/added/deleted
  2. Message: Description of what changed
  3. Author: Who made the change
  4. Timestamp: When it happened
  5. Hash: Unique ID (like a3f2b91)

The Three-Step Commit Process

Step 1: Make Changes

Edit files in your code:

# You edit app/page.tsx
# You add a new file components/Button.tsx

Step 2: Stage Changes

Tell Git which changes to include:

git add app/page.tsx components/Button.tsx

Step 3: Commit

Save the snapshot with a message:

git commit -m "Add reusable Button component to homepage"

Now it's saved forever!

Staging Changes

What is Staging?

Staging area = changes you want to include in next commit

Why stage?

  • Choose which changes to commit
  • Group related changes together
  • Leave unrelated changes for later

Stage All Changes

git add .

Stages everything in current directory and subdirectories.

Stage Specific Files

# One file
git add app/page.tsx

# Multiple files
git add app/page.tsx components/Header.tsx

# All files of a type
git add *.tsx

Stage Parts of a File (Advanced)

git add -p filename

Interactive mode: Choose which chunks to stage.

Check What's Staged

git status

Output:

Changes to be committed:
  modified:   app/page.tsx
  new file:   components/Button.tsx

Changes not staged for commit:
  modified:   README.md

Unstage Changes

# Unstage specific file
git reset HEAD app/page.tsx

# Unstage everything
git reset HEAD

Making Commits

Basic Commit

git commit -m "Your commit message here"

Commit with Detailed Message

git commit

Opens text editor for multi-line message:

Add user authentication system

- Implement login page with form validation
- Add JWT token generation
- Create protected route middleware
- Update user model with password hashing

First line = summary (< 50 chars) Blank line Body = details (why, what, how)

Amend Last Commit

Made a typo? Forgot to add a file?

# Add forgotten file
git add forgotten-file.tsx

# Amend the last commit
git commit --amend

⚠️ Warning: Only amend if you haven't pushed yet!

Skip Staging (Quick Commit)

# Stage and commit all tracked files
git commit -am "Quick update"

Only works for modified files (not new files).

Writing Good Commit Messages

The Golden Rules

1. Use imperative mood:

# ✅ Good
"Add dark mode toggle"
"Fix navigation bug on mobile"
"Update homepage headline"

# ❌ Bad
"Added dark mode toggle"
"Fixing navigation bug"
"Homepage headline updated"

2. Keep summary under 50 characters:

# ✅ Good
"Add contact form validation"

# ❌ Too long
"Add contact form validation to ensure users enter valid email addresses and phone numbers"

3. Capitalize first letter:

# ✅ Good
"Add contact form"

# ❌ Bad
"add contact form"

4. No period at end:

# ✅ Good
"Fix mobile menu bug"

# ❌ Bad
"Fix mobile menu bug."

5. Describe WHAT and WHY, not HOW:

# ✅ Good
"Add caching to improve page load speed"

# ❌ Bad
"Use React.memo and useMemo hooks in ProductList component"

Message Templates

New feature:

"Add {feature name}"
"Implement {feature}"
"Create {component/page}"

Bug fix:

"Fix {problem}"
"Resolve {issue}"
"Correct {bug}"

Update:

"Update {what}"
"Improve {aspect}"
"Enhance {feature}"

Remove:

"Remove {what}"
"Delete {obsolete feature}"

Refactor:

"Refactor {component} for clarity"
"Simplify {logic}"

Real Examples from Our Project

Good commits:

"Add Learning Guide section to main navigation"
"Fix broken links in footer"
"Update color scheme to match brand guidelines"
"Improve mobile responsiveness of hero section"
"Remove deprecated ContactForm component"

Bad commits:

"changes"
"fix stuff"
"update"
"asdf"
"WIP"

Atomic Commits

What is an Atomic Commit?

One logical change per commit.

Example:

  • ✅ Commit 1: Add contact form
  • ✅ Commit 2: Add form validation
  • ✅ Commit 3: Style form with Tailwind

Not:

  • ❌ One commit: Add form + validation + styling + fix nav bug + update colors

Why Atomic Commits?

Easier to review:

  • Clear what each commit does
  • Reviewer understands intention

Easier to revert:

  • If commit breaks things, undo just that change
  • Don't lose other good work

Better history:

  • Git log tells a clear story
  • Find when specific feature added

How to Make Atomic Commits

Work in small chunks:

# Add component
git add components/Button.tsx
git commit -m "Add reusable Button component"

# Add tests
git add components/Button.test.tsx
git commit -m "Add tests for Button component"

# Use in page
git add app/page.tsx
git commit -m "Use Button component on homepage"

Not:

# Everything at once
git add .
git commit -m "Add button component and tests and use it on homepage and fix some bugs"

Viewing Commit History

Basic Log

git log

Shows:

  • Commit hash
  • Author
  • Date
  • Message

Compact Log

git log --oneline

One line per commit:

a3f2b91 Add contact form validation
f7e8c42 Create contact form component
2b9d4a1 Add Contact page route

Pretty Log

git log --oneline --graph --decorate

Visual branch structure:

* a3f2b91 (HEAD -> feature/contact) Add validation
* f7e8c42 Create form component
| * 5c8a3d2 (main) Update homepage
|/
* 2b9d4a1 Add Contact page

Show Specific Commit

git show a3f2b91

Shows:

  • Full commit details
  • Exact changes made

Search Commits

# By message
git log --grep="contact"

# By author
git log --author="Your Name"

# By file
git log app/page.tsx

Common Commit Scenarios

Scenario 1: Regular Work

# Make changes
# ... edit files ...

# Stage and commit
git add .
git commit -m "Add dark mode toggle to settings page"

Scenario 2: Multiple Logical Changes

# Change 1: Update text
git add app/page.tsx
git commit -m "Update homepage headline"

# Change 2: Fix bug
git add components/Navigation.tsx
git commit -m "Fix navigation menu on mobile"

# Change 3: Add feature
git add components/SearchBar.tsx
git commit -m "Add search functionality to header"

Scenario 3: Forgot to Add File

git commit -m "Add contact form"
# Oops! Forgot the CSS file

git add app/contact/styles.css
git commit --amend --no-edit
# Now the CSS is included in the same commit

Scenario 4: Typo in Message

git commit -m "Add contcat form"
# Typo: "contcat" should be "contact"

git commit --amend -m "Add contact form"
# Message fixed!

What NOT to Commit

Temporary Files

.DS_Store
Thumbs.db
*.swp

Dependencies

node_modules/
.pnpm-store/

Build Artifacts

.next/
dist/
build/
out/

Environment Variables

.env
.env.local
.env.production

Personal Config

.vscode/settings.json
.idea/
*.iml

.gitignore already excludes these!

Undoing Commits

Undo Last Commit (Keep Changes)

git reset --soft HEAD~1

Result:

  • Commit removed from history
  • Changes still in staging area
  • Can recommit with better message

Undo Last Commit (Discard Changes)

git reset --hard HEAD~1

⚠️ Warning: This deletes your work! Use carefully.

Undo Multiple Commits

# Undo last 3 commits
git reset --soft HEAD~3

Create Reverse Commit

git revert HEAD

Creates new commit that undoes the last one.

Safer than reset (doesn't rewrite history).

Commit Best Practices

1. Commit Often

Do:

  • Commit every logical change
  • Commit when tests pass
  • Commit at natural stopping points

Don't:

  • Work for hours without committing
  • Wait until "everything is perfect"
  • Commit broken code

2. Test Before Committing

# Run dev server
npm run dev

# Check in browser
# ... verify changes work ...

# Then commit
git add .
git commit -m "Add feature"

3. Review Changes Before Committing

# See what you changed
git diff

# See what's staged
git diff --staged

# Then commit
git commit -m "Message"

4. One Concern Per Commit

✅ Good:

  • Commit 1: Add component
  • Commit 2: Style component
  • Commit 3: Add tests

❌ Bad:

  • Commit 1: Add component + style + tests + fix unrelated bug

5. Don't Commit Debugging Code

Remove before committing:

// ❌ Don't commit these
console.log('DEBUG:', data)
debugger
// TODO: remove this hack

VS Code Commit Interface

Using Source Control Panel

  1. Open Source Control (icon in sidebar)
  2. See changed files in list
  3. Click + to stage individual files
  4. Or click + on "Changes" to stage all
  5. Enter commit message in text box
  6. Click ✓ checkmark to commit

Viewing History

  1. Click clock icon in Source Control
  2. See commit history
  3. Click commit to see changes

Quick Reference

Stage changes:

git add .                    # Stage all
git add filename             # Stage specific file
git add *.tsx                # Stage pattern

Make commit:

git commit -m "Message"      # Simple commit
git commit                   # Detailed commit (opens editor)
git commit -am "Message"     # Stage and commit tracked files

Amend commit:

git commit --amend           # Change last commit
git commit --amend --no-edit # Add to last commit, keep message

View history:

git log                      # Full history
git log --oneline            # Compact
git log --graph              # Visual branches
git show HEAD                # Show last commit

Undo commits:

git reset --soft HEAD~1      # Undo, keep changes
git reset --hard HEAD~1      # Undo, discard changes
git revert HEAD              # Create reverse commit

Hands-On Exercise

Exercise: Practice Commits

  1. Create branch:
git checkout -b practice/commits
  1. Make first change:
# Edit app/page.tsx - change some text
git add app/page.tsx
git commit -m "Update homepage headline"
  1. Make second change:
# Edit the same file - change different text
git add app/page.tsx
git commit -m "Update homepage subtitle"
  1. View history:
git log --oneline
  1. See last commit details:
git show HEAD
  1. Clean up:
git checkout main
git branch -D practice/commits

What's Next

Now that you know how to make commits, let's learn how to share your work through pull requests:

Understanding Pull Requests →