DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. Git Strategies for Frontend Teams: Branching and CI/CD
XLinkedInReddit
MediumFrontend Engineering

Git Strategies for Frontend Teams: Branching and CI/CD

D
DevPrep Team
February 10, 2026·2 min read·0
Table of Contents
  • Branching Strategies
  • GitHub Flow (Recommended for most teams)
  • Trunk-Based Development (Google's approach)
  • Commit Conventions
  • PR Best Practices
  • CI Pipeline
  • Useful Git Commands

Good Git practices prevent deployment disasters. Here's what works at Google-scale frontend teams.

Branching Strategies

GitHub Flow (Recommended for most teams)

main ─────────────────────────────────── (always deployable)
      \\                         /
       feature/new-header ────── (PR + review + merge)

Simple: main is always deployable, feature branches for everything, deploy on merge.

Trunk-Based Development (Google's approach)

main ─────────────────────────────────── (deploy continuously)
      \\     /    \\     /    \\     /
       short-lived branches (< 1 day)

Everyone commits to main (or very short-lived branches). Feature flags control visibility. Requires strong CI.

Commit Conventions

// Conventional Commits
feat: add user avatar upload
fix: resolve memory leak in dashboard
refactor: simplify auth middleware
docs: update API documentation
test: add unit tests for cart service
chore: update dependencies
perf: optimize image loading pipeline

// With scope
feat(auth): add social login with Google
fix(cart): prevent duplicate item addition

PR Best Practices

  • Keep PRs small (< 400 lines). Large PRs get rubber-stamped, not reviewed.
  • Write descriptive PR titles and descriptions
  • Include screenshots/videos for UI changes
  • Link to the issue/ticket
  • Self-review before requesting review

CI Pipeline

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run lint        # ESLint + Prettier
      - run: npm run typecheck   # TypeScript
      - run: npm run test        # Unit tests
      - run: npm run build       # Build check
      
  preview:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - run: npm run build
      - uses: deploy-preview-action  # Deploy PR preview

Useful Git Commands

# Interactive rebase (clean up commits before merge)
git rebase -i HEAD~3

# Stash changes (switch context quickly)
git stash
git stash pop

# Cherry-pick (grab specific commit)
git cherry-pick abc1234

# Bisect (find which commit introduced a bug)
git bisect start
git bisect bad          # Current commit is bad
git bisect good v1.0    # This version was good
# Git binary searches for the breaking commit

Related Articles

MediumFrontend Engineering

System Design #12: Design a Multi-Step Form Wizard

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • Branching Strategies
  • GitHub Flow (Recommended for most teams)
  • Trunk-Based Development (Google's approach)
  • Commit Conventions
  • PR Best Practices
  • CI Pipeline
  • Useful Git Commands

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.