Normal Solo Dev Workflow

1. Create GitHub repository - turn off all README, .gitignore, and license. If you need those, you can configure in the IDE.
2. Copy HTTPS URL of the repository.
3. Run:

git init
git remote add origin <YOUR_GITHUB_REPO_URL>
git branch -M main

Now you have established the connection stream to your repo. Next is the set of code you use to update the reposiotry.

git add .
git commit -m "initial commit"
git push origin main

Clone Repository

1. Create an empty folder with your preferred project name and drag it into VScode
2. Copy repository URL (HTTPS) from GitHub
3. Clone the repository

The code below add dot (.) at the end to prevent nested folder structure.

git clone <YOUR_GITHUB_REPO_URL> .

Install dependencies after cloning (crucial)

npm install

Note that for security, files like .env or .env.local are never pushed to GitHub.

Daily Sync Routine

Since you are now working on two machines, you have to manually sync them.

git add .
git commit -m "Work done on PC"
git push

Starting work on your other devices

Before you type a single line of code, pull the latest save:

git pull

Multi Devs with Branch Workflow

When working with another developer, never push directly to main. The main branch should always represent the clean, working version of your app.

This prevents you from overwriting each other's work and ensures code is reviewed via Pull Requests (PRs) before it touches production.

1. Invite new teammate

• Go to your GitHub repo settings -> Collaborators -> Add people.
• Enter their email or username to invite.
• (They must accept the invite via email before they can push code.)

2. The new dev starts

• The new developer clones your repo to their computer (using the "Clone Repository" method above).

3.1 Syncing strategy (basic and not recommended)

Scenario:

• New dev fixes a typo in a file and pushes that change to GitHub
• Get Hub has fixed typo, new dev has fixed typo, your PC still has the typo

You need that fix on your machine before you start coding.

# 1. Switch to main
git checkout main
 
# 2\. Download changes from GitHub to your computer
git pull origin main

If git pull says "Already up to date," great! You are ready to start.

3.2 Branch Workflow (recommended)

We stop working on main because if you break something on main, you break it for your teammate too. We work in an isolated "room" called a branch.

3.2.1 Pull latest changes from main first:

# 1. Switch to main
git checkout main
 
# 2. Download changes from GitHub
git pull origin main

3.2.2 Create new branch and switch to it:

git checkout -b feature/login-page
 
# note that "feature/login-page" is your new branch name

Note: -b means new branch. If it already exists, Git will throw an error and stop.

Work on this new branch for any modification. Never work directly on main.

3.2.3 Update the branch

Write your code as usual. When you are done, save (commit) your work to this specific branch:

git add .
git commit -m "Designed login button"
git push -u origin feature/login-page

3.2.4 Create PR

This is to notify the team about the update.

• After the push in previous step, go to GitHub.com
• Click on a banner saying feature/login-page had recent pushes.
• Click Compare & pull request
• Review your own code: Scroll down to look at the diffs (green/red lines) to make sure you didn't leave any console.log or mistakes.
• Click Create Pull Request.
• If everything looks correct (and your teammate approves), click Merge pull request.

4. Branch Protection (optional but recommend)

It's a GitHub feature that lets you enforce rules like No one can push directly to main and All code must be reviewed by you before merging.

Block direct pushes to main and require approval before merging

• Go to repository
• Click settings
• On left sidebar, click Branches -> Add classic branch protection rule
• Set Branch name pattern to main

Check:

• Require a pull request before merging
• Require approvals -> 1
• Do not allow bypassing the above settings

DO NOT CHECK:

• Lock branch

If you check "Lock branch", the branch becomes Read-Only and no one can add code to it at all.