Claude Code Setup & Tutorial: Build Apps 10x Faster

Claude Code is Anthropic's terminal-based AI coding agent. Unlike editor-based tools like Cursor or Copilot, Claude Code runs directly in your terminal and operates on your entire codebase — reading files, writing code, running commands, and completing multi-step tasks autonomously. For Indian developers, it offers a powerful way to build applications significantly faster, with pricing options that work for both students and professionals.

What You'll Learn

• Installing Claude Code on macOS, Linux, and Windows (WSL2)
• Setting up your Anthropic API key or Pro subscription
• Creating an effective CLAUDE.md for your project
• Using plan mode to think before executing
• Using agent mode for autonomous development
• Custom slash commands for repeatable workflows
• Building a real project from scratch with Claude Code

Installation

Claude Code requires Node.js 18 or later. Install it globally via npm.

macOS / Linux

# Install Node.js if you don't have it
# macOS:
brew install node

# Ubuntu/Debian:
sudo apt update && sudo apt install nodejs npm

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

# Verify installation
claude --version

Windows (via WSL2)

Claude Code does not run natively on Windows. You need WSL2.

# In PowerShell (as Admin), install WSL2:
wsl --install

# Restart your computer, then open Ubuntu from Start menu

# Inside WSL2 Ubuntu:
sudo apt update && sudo apt install nodejs npm
npm install -g @anthropic-ai/claude-code

Authentication

You have two options to authenticate:

Option 1: Claude Pro subscription ($20/month ~1,680 INR)

claude
# Follow the browser-based OAuth flow to sign in

Option 2: Anthropic API key (pay per token)

export ANTHROPIC_API_KEY="sk-ant-your-key-here"
claude

Which to choose in India:

| Method | Cost | Best For | |--------|------|----------| | Claude Pro | ~1,680 INR/month flat | Daily usage, heavy coding sessions | | API key | ~2.50 INR per 1K input tokens | Occasional use, budget-conscious developers | | Claude Max | ~8,400 INR/month flat | Professional developers, unlimited usage |

Payment tip for Indian developers: Both Anthropic subscriptions and API credits accept Visa/Mastercard with international transactions enabled. Some developers use Wise or Razorpay virtual cards if their bank blocks direct international charges.

Your First Claude Code Session

Navigate to any project directory and start Claude Code:

cd ~/projects/my-app
claude

You see a REPL prompt where you can type natural language instructions:

> What files are in this project and what does the app do?

Claude Code reads your project structure, examines key files, and gives you a summary. It does not just list files — it understands the relationships between them.

Basic Commands

Inside the Claude Code REPL:

| Command | What It Does | |---------|-------------| | Type a message | Give Claude Code an instruction | | /help | Show available commands | | /clear | Clear conversation history | | /status | Show current session info | | /cost | Show token usage and cost for this session | | /compact | Compress conversation to save context | | Ctrl+C | Cancel current operation | | Ctrl+D or /exit | Exit Claude Code |

Setting Up CLAUDE.md

CLAUDE.md is the single most important file for getting good results from Claude Code. It gives the agent persistent context about your project that persists across every session.

Create a CLAUDE.md file in your project root:

# Project Name — Claude Code Instructions

## Tech Stack
- Next.js 15 with App Router
- TypeScript (strict: true)
- Tailwind CSS 4
- PostgreSQL 16 with Prisma ORM
- Authentication: NextAuth.js v5

## Project Structure
- app/ — Next.js app router pages
- components/ — React components (ui/ for primitives, features/ for domain)
- lib/ — Utilities, API client, database queries
- prisma/ — Schema and migrations

## Conventions
- Use Server Components by default
- 'use client' only when state, effects, or event handlers are needed
- All database queries go in lib/db/ files
- API routes: app/api/v1/[resource]/route.ts
- Error handling: always return { error: string } on failure
- Date format: DD/MM/YYYY (Indian standard)
- Currency: INR with Indian number system (lakhs/crores)

## Commands
- `npm run dev` — Start development server
- `npm run build` — Production build
- `npx prisma migrate dev` — Run migrations
- `npm test` — Run Playwright E2E tests

## Rules
- NEVER use 'any' type in TypeScript
- NEVER commit .env files
- Always add loading and error states to data-fetching components
- Use named exports, not default exports

CLAUDE.md Hierarchy

Claude Code reads CLAUDE.md files from multiple locations, merged in order:

1. ~/.claude/CLAUDE.md — Global (your personal preferences)
2. ./CLAUDE.md — Project root (team conventions)
3. ./src/CLAUDE.md — Subdirectory (specific to that part of the project)

For more details on CLAUDE.md, see our complete CLAUDE.md guide.

Plan Mode: Think Before Acting

Plan mode is critical for complex tasks. Instead of immediately writing code, Claude Code first creates a detailed plan and asks for your approval.

Activating Plan Mode

# Start Claude Code in plan mode
claude --plan

# Or use the shift+tab toggle inside the REPL to switch modes

In plan mode, when you give an instruction like:

Add a user authentication system with login, register, and password reset

Claude Code responds with a structured plan:

Plan:
1. Create User model in prisma/schema.prisma with email, password hash, name
2. Create auth utility functions in lib/auth.ts (hashPassword, verifyPassword, generateToken)
3. Create API routes:
   - POST /api/v1/auth/register
   - POST /api/v1/auth/login
   - POST /api/v1/auth/reset-password
4. Create frontend pages:
   - app/login/page.tsx
   - app/register/page.tsx
   - app/reset-password/page.tsx
5. Add middleware for protected routes in middleware.ts
6. Run prisma migrate dev to create the database tables

Shall I proceed with this plan?

You can modify the plan before Claude Code executes it. This prevents wasted time on an approach you did not want.

When to Use Plan Mode

• Complex features that touch many files
• Architectural decisions where you want to review the approach first
• Learning — plan mode explains the "why" behind each step
• Team environments where you need to document what changed and why

Agent Mode: Autonomous Development

Agent mode is the opposite of plan mode. Claude Code acts autonomously — reading files, making edits, running commands, and iterating until the task is complete.

> Add pagination to the /api/v1/products endpoint. Use cursor-based pagination.
  Update the frontend ProductList component to support infinite scrolling.

In agent mode, Claude Code:

1. Reads the existing API route and ProductList component
2. Modifies the API to accept cursor and limit parameters
3. Updates the Prisma query to use cursor-based pagination
4. Modifies the frontend to fetch pages with intersection observer
5. Runs npm run build to check for errors
6. Fixes any TypeScript errors it finds
7. Reports completion with a summary of changes

Permission System

Claude Code asks permission before potentially destructive actions:

• File edits — Shows the diff before applying
• Shell commands — Shows the command before running
• File creation — Shows the path and content

You can configure auto-approval for safe commands:

// .claude/settings.json
{
  "permissions": {
    "allow": [
      "Read",
      "Glob",
      "Grep",
      "Bash(git status)",
      "Bash(git diff)",
      "Bash(npm run build)",
      "Bash(npm run dev)"
    ]
  }
}

Custom Slash Commands

Create reusable workflows that you trigger with a slash command.

Setting Up Commands

Create markdown files in .claude/commands/:

mkdir -p .claude/commands

.claude/commands/review.md:

Review the code I've changed in this git branch compared to main.

Steps:
1. Run `git diff main...HEAD` to see all changes
2. Check for TypeScript errors, security issues, and performance problems
3. Verify error handling and edge cases
4. Check for missing loading/error states in React components
5. Provide a summary with specific file:line references for each issue

.claude/commands/test.md:

Analyze the recent changes and write Playwright E2E tests for them.

Steps:
1. Run `git diff main...HEAD` to see what changed
2. Identify user-facing features that need testing
3. Create or update test files in e2e/ directory
4. Run the tests with `npx playwright test` and fix any failures

Now in the REPL, type /review or /test to execute these workflows.

Background Tasks

For long-running tasks, you can use background mode:

# Start a background task
claude -b "Run the full test suite and fix any failures"

# Check on background tasks
claude --status

Background tasks run without interaction and report results when complete. This is useful when you want Claude Code to handle a task while you work on something else.

Real Project Walkthrough: Building a Blog API

Let us build a complete blog API from scratch using Claude Code.

Step 1: Initialize the Project

mkdir blog-api && cd blog-api
claude

> Initialize a new Next.js 15 project with TypeScript, Tailwind CSS,
  and Prisma ORM. Set up the project structure following our CLAUDE.md
  conventions. Use PostgreSQL as the database.

Claude Code runs npx create-next-app, installs Prisma, creates the schema, and sets up the project structure.

Step 2: Build the Data Layer

> Create a Blog Post model in Prisma with: id, title, slug (unique),
  content (markdown), excerpt, coverImage, published (boolean),
  publishedAt, createdAt, updatedAt. Then create the API routes
  for CRUD operations at /api/v1/posts.

Claude Code creates the Prisma model, generates a migration, and builds all four API routes with proper validation and error handling.

Step 3: Add the Frontend

> Create a blog listing page at /blog that shows all published posts
  in a card grid. Each card shows the cover image, title, excerpt,
  and published date. Add a /blog/[slug] page that renders the
  markdown content. Use Indian date formatting (DD/MM/YYYY).

Step 4: Review and Deploy

/review

Your custom review command runs and checks all the code for issues.

Tips for Indian Developers

Managing API Costs

If you are using the API key method, monitor your costs:

/cost

This shows token usage for the current session. A typical one-hour session uses 100K-500K tokens, costing 25-125 INR on the API.

Working with Slow Internet

If your connection drops mid-task, Claude Code saves its state. Restart with claude and it resumes the conversation.

Using Claude Code with Indian Tech Stacks

Claude Code works exceptionally well with popular Indian tech stacks:

• MERN stack — MongoDB, Express, React, Node.js
• Next.js + Supabase — Popular for indie hackers
• Django + React — Common in Indian startups
• .NET + Angular — Used in enterprise India

Add your specific stack details to CLAUDE.md for the best results.

Where to Go Next

• Claude Code custom commands deep dive — Advanced command configuration
• CLAUDE.md complete guide — Write better project instructions
• Claude Code skills and superpowers — Unlock advanced workflows
• Cursor vs Copilot vs Claude Code — Compare all three tools

Claude Code represents a fundamentally different approach to AI-assisted development. Instead of an editor with AI bolted on, it is an AI agent that happens to use your file system. The learning curve is steeper than Cursor or Copilot, but the ceiling is much higher — especially for complex tasks that require understanding and modifying many files at once.