GitHub Basics — Repository, Branch, Pull Request

Why GitHub Matters

GitHub is the largest code hosting platform in the world, used by over 100 million developers and virtually every company. It provides version control, collaboration tools, CI/CD, and project management. Mastering GitHub is essential for any modern developer.

Why this matters for your career:

• GitHub is the standard for code collaboration in the industry
• Your GitHub profile is your technical resume
• Pull requests and code review are daily workflows in every engineering team
• GitHub Actions enables powerful CI/CD pipelines

Repositories

A repository (repo) is a container for your project's code, documentation, and history.

Create a Repository

# Create locally, then push to GitHub
echo "# my-project" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/yourusername/my-project.git
git push -u origin main

Or create on GitHub first, then clone:

git clone https://github.com/yourusername/my-project.git
cd my-project
echo "Hello" > hello.txt
git add .
git commit -m "add hello"
git push

README.md

The README is the first thing people see. Include:

• Project name and description
• Installation instructions
• Usage examples
• Configuration guide
• License information

# My Project

A brief description of what this project does.

## Installation

```bash
npm install my-project

Usage

import myLib from 'my-project';
myLib.doSomething();

## Branching

Branches let you work on features or fixes independently without affecting the main codebase.

```bash
# Create and switch to a new branch
git checkout -b feature/add-login

# Work on the branch
echo "login code" > login.js
git add login.js
git commit -m "add login feature"

# Push the branch to GitHub
git push -u origin feature/add-login

Branch Naming Convention

| Branch Type | Prefix | Example | |-------------|--------|--------| | Feature | feature/ | feature/user-profile | | Bug fix | fix/ | fix/login-error | | Hotfix | hotfix/ | hotfix/security-vulnerability | | Release | release/ | release/v1.2.0 | | Chore | chore/ | chore/update-dependencies |

Pull Requests

A Pull Request (PR) proposes changes from one branch to another. It triggers code review and discussion before merging.

Creating a PR

1. Push your feature branch to GitHub
2. Go to your repository on GitHub
3. Click "Compare & pull request"
4. Write a clear title and description
5. Add reviewers
6. Click "Create pull request"

Good PR Description

## Description

Adds user login functionality with email/password authentication.

## Changes

- Added login form component
- Created auth API endpoint
- Added JWT token handling
- Added session management

## Testing

- [x] Unit tests for login API
- [x] Integration test for login flow
- [x] Manual testing in Chrome and Safari

## Screenshots

[Attach screenshots if UI changes]

## Related Issues

Closes #123

PR Checklist

| Item | Purpose | |------|---------| | Clear title | Summarize the change | | Linked issue | Connect to the tracked work | | Code changes | What files changed and why | | Tests | Evidence that changes work | | Screenshots | Visual proof for UI changes | | Reviewers assigned | Who should review |

Code Review

Code review is a collaborative process where team members examine code changes before merging.

Review Checklist

| Check | What to Look For | |-------|-----------------| | Correctness | Does the code do what it claims? | | Security | Any vulnerabilities (XSS, SQL injection)? | | Performance | Any obvious performance issues? | | Maintainability | Is the code readable and well-structured? | | Tests | Are there adequate tests? | | Consistency | Follows project coding standards? | | Edge cases | Handles errors and edge cases? |

Review Comments Etiquette

| ✅ Good Comment | ❌ Bad Comment | |----------------|---------------| | "Consider using async/await for readability" | "This code is bad" | | "This function could be extracted for reuse" | "Rewrite this whole thing" | | "There's a potential null reference on line 42" | "This will crash lol" |

GitHub Issues

Issues track bugs, feature requests, and tasks.

## Bug Report

**Description:** Clicking the submit button does nothing on mobile.

**Steps to reproduce:**
1. Open the app on an iPhone 14
2. Fill in the form
3. Click Submit
4. Nothing happens

**Expected:** Form should submit and show success message.

**Environment:** iOS 17, Safari, iPhone 14

Issue Labels

| Label | Meaning | |-------|---------| | bug | Something isn't working | | enhancement | New feature request | | good first issue | Good for newcomers | | help wanted | Looking for contributors | | question | Further information is requested | | documentation | Improvements or additions to documentation |

GitHub Actions (Basic)

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Use Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'
    - run: npm ci
    - run: npm test

Summary

GitHub is the foundation of modern software development. Repositories store your code, branches enable parallel development, pull requests facilitate code review, and GitHub Actions automates testing and deployment.

Key takeaways:

• Repository: stores your project's code and history
• Branches: isolate feature development from the main codebase
• Pull Requests: propose changes with code review before merging
• Good PRs have clear titles, descriptions, tests, and screenshots
• Code review checks correctness, security, performance, and style
• Issues track bugs, features, and tasks with labels
• GitHub Actions automates CI/CD pipelines

What's Next: Deploy to Vercel

The next chapter teaches you to deploy a project to Vercel — connecting your GitHub repository, configuring settings, and deploying with one click.