Git Branching in Practice: Build a Client App with Variations

In this tutorial, you'll learn how to implement Git branching effectively by managing specific features of a multi-page PHP application. This approach allows you to work on individual pages without affecting the entire project.

🎯 What You’ll Build

You will create a 3-page PHP app with the following structure:

index.php — Front Page (Home)
clients.php — Client List (2 variations → 2 branches)
client-details.php — Client Details (3 variations → 3 branches)

You’ll Learn:

✅ How to structure a multi-page project
✅ How to create branches for specific files/pages
✅ How to switch between variations of a single page while keeping others stable
✅ How to avoid conflicts and manage scope

🧭 Step-by-Step Tutorial (Replit + PHP + Git)

✅ STEP 0: Create Your Replit Project

Go to Replit: Visit Replit and sign in or sign up.
Create PHP Web Project:
- Click + Create.
- Search for “PHP Web”.
- Select the “PHP Web Server” template.
- Name it client-app-variations.
- Click Create Repl.

✅ STEP 1: Initialize Git & Create Base Structure

Open Shell & Initialize Git:

bash
```
 git init
```

Configure Git (One Time):

bash

 git config --global user.name "YourName"
 git config --global user.email "you@example.com"

Create Base Files:
- Create index.php:

php

    <!DOCTYPE html>
    <html>
    <head><title>Client App — Home</title></head>
    <body>
        <h1>🏠 Client Management App</h1>
        <p><a href="clients.php">→ View Client List</a></p>
    </body>
    </html>

Create clients.php:

php

    <!DOCTYPE html>
    <html>
    <head><title>Client List — Base</title></head>
    <body>
        <h1>📋 Client List (Base Version)</h1>
        <ul>
            <li><a href="client-details.php?id=1">Alex Corp</a></li>
            <li><a href="client-details.php?id=2">Beta LLC</a></li>
            <li><a href="client-details.php?id=3">Gamma Inc</a></li>
        </ul>
        <p><a href="index.php">← Back Home</a></p>
    </body>
    </html>

Create client-details.php:

php

    <!DOCTYPE html>
    <html>
    <head><title>Client Details — Base</title></head>
    <body>
        <h1>📄 Client Details (Base Version)</h1>
        <?php
        $id = $_GET['id'] ?? 'unknown';
        echo "<p>Client ID: $id</p>";
        ?>
        <p><a href="clients.php">← Back to List</a></p>
    </body>
    </html>

Add & Commit All Files:

bash

 git add .
 git commit -m "Initial commit: Base 3-page app structure"

✅ STEP 2: Create 2 Variations of clients.php (Client List)

We’ll create 2 branches, each modifying only clients.php.

Create Branch: feature/list-table-view:

bash

 git checkout -b feature/list-table-view

Edit clients.php — Table Layout:

php

 <!DOCTYPE html>
 <html>
 <head><title>Client List — Table View</title></head>
 <body>
     <h1>📋 Client List (Table View)</h1>
     <table border="1" cellpadding="10">
         <tr><th>Client Name</th><th>Action</th></tr>
         <tr><td>Alex Corp</td><td><a href="client-details.php?id=1">View</a></td></tr>
         <tr><td>Beta LLC</td><td><a href="client-details.php?id=2">View</a></td></tr>
         <tr><td>Gamma Inc</td><td><a href="client-details.php?id=3">View</a></td></tr>
     </table>
     <p><a href="index.php">← Back Home</a></p>
 </body>
 </html>

Commit Changes:

bash

 git add clients.php
 git commit -m "feat: list as table layout"

Create Branch: feature/list-cards-view:

bash

 git checkout main
 git checkout -b feature/list-cards-view

Edit clients.php — Card Layout:

php

 <!DOCTYPE html>
 <html>
 <head><title>Client List — Cards View</title></head>
 <body>
     <h1>📋 Client List (Cards View)</h1>
     <div style="display: flex; gap: 20px; flex-wrap: wrap;">
         <div style="border: 1px solid #ccc; padding: 15px; width: 200px;">
             <h3>Alex Corp</h3>
             <a href="client-details.php?id=1">View Details</a>
         </div>
         <div style="border: 1px solid #ccc; padding: 15px; width: 200px;">
             <h3>Beta LLC</h3>
             <a href="client-details.php?id=2">View Details</a>
         </div>
         <div style="border: 1px solid #ccc; padding: 15px; width: 200px;">
             <h3>Gamma Inc</h3>
             <a href="client-details.php?id=3">View Details</a>
         </div>
     </div>
     <p><a href="index.php">← Back Home</a></p>
 </body>
 </html>

Commit Changes:

bash

 git add clients.php
 git commit -m "feat: list as card layout"

✅ STEP 3: Create 3 Variations of client-details.php

Each branch modifies only client-details.php.

Go Back to Main:

bash
```
 git checkout main
```

Create Branch: feature/details-expanded:

bash

 git checkout -b feature/details-expanded

Edit client-details.php — Expanded View:

php

 <!DOCTYPE html>
 <html>
 <head><title>Client Details — Expanded</title></head>
 <body>
     <h1>📄 Client Details (Expanded View)</h1>
     <?php
     $id = $_GET['id'] ?? 'unknown';
     $client = [
         1 => ['name' => 'Alex Corp', 'email' => 'alex@corp.com', 'phone' => '+1-555-0101'],
         2 => ['name' => 'Beta LLC', 'email' => 'beta@llc.com', 'phone' => '+1-555-0102'],
         3 => ['name' => 'Gamma Inc', 'email' => 'gamma@inc.com', 'phone' => '+1-555-0103']
     ];
     if (isset($client[$id])) {
         echo "<h2>{$client[$id]['name']}</h2>";
         echo "<p><strong>Email:</strong> {$client[$id]['email']}</p>";
         echo "<p><strong>Phone:</strong> {$client[$id]['phone']}</p>";
     } else {
         echo "<p>Client not found.</p>";
     }
     ?>
     <p><a href="clients.php">← Back to List</a></p>
 </body>
 </html>

Commit Changes:

bash

 git add client-details.php
 git commit -m "feat: details with expanded contact info"

Create Branch: feature/details-minimal:

bash

 git checkout main
 git checkout -b feature/details-minimal

Edit client-details.php — Minimal View:

php

 <!DOCTYPE html>
 <html>
 <head><title>Client Details — Minimal</title></head>
 <body>
     <h1>📄 Client Details (Minimal)</h1>
     <?php
     $id = $_GET['id'] ?? 'unknown';
     echo "<p>Client #$id</p>";
     ?>
     <p><a href="clients.php">← Back</a></p>
 </body>
 </html>

Commit Changes:

bash

 git add client-details.php
 git commit -m "feat: minimal details view"

Create Branch: feature/details-interactive:

bash

 git checkout main
 git checkout -b feature/details-interactive

Edit client-details.php — Interactive View:

php

 <!DOCTYPE html>
 <html>
 <head><title>Client Details — Interactive</title></head>
 <body>
     <h1>📄 Client Details (Interactive)</h1>
     <?php
     $id = $_GET['id'] ?? 'unknown';
     echo "<p>Client ID: <span id='client-id'>$id</span></p>";
     ?>
     <button onclick="copyId()">📋 Copy ID</button>
     <p id="status"></p>
     <script>
         function copyId() {
             const id = document.getElementById('client-id').textContent;
             navigator.clipboard.writeText(id).then(() => {
                 document.getElementById('status').textContent = "Copied!";
                 setTimeout(() => document.getElementById('status').textContent = "", 2000);
             });
         }
     </script>
     <p><a href="clients.php">← Back to List</a></p>
 </body>
 </html>

Commit Changes:

bash

git add client-details.php
git commit -m "feat: interactive details with copy button"

✅ STEP 4: Practice Switching — Mix & Match Variations

You can now combine any list variation with any details variation since they’re in separate branches.

Example: Table List + Expanded Details:

bash
```
 git checkout feature/list-table-view
 git checkout feature/details-expanded -- client-details.php
```
Refresh your browser to see the table list with expanded details!

Example: Cards List + Interactive Details:

bash

 git checkout feature/list-cards-view
 git checkout feature/details-interactive -- client-details.php

Refresh to see cards with the copy button!

Example: Base List + Minimal Details:

bash
```
 git checkout main
 git checkout feature/details-minimal -- client-details.php
```
You’re on the main (base list) but using the minimal details view.

✅ STEP 5: Clean Checkout — Reset to Pure Branch

If you want to return to a pure branch without mixed files:

Reset Specific File:

bash

 git checkout feature/list-table-view
 git checkout HEAD -- client-details.php

Reset Everything:

bash
```
 git checkout feature/list-table-view
 git reset --hard
```
⚠️ Note: reset --hard discards all uncommitted changes. Use with caution.

🔄 Mistake Recovery Guide

Edited wrong file:

bash
```
  git checkout -- <filename>
```

Mixed branches and confused:

bash

  git status
  git checkout <branch> -- <file>

Want to start clean:

bash

  git checkout <branch>
  git reset --hard

Accidentally committed wrong file:

bash
```
  git reset HEAD~1
```

Can’t switch branch due to changes:

bash

  git stash push -m "WIP"
  git stash apply

🎓 Key Points

✅ Branch by feature/page, not the whole app
✅ Partial checkout for mixing branches safely
✅ Isolation of changes in one file
✅ Flexibility to combine variations

Final Project Structure

dsconfig

client-app-variations/
├── index.php                  ← Always stable (no branches)
├── clients.php                ← Modified in: list-table-view, list-cards-view
├── client-details.php         ← Modified in: details-expanded, details-minimal, details-interactive
└── .git/                      ← Tracks all branches and variations

🎉 Congratulations! You’ve successfully practiced real-world Git branching, focusing on targeted, modular, page-level experimentation.

Git Branching in Practice: Build a Client App with Variations

🎯 What You’ll Build

You’ll Learn:

🧭 Step-by-Step Tutorial (Replit + PHP + Git)

✅ STEP 0: Create Your Replit Project

✅ STEP 1: Initialize Git & Create Base Structure

✅ STEP 2: Create 2 Variations of clients.php (Client List)

✅ STEP 3: Create 3 Variations of client-details.php

✅ STEP 4: Practice Switching — Mix & Match Variations

✅ STEP 5: Clean Checkout — Reset to Pure Branch

🔄 Mistake Recovery Guide

🎓 Key Points

Final Project Structure

Comments

More from this blog

Getting Started with CI/CD Using GitHub Actions and Docker

Exploring Cloud Automation and DevOps with VirtualBox and Docker

Exploring Docker Networking and Understanding Cloud Networking

Exploring VirtualBox Networking and Understanding Cloud Networking

Docker Fundamentals: Imperative and Declarative Deployment

Command Palette

🎯 What You’ll Build

You’ll Learn:

🧭 Step-by-Step Tutorial (Replit + PHP + Git)

✅ STEP 0: Create Your Replit Project

✅ STEP 1: Initialize Git & Create Base Structure

✅ STEP 2: Create 2 Variations of clients.php (Client List)

✅ STEP 3: Create 3 Variations of client-details.php

✅ STEP 4: Practice Switching — Mix & Match Variations

✅ STEP 5: Clean Checkout — Reset to Pure Branch

🔄 Mistake Recovery Guide

🎓 Key Points

Final Project Structure

Comments

More from this blog