Useful Commands

Quick reference cheat sheet for the most common commands you'll use daily.

How to Use This Guide

Copy and paste commands directly
Read comments (text after #) for explanations
Bookmark this page for quick access
Practice regularly to build muscle memory

npm Commands

Development

# Start development server
npm run dev
# Opens http://localhost:3000
# Hot reloading enabled (auto-refresh on save)

# Stop dev server
# Press Ctrl+C in terminal

# Build for production
npm run build
# Creates optimized .next/ folder
# Run this to test before deploying

# Start production server (after build)
npm start

Package Management

# Install all dependencies
npm install
# Run after: cloning repo, pulling changes with new packages

# Install specific package
npm install package-name
# Example: npm install react-icons

# Install as dev dependency (only needed for development)
npm install --save-dev package-name
# Example: npm install --save-dev @types/node

# Uninstall package
npm uninstall package-name

# Update all packages
npm update

# Check for outdated packages
npm outdated

# Clean install (delete node_modules and reinstall)
rm -rf node_modules package-lock.json
npm install

Troubleshooting

# Clear npm cache
npm cache clean --force

# Fix package vulnerabilities
npm audit fix

# See installed packages
npm list --depth=0

Git Commands

Getting Started

# Initialize new git repository
git init

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

# Check repository status
git status
# Shows: modified files, staged files, current branch

# View changes in files
git diff
# Shows what you changed (not yet staged)

git diff --staged
# Shows what you staged (ready to commit)

Making Changes

# Stage specific file
git add path/to/file.tsx

# Stage all changes
git add .

# Unstage file (keep changes)
git reset path/to/file.tsx

# Discard changes to file (dangerous!)
git checkout -- path/to/file.tsx

# Discard all changes (dangerous!)
git reset --hard HEAD

Committing

# Commit staged changes
git commit -m "Add contact form to homepage"

# Stage and commit in one step
git commit -am "Update navigation links"

# Amend last commit (change message or add forgotten files)
git commit --amend -m "New commit message"

# View commit history
git log

# View concise commit history
git log --oneline

# View specific file's history
git log -- path/to/file.tsx

Branching

# List all branches
git branch

# Create new branch
git branch feature/new-button

# Switch to branch
git checkout feature/new-button

# Create and switch to new branch (shortcut)
git checkout -b feature/new-button

# Delete branch (after merged)
git branch -d feature/new-button

# Force delete branch (unmerged changes)
git branch -D feature/new-button

# Rename current branch
git branch -m new-branch-name

Remote Operations

# View remote repositories
git remote -v

# Add remote repository
git remote add origin https://github.com/username/repo.git

# Fetch changes from remote (doesn't merge)
git fetch origin

# Pull changes from remote (fetch + merge)
git pull origin main

# Push to remote
git push origin branch-name

# Push and set upstream (first time)
git push -u origin branch-name

# Force push (dangerous! overwrites remote)
git push --force origin branch-name

Merging and Rebasing

# Merge branch into current branch
git merge feature/new-button

# Abort merge if there are conflicts
git merge --abort

# Rebase current branch onto main
git rebase main

# Continue rebase after resolving conflicts
git rebase --continue

# Abort rebase
git rebase --abort

Stashing

# Save changes temporarily
git stash

# Save with message
git stash save "Work in progress on feature X"

# List stashes
git stash list

# Apply most recent stash (keeps in stash list)
git stash apply

# Apply and remove most recent stash
git stash pop

# Apply specific stash
git stash apply stash@{0}

# Delete stash
git stash drop stash@{0}

# Clear all stashes
git stash clear

Inspection

# Show changes in specific commit
git show commit-hash

# Search for text in commit messages
git log --grep="search term"

# Find who changed each line of a file
git blame path/to/file.tsx

# Show all branches with last commit
git branch -v

GitHub CLI (gh)

Installation

# Mac (using Homebrew)
brew install gh

# Windows (using Winget)
winget install GitHub.cli

# Login
gh auth login

Pull Requests

# Create pull request
gh pr create --title "Add new feature" --body "Description here"

# Create PR interactively (prompts for details)
gh pr create

# List pull requests
gh pr list

# View specific PR
gh pr view 123

# Check out PR locally
gh pr checkout 123

# Review PR
gh pr review 123 --approve
gh pr review 123 --comment -b "Looks good!"
gh pr review 123 --request-changes -b "Please fix X"

# Merge PR
gh pr merge 123

# Close PR without merging
gh pr close 123

Issues

# List issues
gh issue list

# Create issue
gh issue create --title "Bug: Form not submitting" --body "Details..."

# View issue
gh issue view 42

# Close issue
gh issue close 42

Repository

# View repository in browser
gh repo view --web

# Clone repository
gh repo clone username/repo

# Fork repository
gh repo fork

Terminal / Shell Commands

# Print current directory
pwd

# List files in current directory
ls

# List with details (size, date, permissions)
ls -la

# Change directory
cd path/to/folder

# Go to parent directory
cd ..

# Go to home directory
cd ~

# Go to previous directory
cd -

# Go to root of project
cd /Users/username/k12worx-jamboree

File Operations

# Create directory
mkdir folder-name

# Create nested directories
mkdir -p path/to/nested/folder

# Create empty file
touch file-name.txt

# Copy file
cp source.txt destination.txt

# Copy directory recursively
cp -r source-folder destination-folder

# Move/rename file
mv old-name.txt new-name.txt

# Move file to directory
mv file.txt path/to/directory/

# Delete file
rm file.txt

# Delete directory and contents (dangerous!)
rm -rf folder-name

# View file contents
cat file.txt

# View file with pagination
less file.txt
# Press 'q' to quit

# View first 10 lines
head file.txt

# View last 10 lines
tail file.txt

# Follow file updates (useful for logs)
tail -f logfile.txt

Search

# Search for files by name
find . -name "*.tsx"

# Search file contents for text
grep "search term" file.txt

# Search recursively in all files
grep -r "search term" .

# Case-insensitive search
grep -i "search term" file.txt

# Count matches
grep -c "search term" file.txt

System

# Clear terminal screen
clear
# Or press Cmd+K (Mac) / Ctrl+L (Windows)

# Show command history
history

# Run previous command
!!

# Search command history
# Press Ctrl+R, then type to search

# Show disk usage
df -h

# Show folder size
du -sh folder-name

# Process list
ps aux

# Kill process by PID
kill 1234

# Kill process by name
pkill process-name

# Find process using port
lsof -i :3000

# Kill process on port 3000
lsof -ti:3000 | xargs kill

Next.js Specific

Page Generation

# Generate static export
npm run build
npm run export

# Analyze bundle size
npm run build
# Look for output showing page sizes

# Type check without building
npx tsc --noEmit

Cleaning

# Delete build artifacts
rm -rf .next

# Full clean (build artifacts + dependencies)
rm -rf .next node_modules package-lock.json
npm install

Quick Workflows

Starting Work on New Feature

# 1. Get latest code
git checkout main
git pull origin main

# 2. Create feature branch
git checkout -b feature/new-contact-form

# 3. Start dev server
npm run dev

# 4. Make changes...
# 5. Test changes in browser

Saving and Committing Work

# 1. Check what changed
git status
git diff

# 2. Stage changes
git add .

# 3. Commit with message
git commit -m "Add contact form with validation"

# 4. Push to remote
git push -u origin feature/new-contact-form

Creating Pull Request

# 1. Ensure changes are committed and pushed
git status

# 2. Create PR using GitHub CLI
gh pr create

# Or visit GitHub in browser:
# https://github.com/username/repo/pulls

Updating Your Branch

# 1. Get latest from main
git checkout main
git pull origin main

# 2. Switch back to your branch
git checkout feature/your-branch

# 3. Merge main into your branch
git merge main

# 4. Resolve any conflicts
# 5. Push updated branch
git push origin feature/your-branch

Fixing Merge Conflicts

# 1. Pull latest changes
git pull origin main
# If conflicts occur:

# 2. See which files have conflicts
git status

# 3. Open each conflicted file
# Look for markers:
# <<<<<<< HEAD
# Your changes
# =======
# Their changes
# >>>>>>> main

# 4. Edit file to resolve conflict
# Remove conflict markers
# Keep what you want

# 5. Mark as resolved
git add path/to/resolved-file.tsx

# 6. Complete merge
git commit -m "Resolve merge conflict"

# 7. Push
git push origin your-branch

Keyboard Shortcuts

Terminal

# Mac
Cmd+K         # Clear terminal
Cmd+T         # New tab
Cmd+W         # Close tab
Cmd+N         # New window

# Windows/Linux
Ctrl+L        # Clear terminal
Ctrl+Shift+T  # New tab
Ctrl+Shift+W  # Close tab

# Universal
Ctrl+C        # Stop running command
Ctrl+D        # Exit terminal
Ctrl+A        # Jump to line start
Ctrl+E        # Jump to line end
Ctrl+R        # Search command history
Tab           # Autocomplete
Up Arrow      # Previous command

VS Code

Cmd/Ctrl+P         # Quick file open
Cmd/Ctrl+Shift+P   # Command palette
Cmd/Ctrl+B         # Toggle sidebar
Cmd/Ctrl+J         # Toggle terminal
Cmd/Ctrl+/         # Toggle comment
Cmd/Ctrl+D         # Select next occurrence
Cmd/Ctrl+F         # Find
Cmd/Ctrl+Shift+F   # Find in files

Common Command Combinations

Fresh Start (When Everything is Broken)

# Stop dev server (Ctrl+C)
# Then:
git status                  # See what you changed
rm -rf .next node_modules   # Delete build and packages
npm install                 # Reinstall
npm run dev                 # Start fresh

Before Submitting PR

git status                  # Check changes
npm run build               # Ensure builds
git add .                   # Stage all
git commit -m "Message"     # Commit
git push                    # Push
gh pr create                # Create PR

Update Dependencies

npm outdated                # See what's outdated
npm update                  # Update all
npm run build               # Test build works
npm run dev                 # Test dev works

Tips

Use Tab Completion

Type first few letters, press Tab:

cd web[Tab]       # Completes to 'website'
git check[Tab]    # Completes to 'git checkout'

Use Command History

Press Up Arrow to cycle through previous commands.

Create Aliases (Optional)

Add to ~/.zshrc or ~/.bashrc:

alias dev="npm run dev"
alias build="npm run build"
alias gs="git status"
alias gc="git commit -m"
alias gp="git push"

Then use:

dev          # Instead of npm run dev
gs           # Instead of git status