Git Workflow and Version Control for Full-Stack Projects

Version control is not optional in professional development — it is as fundamental as saving your work. Git tracks every change to your codebase, lets you experiment safely on branches, collaborate with teammates without overwriting each other’s work, and roll back to any previous state. For a MEAN Stack project where frontend and backend are developed in parallel, a clear Git workflow prevents the two tracks from colliding and ensures the main branch always contains working code. In this lesson you will set up Git for the monorepo, understand branching strategy, write meaningful commit messages, configure a proper .gitignore, and establish the workflow that will serve you throughout the rest of this course and in real team environments.

Git Branching Strategies #

Branch Naming Conventions #

Conventional Commits — Commit Message Format #

Setup — Git for the MEAN Stack Project #

# ── Initialize Git for the monorepo ──────────────────────────────────────
cd task-manager
git init
git branch -M main     # rename default branch to main

# ── Configure Git (if not done globally) ─────────────────────────────────
git config --global user.name  "Your Name"
git config --global user.email "your@email.com"
git config --global init.defaultBranch main
git config --global core.autocrlf input  # macOS/Linux — normalise line endings

# ── Create the .gitignore ─────────────────────────────────────────────────
cat > .gitignore << 'EOF'
# Dependencies
node_modules/
.npm/

# Environment variables — NEVER commit these
.env
.env.local
.env.*.local

# Angular build output
frontend/dist/
frontend/.angular/

# IDE and OS files
.vscode/settings.json
.idea/
.DS_Store
Thumbs.db

# Logs
*.log
npm-debug.log*

# Test coverage
coverage/

# MongoDB local data
data/db/
EOF

# ── First commit ──────────────────────────────────────────────────────────
git add .
git commit -m "chore: initial MEAN Stack project scaffold

- Add monorepo structure with frontend/ and backend/
- Configure .gitignore for Node, Angular, and environment files
- Add root package.json with concurrently dev scripts"

# ── Connect to GitHub ─────────────────────────────────────────────────────
# Create a new repo on GitHub first, then:
git remote add origin https://github.com/yourusername/task-manager.git
git push -u origin main

Daily Development Workflow — GitHub Flow #

# ── Start a new feature ───────────────────────────────────────────────────
git checkout main
git pull origin main                        # always pull latest first

git checkout -b feature/task-crud-api       # create and switch to feature branch

# ── Develop the feature ───────────────────────────────────────────────────
# ... write code ...
git status                                  # see what changed
git diff                                    # see exact changes
git add backend/src/routes/task.routes.js
git add backend/src/controllers/task.controller.js
git commit -m "feat(tasks): add GET and POST API endpoints"

# ... write more code ...
git add .
git commit -m "feat(tasks): add PUT and DELETE endpoints with auth protection"

# ── Push and open a Pull Request ─────────────────────────────────────────
git push origin feature/task-crud-api

# Go to GitHub → New Pull Request → Merge into main

# ── After PR is merged — clean up ────────────────────────────────────────
git checkout main
git pull origin main
git branch -d feature/task-crud-api         # delete local branch
git push origin --delete feature/task-crud-api  # delete remote branch

# ── Useful Git commands ───────────────────────────────────────────────────
git log --oneline --graph --decorate        # visual branch history
git stash                                   # temporarily save uncommitted changes
git stash pop                               # restore stashed changes
git diff HEAD~1                             # compare with previous commit
git show abc1234                            # show a specific commit
git restore filename.js                     # discard changes to a file
git reset HEAD~1 --soft                     # undo last commit, keep changes staged

Example Commit History — Well-Structured Project #

* a1b2c3d (HEAD -> main) feat(frontend): add task list component with async pipe
* d4e5f6a feat(frontend): add task service with HttpClient
* b7c8d9e feat(tasks): add Mongoose Task model and schema
* e1f2g3h feat(tasks): add CRUD REST endpoints with validation
* h4i5j6k feat(auth): add JWT authentication middleware
* k7l8m9n feat(auth): add login and register endpoints
* n1o2p3q feat(auth): add bcrypt password hashing in User model
* q4r5s6t feat(auth): add User Mongoose model and schema
* t7u8v9w chore: configure MongoDB connection and reconnect logic
* w1x2y3z chore: add express app setup with cors, helmet, body parser
* z4a5b6c chore: initial MEAN Stack project scaffold

How It Works #

Step 1 — Git Tracks the Entire Project as One History #

A single Git repository at the root of your monorepo tracks changes across both frontend/ and backend/. Git records every change as a commit — a snapshot of all modified files at a specific point in time. You can jump back to any commit: git checkout abc1234 restores the entire project (both frontend and backend) to exactly that state.

Step 2 — Branches Are Cheap — Use Them Freely #

A Git branch is just a pointer to a commit — creating one takes milliseconds and uses negligible disk space. Branch for every feature, no matter how small. This means you can always switch back to main and start a different task without losing your work. Use git stash when you need to switch contexts before a feature is commit-ready.

Step 3 — .gitignore Prevents Disasters #

The .gitignore file tells Git which files and folders to never track. node_modules/ can contain hundreds of thousands of files — committing them would make the repo enormous and slow. .env contains secrets — committing it exposes credentials publicly if the repo is ever made public. The Angular dist/ folder is generated from source — committing build artifacts creates unnecessary merge conflicts.

Step 4 — Conventional Commits Enable Automated Tooling #

The feat, fix, chore prefixes are not just cosmetic. Tools like standard-version and release-please read your commit history and automatically determine the next semantic version number (major/minor/patch) and generate a CHANGELOG. A commit starting with feat: triggers a minor version bump. A fix: triggers a patch. A commit with BREAKING CHANGE: in the body triggers a major version bump.

Step 5 — Pull Before You Push — Always #

git pull origin main before creating a new branch ensures your branch starts from the latest code. Pulling before pushing prevents rejected push errors when teammates have pushed in the meantime. In team workflows, always rebase or merge the latest main into your feature branch before opening a Pull Request — this makes the PR diff clean and reduces the chance of merge conflicts during review.

Real-World Example: Pre-commit Hooks with Husky #

# Install Husky — runs scripts before every commit
cd task-manager
npm install -D husky lint-staged

# Initialize Husky
npx husky init
echo "npx lint-staged" > .husky/pre-commit

# Configure lint-staged in root package.json
# Add:
# "lint-staged": {
#   "backend/src/**/*.js":    ["eslint --fix", "git add"],
#   "frontend/src/**/*.ts":   ["eslint --fix", "prettier --write", "git add"],
#   "frontend/src/**/*.html": ["prettier --write", "git add"]
# }

# Now every git commit automatically:
# 1. Runs ESLint and fixes auto-fixable issues
# 2. Runs Prettier to format the code
# 3. Adds the formatted files back to the commit
# If ESLint finds unfixable errors — the commit is ABORTED

Common Mistakes #

Mistake 1 — Giant commits with vague messages #

❌ Wrong — impossible to understand or revert selectively:

git add .
git commit -m "stuff"       # what stuff?
git commit -m "wip"         # work in progress — but what?
git commit -m "fix bug"     # which bug? where? how?

✅ Correct — small, focused commits with descriptive messages:

git commit -m "fix(auth): handle expired JWT with 401 response instead of 500"

Mistake 2 — Committing node_modules #

❌ Wrong — node_modules committed: repo is gigabytes, Git is unusable:

git add .    # if .gitignore is missing or wrong — adds node_modules!
# 200,000+ files added — git log, git status are now extremely slow

✅ Correct — verify .gitignore before first commit:

git status   # check what will be committed before git add
# If node_modules appears — fix .gitignore first
echo "node_modules/" >> .gitignore

Mistake 3 — Never pulling — diverged branches #

❌ Wrong — working on stale code for days:

git checkout -b feature/my-feature   # branched from week-old main
# ... 3 days of work ...
git push   # rejected — main has moved ahead 20 commits
git merge main   # massive conflict — painful resolution

✅ Correct — regularly sync with main:

git fetch origin
git rebase origin/main   # keep feature branch up to date daily

▶ Try It Yourself

Quick Reference — Git Commands for MEAN Stack Development #