Claude Code Tutorial: From Zero to Productive in One Day

What This Tutorial Covers

This is the guide I wish existed when I started with Claude Code. Not the documentation — Anthropic's docs are solid — but the practical workflow that makes the difference between "interesting experiment" and "daily production tool."

I use Claude Code every day for client work. Shopify stores, Next.js applications, API integrations. The productivity difference compared to my previous workflow is significant enough that I restructured how I approach projects entirely.

This tutorial takes you from installation to your first productive session, including the context setup that most tutorials skip but that makes everything else work.

---

Installation: Three Minutes

Prerequisites

• Node.js 18+ (check with node --version)
• Git initialized in your project (Claude Code uses git for tracking changes)
• An Anthropic account with an active subscription

Install and Launch

# Install globally
npm install -g @anthropic-ai/claude-code

# Navigate to your project
cd your-project/

# Start Claude Code
claude

First launch opens a browser for authentication. After that, you're in an interactive session. Claude Code sees your entire project directory — every file, every folder.

Verify it works: Type what files are in this project? and press Enter. Claude Code should list your project structure. If it does, you're ready.

---

Your First Session: The Basics

Claude Code is a conversation in your terminal. You describe what you want, it reads files, writes code, runs commands, and reports back.

The Fundamental Commands

What you type	What happens
A task description	Claude Code plans and executes the work
/help	Shows available commands
/compact	Compresses conversation to free up context
Ctrl+C	Cancels current operation

Start Simple

Don't start with "refactor my entire authentication system." Start with something concrete and verifiable:

> Read the README and summarize this project's architecture.

This does two things: it gives you a sense of how Claude Code reads and interprets your code, and it tells you whether the project context is clear enough for effective work.

Then Try a Real Task

> Find all TODO comments in the codebase and list them
  with file paths and line numbers.

Or something more useful:

> The login form doesn't validate email format before submission.
  Add client-side email validation to the login component.

Watch what happens. Claude Code doesn't just suggest a change — it reads the component, understands the existing validation pattern, writes the code, and can run the linter or tests to verify.

---

The Key Insight Most Tutorials Miss: Project Context

Here's where most Claude Code usage goes from mediocre to excellent.

Without context, Claude Code is a smart assistant that has to figure out your project from scratch every session. With context, it's a team member who already knows the codebase, the conventions, and the decisions behind them.

CLAUDE.md: Your Project's Memory

Create a CLAUDE.md file in your project root. This is the single most impactful thing you can do.

# CLAUDE.md — Project Name

## Overview
- What: E-commerce store built on Next.js + Shopify
- Stack: Next.js 14, TypeScript, Tailwind CSS, Shopify Storefront API
- Hosting: Vercel, auto-deploys from main branch

## Key Conventions
- All components use TypeScript strict mode
- CSS uses Tailwind utility classes, no custom CSS files
- API routes follow REST naming: /api/resource/[id]
- Tests use Vitest, run with `npm test`

## Architecture Decisions
- SSG for product pages (revalidate every 60s)
- Client-side cart using Shopify Buy SDK
- i18n via next-intl (EN default, DE secondary)

## Commands
- `npm run dev` — Start dev server
- `npm run build` — Production build
- `npm run lint` — ESLint check

## Known Pitfalls
- Shopify API rate limit: max 2 requests/second on Storefront API
- Image optimization: use Shopify CDN URLs, not local imports
- Cart API requires valid checkout session — test with real products

The quality of this file directly determines the quality of Claude Code's output. Every convention you document is a convention Claude Code follows without being told.

What Belongs in CLAUDE.md

Include	Skip
Tech stack and versions	Things obvious from package.json
Architecture decisions and why	Generic coding best practices
Project-specific conventions	Standard language conventions
Common commands	Universally known commands
Known pitfalls and gotchas	Bugs you've already fixed
External integrations and their quirks	Full API documentation

The "why" matters more than the "what." Claude Code can read your code to see what you use. It can't read your mind to understand why you chose it. "We use SSG because product pages change less than once per hour and SSR adds 200ms latency" is more useful than "We use SSG."

---

Real Workflow: What a Productive Session Looks Like

Here's a realistic development session, not a demo:

Task: Add a Newsletter Signup Component

> Add a newsletter signup form to the footer.
  It should collect email addresses and send them to our
  /api/newsletter endpoint.
  Match the existing form styling from the contact page.
  Add loading and success states.

Claude Code will:

1. Read the existing footer component
2. Read the contact page form for styling reference
3. Check the API endpoint structure
4. Create the newsletter component
5. Add it to the footer
6. Handle loading, success, and error states

One prompt. Multiple files. Consistent with existing patterns because it read them first.

Task: Debug a Production Issue

> Users report that the cart total sometimes shows the wrong
  currency on the checkout page. The store supports EUR and USD.
  Find the bug and fix it.

Claude Code reads the cart logic, traces the currency handling through components, identifies where the currency context gets lost (probably a missing prop or a stale state), and implements a fix. Then it can run your test suite to verify nothing else broke.

Task: Refactor Across Files

> Rename the "ProductCard" component to "ProductTile" everywhere.
  Update all imports, all references in tests, and the
  component's own file name.

This is where the agent approach shines. A find-and-replace handles the simple cases but misses dynamic imports, test descriptions, comments, and documentation references. Claude Code reads the actual usage and handles each case correctly.

---

MCP: Connecting to Your Ecosystem

MCP (Model Context Protocol) servers extend what Claude Code can access. Think of them as plugins that give Claude Code eyes into external systems.

Useful MCP Integrations

MCP Server	What It Does	Example Use
GitHub	Read issues, PRs, repository data	"Read the last 5 issues and summarize them"
Figma	Access design files and components	"Implement this Figma frame as a React component"
Context7	Fetch current library documentation	"How does the Next.js App Router handle parallel routes?"
Shopify Dev	Access Shopify API docs and GraphQL schema	"What fields does the Product object have?"

Setting Up an MCP Server

MCP servers are configured in your Claude Code settings. For example, adding a documentation server:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/context7-mcp"]
    }
  }
}

After configuration, Claude Code can pull current documentation during a session — no more working from outdated training data when the framework just released a new version.

---

Common Mistakes and How to Avoid Them

Mistake 1: Vague Task Descriptions

Bad:

> Make the homepage better.

Good:

> The homepage hero section loads slowly on mobile.
  Optimize the hero image loading and reduce the
  initial JavaScript bundle for above-the-fold content.

Specificity isn't micromanagement. It's giving Claude Code the constraints it needs to make good decisions.

Mistake 2: Skipping the CLAUDE.md

Without project context, Claude Code makes reasonable guesses about your conventions. With a well-written CLAUDE.md, it follows your conventions exactly. The 30 minutes you spend writing that file save hours of corrections.

Mistake 3: Not Reviewing Diffs

Claude Code is not infallible. After every task:

# Review what changed
git diff

# If it looks good
git add -A && git commit -m "Add newsletter signup component"

# If something is off
git checkout -- .

Trust but verify. The git workflow is your safety net.

Mistake 4: Trying to Do Everything in One Prompt

Break complex work into logical steps. Not because Claude Code can't handle complexity — it can — but because smaller steps are easier to review and course-correct.

# Step 1
> Add the database schema for user preferences.

# Review, then Step 2
> Add the API endpoint for updating preferences.

# Review, then Step 3
> Add the settings UI that calls the preferences API.

Each step builds on verified work.

---

Tips for Daily Use

Start each session with context. If you're continuing work from yesterday, briefly describe what was done and what's next. Claude Code with a CLAUDE.md already knows a lot, but session-level context helps.

Use /compact proactively. Long sessions accumulate context. When you notice responses getting less precise, compact the conversation to free up the context window.

Commit at milestones. After each successful task, commit. This gives you clean rollback points and helps Claude Code understand what's already done.

Let Claude Code verify its own work. Include verification in your task descriptions:

> Add input validation to the registration form.
  Run the existing tests afterward to make sure nothing broke.

Read the diff before committing. This takes 30 seconds and catches the occasional edge case that slipped through. It's the single most important habit for productive Claude Code usage.

---

From Tutorial to Daily Driver

The jump from "trying Claude Code" to "using it productively" comes down to three things:

1. A good CLAUDE.md that captures your project's conventions and decisions
2. Clear task descriptions that give Claude Code the right constraints
3. A review habit that catches issues early through git diffs

If you've followed this tutorial, you have all three. The rest is practice — the more sessions you run, the better you get at framing tasks and maintaining context.

For the comparison between Claude Code and other AI coding tools, see Cursor vs Claude Code: An Honest Comparison. For a deeper look at the paradigm shift behind tools like Claude Code, read What Is Agentic Coding?.