Workflow Visual Guide
🎯 The Complete Development Flow
┌─────────────────────────────────────────────────────────────────────────────────┐│ DEVELOPMENT WORKFLOW │└─────────────────────────────────────────────────────────────────────────────────┘
[main branch] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │ ┃ │ ┃ 🚀 PRODUCTION │ ┃ (Auto-deploy) [develop branch] ━━━━━━━━━━━━━━━━━━┓ ┃ │ ┃ ┃ │ ┃ 🧪 STAGING ┃ │ ┃ (Auto-deploy) ┃ [feature/add-export] ━━━┓ ┃ ┃ │ ┃ ┃ ┃ │ ┃ 👀 PR ┃ ┃ │ ┃ PREVIEW ┃ ┃ │ ┃ ┃ ┃ 1. Create feature 2. Push & 3. Merge to 4. Release branch Create PR develop to main📊 Environment URLs
┌──────────────────────────────────────────────────────────────────┐│ Feature Branch │ feature/add-export │├────────────────┼─────────────────────────────────────────────────┤│ Preview URL │ https://your-project-id--pr-42.web.app ││ Lifetime │ 7 days (auto-expires) ││ Purpose │ Test & share for review │└────────────────┴─────────────────────────────────────────────────┘ ⬇️┌──────────────────────────────────────────────────────────────────┐│ Develop Branch │ develop │├────────────────┼─────────────────────────────────────────────────┤│ Staging URL │ https://your-project-id--staging.web.app ││ Lifetime │ Permanent ││ Purpose │ Final testing before production │└────────────────┴─────────────────────────────────────────────────┘ ⬇️┌──────────────────────────────────────────────────────────────────┐│ Main Branch │ main │├────────────────┼─────────────────────────────────────────────────┤│ Production URL │ https://your-project-id.web.app ││ Lifetime │ Permanent ││ Purpose │ Live application for users │└────────────────┴─────────────────────────────────────────────────┘🔄 Step-by-Step Process
┌─────────────────┐│ 1. START WORK │├─────────────────┤│ git checkout ││ develop ││ ││ git pull origin ││ develop │└────────┬────────┘ │ ⬇️┌─────────────────┐│ 2. NEW FEATURE │├─────────────────┤│ git checkout -b ││ feature/name ││ ││ [make changes] │└────────┬────────┘ │ ⬇️┌─────────────────┐│ 3. COMMIT WORK │├─────────────────┤│ git add . ││ git commit -m ││ "message" ││ git push │└────────┬────────┘ │ ⬇️┌─────────────────┐ ┌──────────────────┐│ 4. CREATE PR │────▶│ 🔗 PREVIEW URL │├─────────────────┤ ├──────────────────┤│ Base: develop │ │ Auto-generated ││ Compare: feature│ │ for every PR ││ │ │ ││ [Fill template] │ │ Share for review │└────────┬────────┘ └──────────────────┘ │ ⬇️┌─────────────────┐│ 5. CODE REVIEW │├─────────────────┤│ ✓ Tests pass ││ ✓ Preview works ││ ✓ Code approved ││ │└────────┬────────┘ │ ⬇️┌─────────────────┐ ┌──────────────────┐│ 6. MERGE TO DEV │────▶│ 🧪 STAGING │├─────────────────┤ ├──────────────────┤│ Click "Squash & │ │ Auto-deploys ││ merge" │ │ Test here! ││ │ │ ││ Delete branch │ │ Share with team │└────────┬────────┘ └──────────────────┘ │ ⬇️┌─────────────────┐│ 7. TEST STAGING │├─────────────────┤│ ✓ All features ││ ✓ Integration ││ ✓ Performance ││ ✓ No bugs │└────────┬────────┘ │ ⬇️┌─────────────────┐│ 8. RELEASE PR │├─────────────────┤│ Base: main ││ Compare: develop││ ││ "Release v1.2" │└────────┬────────┘ │ ⬇️┌─────────────────┐ ┌──────────────────┐│ 9. TO PRODUCTION│────▶│ 🚀 PRODUCTION │├─────────────────┤ ├──────────────────┤│ After approval │ │ Live site! ││ Merge to main │ │ Monitor for ││ │ │ issues ││ Auto-deploys │ │ │└─────────────────┘ └──────────────────┘🌳 Git Branch Visualization
main ●━━━━━━━━━━━━━━━━━━━━━●━━━━━━━━━━━━━━━━● ┃ ┃ ┃ ┃ ┃ merge ┃ 🚀 v1.2.0 ┃ ┃ ┃develop ●━━━━●━━━━━━●━━━━━━━━●━━━━━━━━━━━━━━━● ┃ \ ┃ ┃ ┃ ┃ \ ┃ merge ┃ ┃ ready for release ┃ \ ┃ ┃ ┃feature ┃ ●━━●━━━━━━━━● ┃ ┃ ┃ ┃ create PR merged ┃ ┃ feature ┃🚦 Decision Flow
Need to make a change? │ ⬇️┌────────────────────┐│ Is it a critical ││ production bug? │└────────┬───────────┘ No ─┴─ Yes │ │ ⬇️ ⬇️Feature HotfixBranch Branchfrom fromdevelop main🎯 PR Review Checklist
┌─ PR CREATED ─────────────────────────┐│ ││ Automated Checks: ││ □ Build passes ✓ ││ □ Deploy preview ✓ ││ □ No conflicts ✓ ││ ││ Manual Review: ││ □ Code quality ││ □ Tested on preview URL ││ □ Follows patterns ││ □ No console errors ││ │└──────────────────────────────────────┘💡 Remember
- Feature branches are temporary (delete after merge)
- Develop branch is long-lived (never delete)
- Main branch is protected (production)
- Preview URLs expire after 7 days
- Staging is always available for testing
This visual guide shows the complete flow from idea to production!