Skip to main content
HashnodeHashNotes

Command Palette

Search for a command to run...

Collaborative App Development with GitHub

Updated
•7 min read
Collaborative App Development with GitHub
M
Mohamad Mahmood

Mohamad's interest is in Programming (Mobile, Web, Database and Machine Learning). He is studying at the Center For Artificial Intelligence Technology (CAIT), Universiti Kebangsaan Malaysia (UKM).

This tutorial guides you through creating a PHP login system while emphasizing the importance of using GitHub for version control and collaborative development. You’ll learn how to set up your project, manage branches, and work seamlessly with a collaborator, all while leveraging the powerful features of Git and GitHub to enhance your workflow.

Prerequisites

  • GitHub Account: Ensure you have an account set up.

  • Replit Account: Sign up on Replit (you can use your GitHub account).

  • Collaborator: A second email for a friend or a willing collaborator.

Part 1: Project Setup on Replit & First Commit

Goal:

Create a new PHP Project, build a light-themed login page, and connect it to GitHub.

Step 1: Create a New PHP Project

  1. Log in to Replit:

  2. Create a New Project:

    • Use "PHP Web" Framework.

    • Name your Project phplogin.

    • Click the "Create" button to create your new project.

Step 2: Initialize Git in the Shell

  1. Open the Shell:

    • In the Replit interface, locate the "Shell" tab on the right side of the screen (next to the Console tab).

  2. Run Git Commands:

    • Enter the following commands to configure Git and initialize your repository:

bash

    # Configure Git with your name and email (replace with your details)
    git config --global user.name "Your Name"
    git config --global user.email "your.email@example.com"

    # Initialize a new Git repository in the Repl
    git init

    # Create a new branch named 'main'
    git checkout -b main

Step 3: Create the Light Theme Login Page

  1. Open index.php:

    • In the left pane, find and click on index.php to open it.

  2. Replace the Contents:

    • Clear the existing content and replace it with the following light theme code:

php

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login (Light Theme)</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body { padding: 50px; background-color: #f8f9fa; }
            .login-container { max-width: 400px; margin: auto; }
        </style>
    </head>
    <body>
        <div class="login-container">
            <h2 class="text-center mb-4 text-primary">Please Sign In (Light)</h2>
            <form>
                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" required>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember">
                    <label class="form-check-label" for="remember">Remember me</label>
                </div>
                <button type="submit" class="btn btn-primary w-100">Login</button>
            </form>
        </div>
    </body>
    </html>

  1. Run the Repl:

    • Click the "Run" button at the top of Replit. You should see your light-themed login page displayed in the output pane.

Step 4: Make Your First Commit

  1. Stage and Commit Changes:

    • Go back to the Shell and run the following commands:

bash

    # Stage all files in the current directory
    git add .

    # Commit the changes with a descriptive message
    git commit -m "feat: add light theme login page"

Step 5: Create a Repository on GitHub and Push from Replit

  1. Create a New Repository:

    • Go to GitHub and log in.

    • Click "+ > New repository".

    • Set the repository name to phplogin.

    • Set it to Public and do not initialize with a README file.

    • Click "Create repository".

  2. Copy the Repository URL:

    • After creating the repository, copy the HTTPS URL (e.g., https://github.com/YOUR_USERNAME/phplogin.git).

  3. Link and Push to GitHub:

    • Back in your Replit Shell, run the following commands to link and push your code:

bash

    # Link your Replit to the GitHub repository
    git remote add origin https://github.com/YOUR_USERNAME/phplogin.git

    # Rename the branch to 'main' and push your code
    git branch -M main
    git push -u origin main
  • If this is your first time using Replit and GitHub, you will be prompted for your GitHub authentication.

Obtaining a Personal Access Token (PAT)

  1. Generate a PAT:

    • Go to GitHub > Settings > Developer settings > Personal access tokens.

    • Click Generate new token.

    • Give it "repo" permissions and copy the token.

    • Use this token as your password in the Shell.

  2. Verify the Push:

    • Refresh your GitHub page. Your code should now be online!

Part 2: Creating the Dark Theme on a New Branch

Step 1: Create and Switch to a New Branch

  1. Create a New Branch:

    • In the Shell, run the command:

bash

    git checkout -b darktheme

Step 2: Modify index.php for Dark Theme

  1. Update index.php:

    • Replace the contents of index.php with the dark theme code:

php

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login (Dark Theme)</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body { padding: 50px; background-color: #343a40; color: white; }
            .login-container { max-width: 400px; margin: auto; }
            .form-label { color: white; }
        </style>
    </head>
    <body>
        <div class="login-container">
            <h2 class="text-center mb-4">Please Sign In (Dark)</h2>
            <form>
                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" required>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember">
                    <label class="form-check-label" for="remember">Remember me</label>
                </div>
                <button type="submit" class="btn btn-light w-100">Login</button>
            </form>
        </div>
    </body>
    </html>

  1. Run the Repl:

    • Click the "Run" button to see the dark-themed login page.

Step 3: Commit and Push the New Branch

  1. Stage and Commit Changes:

    • Back in the Shell, run:

bash

    git add index.php
    git commit -m "feat: redesign for dark theme"
    git push -u origin darktheme
  • If prompted, enter your GitHub username and PAT again.

Part 3: Collaborating with a Friend via Replit

Step 1: Add a Collaborator on GitHub

  1. Add Collaborator:

    • Go to your phplogin repository on GitHub.

    • Click Settings > Collaborators > Add people.

    • Enter your friend’s email (e.g., friend@gmail.com) and click Add collaborator.

Step 2: Friend Accepts Invitation and Forks the Project

  1. Friend Logs In:

    • Your friend logs into their Replit account.

  2. Fork the Repository:

    • They go to your repository URL on GitHub: https://github.com/YOUR_USERNAME/phplogin.

    • They click the "Fork" button in the top-right corner to create a copy in their own account.

  3. Import Forked Repository in Replit:

    • Back on Replit, your friend clicks "+ Create Repl" and selects "Import from GitHub".

    • They paste the URL of their new fork (e.g., https://github.com/FRIENDS_USERNAME/phplogin) and click "Import from GitHub".

Step 3: Friend Creates Their Mobile Theme Branch

  1. Open the Shell:

    • In their Repl, your friend opens the Shell.

  2. Get Latest from Main Branch:

    • Run the following commands:

bash

    # Switch to the main branch
    git checkout main

    # Pull the latest changes from the main branch
    git pull origin main

    # Create and switch to a new branch for mobile theme
    git checkout -b mobile-theme

Step 4: Friend Makes Mobile Changes

  1. Update index.php for Mobile:

    • Your friend modifies index.php to create a mobile-optimized version. Here’s an example:

php

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login (Mobile Theme)</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body { padding: 20px; background-color: #f8f9fa; }
            .login-container { max-width: 100%; margin: auto; }
        </style>
    </head>
    <body>
        <div class="login-container">
            <h2 class="text-center mb-4">Please Sign In (Mobile)</h2>
            <form>
                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" required>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="remember">
                    <label class="form-check-label" for="remember">Remember me</label>
                </div>
                <button type="submit" class="btn btn-primary w-100">Login</button>
            </form>
        </div>
    </body>
    </html>

  1. Run the Repl:

    • They can click the "Run" button to test their changes.

Step 5: Friend Pushes Their Branch and Initiates a PR

  1. Stage and Commit Changes:

    • In the Shell, your friend runs:

bash

    git add index.php
    git commit -m "feat: optimize layout for mobile devices"
    git push -u origin mobile-theme

  1. Create a Pull Request:

    • Your friend goes to their forked repository on GitHub. They will see a banner prompting them to "Compare & pull request" for their new mobile-theme branch.

    • When creating the pull request, ensure:

      • Base repository: YOUR_USERNAME/phplogin

      • Base branch: main

      • Head repository: FRIENDS_USERNAME/phplogin

      • Head branch: mobile-theme

This sends the pull request from their fork to your original repository.

#github
24 views

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

HashNotes

348 posts

Collaborative App Development with GitHub