Skip to content

module-14-version-control-github.md

Latest commit

 

History

History
328 lines (230 loc) · 7.83 KB

module-14-version-control-github.md

File metadata and controls

328 lines (230 loc) · 7.83 KB

Module 14: Version Control with GitHub

Goal: Learn how to use GitHub with Lovable for version control and collaboration

Estimated Time: 30-40 minutes

Prerequisites: Complete Modules 1-4 first

🎯 What You'll Learn in This Module

By the end of this module, you will:

  • Understand what version control is and why it matters
  • Know how to connect Lovable to GitHub
  • Understand commits, branches, and pull requests
  • Learn how to collaborate with others
  • Know how to manage your code history
  • Be able to use GitHub for backup and portfolio

📖 Lesson 1: Understanding Version Control

What is Version Control?

Version control is like a time machine for your code. It:

  • ✅ Saves every version of your project
  • ✅ Lets you go back to any point
  • ✅ Tracks all changes
  • ✅ Enables collaboration
  • ✅ Provides backup

Why Use Version Control?

Benefits:

  • Backup - Your code is safe
  • History - See how your project evolved
  • Collaboration - Work with others
  • Experimentation - Try things without fear
  • Portfolio - Show your work
  • Recovery - Get back lost work

GitHub Basics

GitHub is a platform for version control. Think of it as:

  • Google Drive for code
  • Time machine for projects
  • Collaboration platform
  • Portfolio showcase

💡 Beginner Tip: You don't need to understand all the technical details! Lovable makes it easy.

📖 Lesson 2: Connecting Lovable to GitHub

How to Connect

Step 1: Have a GitHub Account

If you don't have one:

  1. Go to github.com
  2. Click "Sign up"
  3. Create a free account
  4. Verify your email

Step 2: Connect in Lovable

  1. In your Lovable project, go to Settings
  2. Find "GitHub" or "Version Control" section
  3. Click "Connect to GitHub"
  4. Authorize Lovable - Click "Authorize" or "Allow"
  5. Choose repository settings:
    • Create new repository
    • Or use existing one
    • Choose public or private
    • Save

Step 3: Your Code Syncs

Once connected:

  • Code syncs automatically - Changes are saved to GitHub
  • You can see it on GitHub - Visit github.com to view
  • Others can see it - If public, people can view your work

💡 Beginner Tip: Start with a private repository if you're learning. Make it public later if you want to showcase it.

📖 Lesson 3: Understanding Commits

What is a Commit?

A commit is like saving a snapshot of your project at a specific point in time.

Think of it like:

  • Saving a document
  • Taking a photo
  • Creating a checkpoint

How Commits Work in Lovable

Lovable automatically:

  • ✅ Creates commits when you make changes
  • ✅ Adds descriptive messages
  • ✅ Saves to GitHub
  • ✅ Keeps history organized

You can also:

  • Create commits manually
  • Add custom commit messages
  • Control when commits happen

Commit Messages

Good commit messages:

  • Describe what changed
  • Are clear and specific
  • Help you understand history

Examples:

  • "Add user authentication"
  • "Fix contact form submission"
  • "Update homepage design"
  • "Add task filtering feature"

💡 Beginner Tip: Lovable creates good commit messages automatically. You can customize them if you want.

📖 Lesson 4: Branches

What are Branches?

Branches are like parallel timelines. You can work on different features without affecting the main project.

Think of it like:

  • Main branch = Published book
  • Feature branch = Draft chapter
  • You edit the draft, then merge it into the book

When to Use Branches

Use branches for:

  • ✅ Trying new features
  • ✅ Experimenting
  • ✅ Working on big changes
  • ✅ Collaborating with others

How to Create Branches

In Lovable:

Create a new branch called "feature-new-design" to work on redesigning the homepage

Or in GitHub:

  1. Go to your repository
  2. Click "main" branch dropdown
  3. Type new branch name
  4. Create branch

Merging Branches

When you're done:

Merge the "feature-new-design" branch into main

Or in GitHub:

  1. Go to your repository
  2. Create a Pull Request
  3. Review changes
  4. Merge

💡 Beginner Tip: Start with just the main branch. Use branches when you're comfortable or working on big features.

📖 Lesson 5: Pull Requests

What is a Pull Request?

A Pull Request (PR) is a way to:

  • Review changes before merging
  • Discuss changes with others
  • Get feedback
  • Merge branches safely

How Pull Requests Work

  1. Make changes in a branch
  2. Create Pull Request - Propose merging into main
  3. Review changes - See what's different
  4. Discuss - Comment and get feedback
  5. Merge - Combine into main branch

Creating Pull Requests

In GitHub:

  1. Go to your repository
  2. Click "Pull Requests" tab
  3. Click "New Pull Request"
  4. Choose branches to compare
  5. Add description
  6. Create PR

💡 Beginner Tip: Pull Requests are great for collaboration. Even solo, they help you review your own changes!

📖 Lesson 6: Collaboration with GitHub

Working with Others

GitHub enables:

  • Multiple people working on same project
  • Reviewing each other's code
  • Discussing changes
  • Merging work together

Collaboration Workflow

  1. Clone repository - Get a copy
  2. Create branch - Work on feature
  3. Make changes - Build your feature
  4. Commit changes - Save your work
  5. Push to GitHub - Upload your changes
  6. Create Pull Request - Propose merging
  7. Review and merge - Combine into main

Using GitHub for Portfolio

Showcase your work:

  • Make repositories public
  • Add README files
  • Include screenshots
  • Document your projects
  • Share with employers/clients

💡 Beginner Tip: GitHub is like a portfolio for developers. Keep your best work public!

🛠️ Hands-On Practice

Practice 1: Connect and First Commit

Task: Connect a project to GitHub and make your first commit.

Steps:

  1. Connect to GitHub (as described above)
  2. Make a small change to your project
  3. Check GitHub - See your change there
  4. View commit history - See the commit

Practice 2: Create a Branch

Task: Create a branch and make changes.

Steps:

  1. Create a branch: 
    Create a new branch called "experiment-new-feature"
  2. Make changes in that branch
  3. Check GitHub - See the branch
  4. Switch back to main - See it's unchanged

Practice 3: Merge a Branch

Task: Merge your experimental branch.

Steps:

  1. Go to GitHub
  2. Create Pull Request from your branch
  3. Review changes
  4. Merge into main
  5. See changes in main branch

✅ Module 14 Checklist

Before completing the course, make sure you can:

  • Understand what version control is
  • Connect Lovable to GitHub
  • Understand commits and commit messages
  • Create and use branches
  • Create and merge pull requests
  • Use GitHub for backup
  • Understand basic collaboration

🤔 Common Questions (FAQ)

Q: Do I need GitHub?

A: It's optional but recommended! Great for backup and learning.

Q: Is GitHub free?

A: Yes! Free accounts have unlimited public repositories and some private ones.

Q: Can I use GitHub without knowing Git?

A: Yes! Lovable handles most of it. You can use GitHub's web interface for the rest.

Q: What's the difference between Git and GitHub?

A: Git is the tool, GitHub is the platform. Lovable uses Git and connects to GitHub.

Q: Should I make my repos public or private?

A: Private for personal projects, public for portfolio pieces you want to showcase.

🎯 What's Next?

Great work! You now understand version control with GitHub. Use it to backup your work and build your portfolio.

Continue with:

  • Module 15: Deploying to Custom Clouds
  • Or apply these skills to manage your projects!

Module 14 Complete! 🎉