Getting Started: Just Build It

1.1 What is Vibe Coding?

A New Coding Paradigm

Vibe Coding is a way of creating code by explaining to AI in natural language. While traditional coding requires memorizing programming language syntax and typing it yourself, vibe coding is simply saying "make this for me."

What We're Building: LinkHub

In this book, we'll build a link-in-bio service called LinkHub together. It's a service like Linktree that lets you collect all your links on a single page and share them.

What is LinkHub?

On platforms like Instagram, YouTube, and X (Twitter), you can only put one link in your profile. LinkHub creates a page behind that single link where all your other links are collected.

Why Link-in-Bio?

1.2 LinkHub User Journey Preview

Let's preview what the finished service will look like. This is the goal we'll build toward step by step.

linkhub.com/yourusername

Chapter-by-Chapter Roadmap

1.3 Checking Your Development Environment

Run the following command in your terminal to verify all tools are ready:

node --version && git --version && claude --version

If all three lines show version numbers, you're good to go.

1.4 First Project: Building a Landing Page

Now let's actually build something! We're making LinkHub's landing page.

Create a Next.js project. Use TypeScript and set up Tailwind CSS.

Create a landing page for a link-in-bio service called LinkHub.
- Header: logo, login button
- Hero section: a one-liner like "All your links in one place", CTA button
- Feature section: 3 core features (link collection, customization, analytics)
- Pricing: two plans - Free / Pro
- Footer

Make it modern and clean.

npm run dev

1.5 Advanced Prompt Engineering

It's most frustrating when AI misunderstands your intent. In this section, you'll learn 'technical communication skills.'

Lego-Style Buildup: Iterative Improvement Strategy

Don't try to get perfect code in one go. The key is splitting features into small pieces and adding them one by one.

When AI Misunderstands

If results don't match expectations, use these strategies:

• Request rollback -- "Undo what you just made, let's try differently"
• Provide feedback -- "Let me tell you what's wrong with this result. [problems]. Consider this and redo it"
• Partial modification -- "Only modify this part to [desired direction]. Keep everything else"

Context Management: When Projects Get Big

As projects grow, Claude's Context Window fills up and performance degrades.

.claudeignore Setup

Like Git's .gitignore, specify files Claude shouldn't read:

# .claudeignore
node_modules/
.next/
dist/
*.log
*.lock
coverage/
.env*

Summary Delivery Technique

Instead of long files, summarize and deliver the essentials:

Let me summarize the current project status:
1. Tech stack: Next.js, Supabase, Tailwind CSS
2. Completed features: Login, profile page, link CRUD
3. Current work: Click analytics dashboard
4. Problem: Click counts aren't saving to DB

In this context, look at the logic for saving to the clicks table.

Asking AI Counter-Questions (Using as QA)

Code 'working' and code 'working properly' are different. Use AI as a QA tool:

Review the feature I just made:
1. 5 possible error cases
2. Security vulnerabilities
3. Edge cases (empty input, special characters, long text, etc.)
4. Potential performance issues

1.6 Handling Errors

Errors are normal. Even professional developers encounter errors daily. What matters is how you handle them.

3 Steps to Error Resolution

1. Copy the entire error message
2. Throw it directly to Claude
3. Say "Explain why this error happened and fix it"

Common Error Situations

1.7 Leveling Up Claude Code: Various Uses

Claude Code can be used in many ways beyond just entering prompts. Let's explore by level.

Level 1: Basic Prompt Input

The most basic method. Run Claude Code in terminal and request conversationally.

claude "Create a Next.js project"

• Pros: No barrier to entry, start immediately
• Cons: Repeat same explanations, hard to maintain per-project context

Level 2: Using CLAUDE.md File

Create a CLAUDE.md file in the project root and Claude automatically reads it for context.

# CLAUDE.md Example
 
## Project Overview
This project is LinkHub - a link-in-bio service.
 
## Tech Stack
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Database: Supabase (PostgreSQL)
- Hosting: Vercel
 
## Coding Conventions
- Use functional components
- TypeScript strict mode
- Use Tailwind CSS (no inline styles)
 
## Main Folder Structure
/app - Pages
/components - Reusable components
/lib - Utility functions

• Pros: Automatic project context recognition
• Cons: Requires setup per project

Level 3: .claude Folder Structure

Store settings in the ~/.claude folder to use across all projects.

~/.claude/
├── settings.json    # Global settings
├── CLAUDE.md        # Global instructions
├── rules/           # Rules to always follow
│   ├── security.md
│   ├── coding-style.md
│   └── testing.md
├── skills/          # Domain knowledge/workflows
│   ├── frontend-patterns.md
│   └── backend-patterns.md
├── commands/        # Slash commands
│   ├── tdd.md       # /tdd
│   └── plan.md      # /plan
└── agents/          # Specialized sub-agents
    ├── code-reviewer.md
    └── architect.md

Main Components

Level 4: Hooks (Automation)

Scripts that run automatically when specific events occur.

// ~/.claude/settings.json
{
  "hooks": {
    "PreToolUse": [{
      "matcher": "tool == 'Edit'",
      "command": "echo 'Backing up before file edit...'"
    }],
    "PostToolUse": [{
      "matcher": "tool == 'Edit'",
      "command": "npm run lint"
    }],
    "Stop": [{
      "command": "echo 'Session ended. Saving learnings...'"
    }]
  }
}

• PreToolUse: Run before tool use
• PostToolUse: Run after tool use
• Stop: Run when session ends

Level 5: MCP (Model Context Protocol)

Connect external tools and services to Claude Code.

// ~/.claude.json
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": { "GITHUB_TOKEN": "your-token" }
    },
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server"],
      "env": { "SUPABASE_URL": "...", "SUPABASE_KEY": "..." }
    }
  }
}

Services you can connect:

• GitHub - Manage issues, PRs
• Supabase - Direct DB operations
• Vercel/Railway - Deployment management
• Slack - Send messages
• Notion - Document management

Level 6: Using Community Resources

Leverage configurations shared by other developers.

Installation:

# Clone repository
git clone https://github.com/affaan-m/everything-claude-code.git
 
# Copy desired configurations
cp everything-claude-code/agents/*.md ~/.claude/agents/
cp everything-claude-code/rules/*.md ~/.claude/rules/
cp everything-claude-code/commands/*.md ~/.claude/commands/
cp -r everything-claude-code/skills/* ~/.claude/skills/

Recommended Levels by Stage

Chapter Summary

• Understood the difference between vibe coding and traditional coding
• Installed VS Code, Node.js, Git, and Claude Code
• Created the LinkHub landing page
• Learned prompt engineering techniques
• Learned error handling methods
• Discovered Claude Code usage levels

In the next chapter, we'll connect a database.

Chapter 2: Database →