Daily GitHub Development Workflow for React + Web Bluetooth and Vercel Deployment

This post describes the daily GitHub development workflow for building React applications that interact with Raspberry Pi IOT devices. This daily routine covers everything you need: coding, creating feature branches, committing changes, opening pull requests, merging into main, and deploying updates to Vercel.

This post describes how to setup this environment.

1. Start Your Work Session

Open your project folder in PowerShell:

Code

cd C:\Users\Jsing\react\deadrail-engine-control

Open VS Code:

Code

code .

This loads your entire project so you can begin coding.

2. Start the Development Server

Run:

Code

npm run dev

Your app becomes available at:

http://localhost:5173

Use this page to test UI changes and Bluetooth interactions as you work.

3. Create a Feature Branch for Your Work

Never code directly on main. Instead, create a branch for each feature or fix.

Example:

Code

git checkout -b feature-add-ble-controls

This creates and switches to a new branch where you can safely develop without affecting production code.

4. Code, Test, Repeat

This is your main development loop:

• Edit React components
• Update BLE logic
• Save changes
• Browser auto‑reloads
• Test functionality
• Repeat

Continue until the feature or fix is complete.

5. Review and Stage Your Changes

Check what changed:

Code

git status

Stage everything:

Code

git add .

Or stage specific files if needed.

6. Commit Your Work

Write a clear, descriptive commit message:

Code

git commit -m "Added BLE connect button and updated dashboard layout"

Good commit messages describe what changed, not how.

7. Push Your Feature Branch to GitHub

Push your branch:

Code

git push -u origin feature-add-ble-controls

GitHub now has your branch and is ready for a pull request.

8. Open a Pull Request (PR) on GitHub

Go to your repository on GitHub. You’ll see a banner suggesting:

“Compare & pull request”

Click it.

In the PR:

• Set base branch to main
• Set compare branch to your feature branch
• Add a short description of what you changed
• Submit the pull request

This creates a clean review point before merging into production.

9. Merge the Pull Request into Main

Once you’re satisfied with the changes:

• Click Merge pull request
• Confirm the merge
• Delete the feature branch (optional but recommended)

Your main branch now contains the updated code.

10. Vercel Automatically Deploys the Update

Because your Vercel project is linked to GitHub:

• Every merge into main triggers a new deployment
• Vercel builds your project
• Vercel updates your production URL
• You get a fresh, live version of your app

You can monitor deployment logs at:

https://vercel.com/dashboard

No manual deployment steps are required.

11. Verify the Live Deployment

Open your production URL.

Check:

• UI loads correctly
• BLE connects properly
• No console errors
• New features behave as expected

If something needs fixing, start a new feature branch and repeat the workflow.

And Finally…

This daily GitHub development workflow keeps your React + Web Bluetooth project organized, and production‑ready. By developing in feature branches, using pull requests, and letting Vercel handle deployments, you ensure that your main branch stays stable and your live app updates smoothly. This process scales beautifully as your project grows and helps maintain a professional development rhythm.