Claude Code — Where to Start?

Claude Code is a terminal-based AI coding tool built by Anthropic. Unlike editors like VS Code, it operates directly in the terminal, giving it powerful access to all project files.

This guide walks you through building a real fullstack web app with Claude Code, step by step.

Step 1: Project Initialization

Open your terminal and start a new project.

mkdir my-app && cd my-app
claude

Once Claude Code is running, give it natural language instructions:

"Create a fullstack web app using Next.js 15 + TypeScript + Tailwind CSS + Supabase. Use App Router, with user authentication and CRUD functionality for a todo management app."

Claude Code generates the project structure, installs packages, and writes the initial code.

Step 2: Database Design

You could create tables in the Supabase dashboard, but letting Claude Code handle it is faster.

"Create a todos table in Supabase with id(uuid), title(text), completed(boolean), user_id(uuid), created_at(timestamp) columns, and set up RLS policies."

Claude Code generates SQL migration files and writes Row Level Security policies.

Step 3: API and Server Actions

Next.js 15 lets you implement server-side logic using Server Actions.

"Implement add, update, delete, and list functionality as Server Actions. Use the Supabase client and ensure only authenticated users can access them."

Claude Code creates type-safe Server Action functions in the server/actions/ directory.

Step 4: UI Components

"Create a todo list page. Show todos as cards with checkboxes for completion and delete buttons. Design it cleanly with Tailwind CSS."

React components are generated and connected to Server Actions.

Step 5: Authentication

"Add email login/signup with Supabase Auth. Check auth in middleware and redirect unauthenticated users to the login page."

Auth pages, middleware, and protected routes are generated.

Step 6: Deployment

"Configure for Vercel deployment. Show me the list of required environment variables."

vercel.json configuration and environment variable lists are generated.

What to Do After Building

Once you've built the app, what matters is understanding your code.

Hidden within Claude Code's generated code are countless patterns and concepts. Understanding the difference between Server and Client Components, how RLS policies work, and the role of middleware is essential for growing as a real developer.

VibeUniv helps with this process. Connect your project and AI analyzes your tech stack, creating a personalized curriculum using your actual code as the textbook.

The Importance of CLAUDE.md

To use Claude Code effectively, CLAUDE.md is key. Create this file in your project root and Claude Code reads it every session to understand your project's context.

Good things to include in CLAUDE.md:

Project tech stack and structure
Coding conventions (naming rules, file structure, etc.)
Database schema summary
Frequently used commands
Cautions (files that shouldn't be directly modified, etc.)

A well-written CLAUDE.md dramatically improves AI collaboration quality.

Practical Guide to Building Fullstack Apps with Claude Code