Module 5, Lesson 5: Connect Project to GitHub
How do you connect your project to GitHub while building with Claude Code? In WebStorm, turn on version control, add a .gitignore that excludes secrets like .mcp.json, commit, and push to a private repo.
Then have Claude Code import your design system, prototypes, and specs, and push a second commit. Now everything lives in one backed-up place, not just on your laptop. The Product Path shows each step.
Why connect your project to GitHub before building further?
You connect your project to GitHub so your code and design docs are tracked with full version history and backed up off your laptop, meaning a dead hard drive no longer means starting over.
The setup turns your project folder into a Git repository, adds a .gitignore that keeps secrets like MCP tokens and IDE clutter out of what you push, and puts everything up as a private repo. Once connected, Claude Code can commit, branch, and manage version control for you as you build, and later course work relies on GitHub being in place.
Before We Start
From previous lessons:
- Claude Code is connected to Claude Design and can read your design project. Module 5, Lesson 4
- WebStorm is set up with your project folder. Module 3, Lesson 1
- Claude Code left off telling you your file isn't connected to a git repo yet. That's exactly what this lesson fixes
Tools / setup you'll need:
- A GitHub account
- WebStorm, with your project open and Git installed on your system
- Claude Code, connected from the last lesson
By the end of this lesson, you'll:
- Have a GitHub account, signed in
- Have turned your project folder into a Git repository, with a proper
.gitignore - Have made your first commit and pushed your project to GitHub as a private repo
- Have used Claude Code to import your design system, prototypes, and specs into your local repo, organize them, and push a second commit