1/16/2026
Share this post:
Export:
Mission: Build a working dashboard mockup using Claude Code - no prior coding experience required
Time Investment: 2-4 hours to get comfortable, then iterate as much as you want
What You'll Learn:
Here's what we're doing at a high level:
Your Computer
|-- A folder called "my-dashboard" (this is your PROJECT)
|-- Contains code files that make up your dashboard
|-- Git tracks every change you make (like infinite undo)
|-- Claude Code helps you write and modify the code
GitHub (optional but recommended)
|-- A backup of your project in the cloud
|-- You can share it, collaborate, or just have peace of mind
The most important thing to understand: Git is your safety net. Every time you "commit" your code, you're creating a save point. If you mess something up, you can ALWAYS go back. This is why professional developers are fearless - they know they can undo anything.
The terminal (or command line) is where you'll interact with Claude Code. Don't be intimidated - it's just a text-based way to talk to your computer.
On Mac:
Cmd + Space to open SpotlightYou'll see a window with a blinking cursor. This is your command line.
On Windows:
Windows KeyYou'll see a blue window with a blinking cursor. This is your command line.
Pro tip: You can also use VS Code's built-in terminal, or Windows Terminal for a nicer experience later.
GitHub is where developers store and share code. Even if you only work locally, having an account lets you:
You now have a GitHub account! Save your username and password somewhere secure.
We need to install a few things. Don't worry - this is a one-time setup.
Git tracks your code changes and lets you undo mistakes.
On Mac (choose one method):
Option A - Xcode Command Line Tools (Recommended for beginners):
xcode-select --install
A popup will appear. Click "Install" and wait for it to complete.
Option B - Homebrew (if you have it installed):
brew install git
On Windows:
IMPORTANT: After installing, close your terminal and reopen it for the changes to take effect.
Verify Git is installed:
git --version
You should see something like git version 2.39.5 (Mac) or git version 2.52.0.windows.1 (Windows)
Node.js lets you run JavaScript on your computer (React needs this).
On Mac and Windows:
Verify it worked:
node --version
You should see something like v24.13.0
Also check npm (Node's package manager):
npm --version
The GitHub CLI lets you interact with GitHub from your terminal.
On Mac:
brew install gh
If you don't have Homebrew, install it first:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
On Windows:
Option A - WinGet (Recommended):
winget install --id GitHub.cli
Option B - Download installer:
Verify and authenticate:
gh --version
Now log in to GitHub:
gh auth login
Follow the prompts:
This is the star of the show!
On Mac/Linux:
curl -fsSL https://claude.ai/install.sh | bash
On Windows (PowerShell):
irm https://claude.ai/install.ps1 | iex
On Windows (CMD):
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
Close and reopen your terminal, then verify it worked:
claude --version
claude
The first time you run Claude Code, it will ask you to authenticate. Follow the prompts to connect your Anthropic account (you'll need to sign up at anthropic.com if you haven't).
Congratulations! Your development environment is ready.
This is the most important section. Understanding Git means you'll never be afraid to experiment.
Git is a "version control system." Think of it like this:
It's like having infinite undo, but better - you can see exactly what changed between any two points in time.
A repository is a folder that Git is tracking. When you "initialize" a repo, you're telling Git: "Hey, watch this folder and track all changes."
Your folder before Git: Just files
Your folder after Git: Files + hidden .git folder that tracks everything
A commit is a snapshot of your code at a specific moment. Each commit has:
a1b2c3d)Think of commits like save points in a video game. You can always load an earlier save.
A branch is a parallel version of your code. The main branch is usually called main.
main: A --- B --- C --- D (your stable code)
\
feature: E --- F (experimental changes)
Branches let you experiment without affecting your main code. If the experiment works, you "merge" it back. If it doesn't, you just delete the branch.
For this weekend, you'll probably just use main. That's totally fine.
Before you commit, you "stage" your changes. This lets you choose exactly what goes into each commit.
Working Directory --> Staging Area --> Commit
(your files) (ready to commit) (saved snapshot)
Here are the Git commands. You don't need to memorize these because Claude Code will run them for you. But it's good to understand what they do.
# Initialize a new repo (do this once per project)
git init
# See what's changed
git status
# Stage all changes
git add .
# Stage specific file
git add filename.js
# Commit with a message
git commit -m "Your message here"
# See commit history
git log --oneline
# Go back to a previous commit (SAFE - creates new commit)
git revert <commit-id>
# Go back to a previous commit (DESTRUCTIVE - erases history)
git reset --hard <commit-id>
# Create a new branch
git checkout -b branch-name
# Switch to existing branch
git checkout branch-name
# See all branches
git branch
Here's the key insight: As long as you commit regularly, you can always go back.
Typical workflow:
You can literally say to Claude Code:
"Something went wrong. Please reset to the last commit."
And Claude Code will do it for you. No memorization required.
Let's create a dashboard project!
Open your terminal and run:
On Mac:
# Go to your Desktop
cd ~/Desktop
# Create the project folder
mkdir my-dashboard
# Go into the folder
cd my-dashboard
On Windows:
# Go to your Desktop
cd ~\Desktop
# Create the project folder
mkdir my-dashboard
# Go into the folder
cd my-dashboard
git init
You'll see: Initialized empty Git repository in .../my-dashboard/.git/
Your project is now a Git repository!
Tell Git who you are:
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
Use the same email you used for GitHub.
Every project should have a README. Let's create one:
On Mac:
echo "# My Dashboard\n\nA dashboard project built with Claude Code." > README.md
On Windows:
"# My Dashboard`n`nA dashboard project built with Claude Code." | Out-File -FilePath README.md -Encoding utf8
Or you can just create the file manually in any text editor.
git add README.md
git commit -m "Initial commit - project setup"
Congratulations! You just made your first commit! You now have a save point.
Now the fun begins:
claude
You're now in a Claude Code session. Claude can see your project and help you build.
From your project folder, just type:
claude
Claude Code will start and automatically understand the context of your project.
Claude Code is conversational. You don't need special syntax. Just describe what you want:
Good prompts:
Even better prompts (more specific):
Building software is iterative. Here's the typical flow:
1. Describe what you want
|
v
2. Claude Code creates/modifies code
|
v
3. You look at the result
|
v
4. You provide feedback or ask for changes
|
v
(repeat until happy)
|
v
5. Commit your changes (save point!)
Inside Claude Code, you can type:
/help - See available commands/clear - Clear the conversation (start fresh)/cost - See how much you've spentCommit when you reach a "good state":
Just say: "Please commit these changes with message: Added navigation sidebar"
This is your new superpower. You're not just learning to code - you're learning a new way to turn ideas into clickable prototypes.
Phase 1: IDEATION (Think before you build)
Phase 2: IMPLEMENTATION (Build incrementally)
The biggest mistake: Jumping straight to implementation without ideating first.
Start with your vision. Don't worry about technical details.
"I want a dashboard that shows me the health of my business at a glance. I need to see revenue, user metrics, and any alerts. I want to feel like I'm in mission control."
Notice: No mention of React, components, or code. Just the vision.
This is the secret weapon. Say:
"Before we start building, please ask me clarifying questions about this dashboard. What else do you need to know to make this great?"
Claude might ask:
Your answers shape the product.
"Based on what I've told you, what features would you suggest? What am I missing? Give me your recommendations and I'll tell you what resonates."
Claude might suggest:
You respond: "Yes to alerts, skip the export for now, tell me more about drill-downs..."
Before writing code, create markdown documents that capture your decisions:
"Please create a design document called DESIGN.md that captures:
This document becomes your north star.
Golden Rule: Always use mock data.
Why? Because:
Ask Claude to create mock data files:
"Create a mockData folder with JSON files for:
Being opinionated about technology choices helps Claude Code give you consistent, high-quality results.
React - The most popular framework for building user interfaces. Huge community, tons of examples, Claude knows it extremely well.
TypeScript - JavaScript with type safety. Catches errors before they happen. Claude can help you even if you don't understand the types.
Joy UI (MUI) - A component library that gives you beautiful, professional-looking buttons, cards, tables, etc. out of the box.
Tailwind CSS - A utility-first CSS framework. Instead of writing custom CSS, you use predefined classes.
When starting your project, always include:
"Use React with TypeScript, Joy UI for components, and Tailwind CSS for additional styling."
This sets Claude up for success.
Every JavaScript project has a package.json file. It's the project's manifest.
{
"name": "my-dashboard",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"@mui/joy": "^5.0.0"
}
}
scripts: Commands you can run:
npm run dev - Start the development servernpm run build - Create a production-ready versiondependencies: Other people's code your project uses.
Claude Code manages package.json for you. Just know it exists.
Now let's build something real! Here's a suggested approach:
Say to Claude Code:
"Create a new React project using Vite with TypeScript, Joy UI, and Tailwind CSS. This will be a dashboard for tracking business metrics. Start by creating a DESIGN.md and asking me questions about what I want to see."
"Create a dashboard layout with:
"Create a mockData folder with realistic data for:
Also create 3 different scenarios:
Add a small toggle in the UI to switch between datasets."
"On the main dashboard, create metric cards using Joy UI showing:
"Add a revenue chart showing monthly revenue from the mock data. Below it, add a table showing the 'Needs Attention' items - any metrics that are off-target."
"Make the sidebar navigation work:
For now, each page can just show a simple list from mock data."
After each phase works:
"Please commit these changes with message: Added [what you added]"
After Claude sets up your project, you need to run it to see it in a browser.
Option 1: Ask Claude
"Start the development server"
Claude will run the command and tell you the URL.
Option 2: Run it yourself
npm run dev
The terminal will show something like:
VITE v5.0.0 ready in 500 ms
--> Local: http://localhost:5173/
--> Network: http://192.168.1.100:5173/
http://localhost:5173 (or whatever port is shown)Note: Vite typically uses port 5173. Some projects use 3000. Just use whatever the terminal shows.
localhost means "this computer." When you go to localhost:5173, you're viewing a website that's running on your own machine - not on the internet. Only you can see it.
When Claude makes changes to your code, the browser automatically updates. No need to refresh. This is called "hot reloading."
To stop the development server:
Ctrl + C in the terminalWhen something goes wrong, Chrome's Developer Tools are your window into what's happening.
In Chrome, with your app open:
F12 on your keyboardCtrl + Shift + I (Windows) / Cmd + Option + I (Mac)Click the "Console" tab. This is where errors and messages appear.
What you'll see:
If your app shows a white screen or something's not working:
Just paste the error and describe what happened:
"I clicked the Users button and got this error:
TypeError: Cannot read properties of undefined (reading 'map') at UserList (UserList.tsx:23:15)
Can you fix it?"
Claude will understand the error and fix it.
| Error | What It Means |
|---|---|
Cannot read properties of undefined | Trying to use data that doesn't exist yet |
Module not found | A package isn't installed |
Unexpected token | Syntax error in the code |
Failed to fetch | Network request failed |
404 Not Found | A file or API endpoint doesn't exist |
Things WILL go wrong. This is normal. Here's how to handle it:
Say to Claude Code:
"The app won't start. Here's the error: [paste the error]"
This usually means a JavaScript error crashed the app.
"The sidebar is overlapping the content. Can you fix it?"
Or better, be specific:
"The sidebar is 400px wide but I wanted 250px, and it's covering the main content instead of sitting next to it."
Don't panic! This is what Git is for.
Option 1 - Go back to last commit:
"Something is broken. Please reset to the last commit."
Option 2 - See what changed:
"Show me what changed since the last commit"
Option 3 - Selective undo:
"Undo the changes to the Header component but keep the sidebar changes"
Before experimenting:
"Please commit what we have now with message: Before experimental changes"
Now experiment freely. If it doesn't work out:
"That didn't work. Please go back to the commit before the experimental changes"
| Problem | Solution |
|---|---|
| "Module not found" | Ask Claude to install the missing package |
| White screen | Check browser console (F12), copy error to Claude |
| Styling looks wrong | Describe what you expected vs what you see |
| Changes not showing | Try hard refresh (Ctrl/Cmd + Shift + R) |
| Git is confused | Ask Claude to show git status and help resolve |
| "Command not found" | Restart terminal - you may need the new PATH |
| Port already in use | Ask Claude to use a different port or kill the process |
Once you have something working, you might want to back it up to GitHub.
You can do this from Claude Code:
"Create a GitHub repository called 'my-dashboard' and push our code to it"
Or manually:
If you created the repo manually, tell Claude Code:
"Push our code to GitHub. The repo URL is: https://github.com/YOUR-USERNAME/my-dashboard"
Mac:
cd folder-name # Go into a folder
cd .. # Go up one folder
cd ~ # Go to home directory
cd ~/Desktop # Go to Desktop
ls # List files in current folder
pwd # Show current location
clear # Clear the screen
Windows (PowerShell):
cd folder-name # Go into a folder
cd .. # Go up one folder
cd ~ # Go to home directory
cd ~\Desktop # Go to Desktop
dir # List files in current folder (or: ls)
pwd # Show current location
cls # Clear the screen (or: clear)
cd ~/Desktop/my-dashboard # Go to your project (Mac)
cd ~\Desktop\my-dashboard # Go to your project (Windows)
claude # Start Claude Code
npm run dev # Start the development server
# Then open http://localhost:5173 in Chrome
/help - See commands/clear - Fresh startWorking --> Staging --> Committed --> (Optional) Pushed to GitHub
^ ^
| |
Your edits Save points you can return to
Ideation:
Implementation:
Maintenance:
Debugging:
F12 --> Open DevTools
Console tab --> See errors (red text)
Ctrl/Cmd + C --> Copy selected error text
Ctrl/Cmd + Shift + R --> Hard refresh the page
Ctrl + C (terminal) --> Stop the dev server
"xcode-select: error: tool 'xcodebuild' requires Xcode"
You only need the Command Line Tools, not full Xcode:
xcode-select --install
"permission denied" when installing globally
Never use sudo with npm. Fix permissions or use a version manager like nvm.
"Claude Code requires git-bash"
If you see this error:
claude again"npm/node not recognized"
PowerShell Execution Policy Error
If you get an error about execution policies:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Type Y to confirm.
Path Too Long Error
Windows sometimes has issues with long paths:
git config --global core.longpaths true
By the end of this guide, you will have:
Most importantly: You've learned that building software is iterative, mistakes are recoverable, and AI assistants like Claude Code make the whole process accessible.
Once you're comfortable with the basics:
Claude Code has slash commands you can type during a session. Here's what you need to know, organized from essential to advanced.
These five commands are all you need to be productive:
| Command | What It Does |
|---|---|
/help | Shows all available commands |
/clear | Wipes conversation history - fresh start |
/exit | Leave Claude Code (or just press Ctrl+C) |
/cost | See how much you've spent this session |
/compact | Compress conversation when context gets full (Claude will suggest this when needed) |
That's it. Five commands. You can build entire applications knowing only these.
Once you're comfortable, these commands improve your workflow:
| Command | What It Does |
|---|---|
/model | Switch between Opus (smartest), Sonnet (balanced), Haiku (fastest/cheapest) |
/resume | Pick up where you left off in a previous session |
/doctor | Check if Claude Code is healthy, see available updates |
/config | Open settings menu |
/status | See current model, account, version info |
/init | Create a CLAUDE.md file for your project (instructions for Claude) |
/memory | Edit your CLAUDE.md files |
/login | Switch Anthropic accounts |
/context | Visual grid showing how full your context window is |
/todos | See Claude's current task list |
/rewind | Undo recent conversation turns |
These are for when you want to go deeper:
| Command | What It Does |
|---|---|
/plan | Enter planning mode (design before building) |
/review | Request a code review |
/security-review | Security audit of pending changes |
/pr-comments | See GitHub PR comments |
/export | Save conversation to a file |
/stats | Usage analytics, streaks, session history |
/mcp | Manage MCP (Model Context Protocol) server connections |
/plugin | Manage plugins |
/hooks | Set up automation triggers |
/agents | Custom AI subagents for specialized tasks |
/sandbox | Run commands in an isolated environment |
/vim | Vim-style editing mode |
/bashes | Manage background shell tasks |
/add-dir | Add more directories to context |
/permissions | View and update tool permissions |
You can create your own slash commands by adding markdown files to:
.claude/commands/ (shared with your team)~/.claude/commands/ (available in all your projects)For example, create .claude/commands/test.md and you can run /test in that project.
Now that you have the basics, here are advanced tips that separate good Claude Code users from great ones. These come from building production software with AI assistance over the past year.
Commit on every forward progress "ratchet." Did something just work? Commit it. About to try something risky? Commit first. Finished a small piece of a larger feature? Commit.
Use branches liberally. Want to try a wild experiment? Create a branch:
git checkout -b experiment/crazy-idea
If it doesn't work out, throw the entire branch away:
git checkout main
git branch -D experiment/crazy-idea
No guilt. No sunk cost fallacy. The code is gone and you're back to a clean state.
Toss code without remorse. The biggest psychological shift: code is cheap, time is expensive. If you've been struggling for 20 minutes to get Claude Code to fix something, stop. Delete the changes. Think about what went wrong with your initial approach. Start fresh.
Here's a crucial insight: once errors and bad design decisions enter the context window, they influence all subsequent outputs. Claude Code doesn't forget the mistakes you've been making together.
When to clear context and start fresh:
How to do it:
/clear or exit and restart Claude CodeThis is counterintuitive but powerful: sometimes I create 10-15 markdown documents before writing any code.
Why? Because:
The document hierarchy:
docs/
├── DESIGN.md # What we're building and why
├── ARCHITECTURE.md # Technical structure and patterns
├── DATA_MODEL.md # What data exists and how it flows
├── USER_STORIES.md # Who uses this and what they need
├── IMPLEMENTATION.md # Step-by-step build plan
└── QUEST_CHAIN.md # Incremental milestones
The quest chain pattern is especially powerful. Break your project into small, independently testable milestones:
## Quest Chain: Dashboard MVP
### Quest 1: Basic Layout (20 min)
- [ ] Create shell with sidebar and header
- [ ] No real content yet, just structure
- [ ] TEST: Can see layout in browser
### Quest 2: Mock Data (15 min)
- [ ] Create mockData folder
- [ ] Add users.json with 10 users
- [ ] Add revenue.json with 12 months
- [ ] TEST: Can import and console.log data
### Quest 3: Dashboard Cards (25 min)
- [ ] Create MetricCard component
- [ ] Display Total Revenue card
- [ ] Display Active Users card
- [ ] TEST: Cards show mock data correctly
... and so on
Each quest is small enough that if it fails, you've lost very little. And each completed quest is a natural commit point.
Don't just give orders. Collaborate.
Before building, always ask:
"Before we implement this, what questions do you have? What am I missing? What could go wrong?"
Let Claude Code "hydrate" your specification. It often catches edge cases and asks questions that improve the final product.
Example dialogue:
Now Claude Code builds exactly what you need.
This is a technique for getting truly novel ideas from Claude Code.
The pattern:
Why this works: LLMs tend toward "mode collapse" - returning the most typical/expected answers. By explicitly asking for non-redundant ideas, you force the model to explore less obvious parts of the solution space.
The stopping criterion: When the new set significantly overlaps with previous sets, you've "cleared the market" - exhausted the useful idea space. Now you can stop exploring and start building.
Example:
"Give me 10 ideas for how users could filter the dashboard data"
[reviews list]
"Good. Now give me 10 MORE filtering ideas - but DO NOT repeat or be redundant with the previous ones. Focus on unconventional approaches."
[reviews second list - finds 3 novel ideas]
"Interesting. Give me 5 more, still non-redundant."
[reviews third list - all overlap with previous]
"Okay, we've cleared the market. Let's implement ideas #2, #7, and #14."
GitHub Copilot can review Claude Code's PRs. Set up Copilot code review on your repository, then:
This creates a paper trail of AI-assisted code review that catches real bugs.
AI assistance doesn't replace good engineering practices - it amplifies them.
Strong typing catches bugs early:
"Use TypeScript with strict mode. Define interfaces for all data structures."
Linters enforce consistency:
"Set up ESLint with the Airbnb style guide. Run lint on every save."
Tests verify behavior:
"Write unit tests for the calculateRevenue function. Use Jest."
Tell Claude Code to set these up on day one. Then you get the benefits automatically as you build.
The biggest time sink for beginners: trying to set up real databases, authentication, and APIs before having a working UI.
The mock-first approach:
Build the entire frontend with mocks first. Get it looking right. Get the interactions working. THEN replace mocks with real implementations one at a time.
Setup a data toggle:
"Add a developer panel that lets me switch between Mock Dataset 1 (happy path), Mock Dataset 2 (edge cases), and Mock Dataset 3 (error states). Hide it behind a keyboard shortcut."
Now you can demo your app in any state instantly.
When building anything non-trivial, break it into a quest chain:
## Implementation Quest Chain
### Phase 1: Foundation (no UI yet)
1. Set up project structure
2. Configure TypeScript, linting, testing
3. Create mock data files
4. Verify: `npm run dev` works, tests pass
### Phase 2: Layout Shell
5. Create basic layout (sidebar, header, main)
6. Add routing between pages
7. Verify: Can navigate between empty pages
### Phase 3: First Real Feature
8. Build first component with mock data
9. Add interactivity
10. Verify: Feature works end-to-end with mocks
### Phase 4: Second Feature
... and so on
Each phase is a commit point. If Phase 3 goes sideways, you can reset to the end of Phase 2 and try again with a different approach.
The final tip: know when to cut your losses.
If you're 30 minutes into a session and things aren't working:
/clear or restart Claude Code.This feels like wasted effort, but it's not. The 30 minutes of struggling taught you something. The fresh start applies that learning. Progress often comes in these restart cycles, not in linear sessions.
1. DOCUMENT FIRST
- Create design docs, architecture docs, quest chains
- Build perfect context before writing any code
2. START SESSIONS WITH CLEAR CONTEXT
- Reference your docs: "Read DESIGN.md and QUEST_CHAIN.md"
- Be specific about what you're building in this session
3. BUILD INCREMENTALLY
- One quest at a time
- Commit after each quest
- Test before moving on
4. USE GIT AGGRESSIVELY
- Branches for experiments
- Commits as save points
- No sunk cost fallacy
5. CLEAR THE COGNITIVE MARKET
- Ask for multiple ideas
- Force non-redundancy
- Stop when overlap increases
6. PROTECT YOUR CONTEXT
- Fresh start when struggling
- Better to restart than spiral
- Errors in context stay in context
7. AI REVIEWS AI
- Copilot reviews Claude Code PRs
- Claude Code responds to comments
- Paper trail of quality
8. MOCK EVERYTHING
- Build UI with fake data first
- Replace mocks with real implementations later
- Multiple mock datasets for different scenarios
Master these patterns and you'll build software faster than most professional developers - while having AI do the heavy lifting.
Claude Code is fantastic for individual developers and small teams. But what if you need:
This is why my team built B4M CLI - a command-line interface that brings the power of Bike4Mind to your terminal.
What makes B4M CLI different:
If you've mastered Claude Code and want to level up - especially for enterprise use cases - check out Bike4Mind and the B4M CLI documentation.
You're not learning to become a professional developer (unless you want to). You're learning to:
The best part? Claude Code handles the syntax and details. You provide the vision and direction.
This is the new product management. You can take what's in your head and make it real - not as a static mockup, but as a working, clickable prototype that you can share, test, and iterate on.
Welcome to building software. Have fun!
Guide created by Erik Bethke - January 2026 Built to be used with Claude Code Questions? Reach out: erik at bike4mind dot com
Verified URLs and Versions (as of January 2026):
Claude Code as My GitHub Project Manager: 35 Issues Triaged in Minutes
How Claude Code helped me triage 35 GitHub issues, close 9 completed features, create app labels, and build a ghetto newsletter system - all while shi...
Two Claude Codes, Two Repos, One Solution: A Multi-Agent Workflow Story
How two Claude Code instances collaborated across different repositories to solve a 500 error by mining proven patterns from production code. A meta-n...
Advanced Claude Code: Remote Sessions, Architecture, and Power User Features
Deep dive into Claude Code's advanced features: remote sessions from your phone, the security architecture behind teleport, custom commands, hook...
Get notified when I publish new blog posts about game development, AI, entrepreneurship, and technology. No spam, unsubscribe anytime.