Build Full Stack Websites with Claude AI: Step-by-Step Tutorial 2026

Developer → Learns syntax → Writes code → Debugs → Tests → Deploys

Developer → Describes requirements → AI generates code → Review → Deploy

You: "Create a landing page for a SaaS product with hero section, features, and pricing"

→ Claude generates HTML/CSS/JS in Artifact
→ Preview appears in real-time
→ You can interact with the preview
→ Request changes: "Make the hero section blue with white text"
→ Claude updates the code instantly
→ Preview refreshes automatically

Create a modern landing page for "TaskFlow" - a project management tool for remote teams.

Structure:
- Hero section with headline "Streamline Your Remote Workflow" and CTA button
- Features section with 3 features (visual icons, headings, descriptions)
- Pricing section with 3 tiers (Free, Pro, Enterprise)
- Footer with links and social media icons

Design:
- Modern, clean aesthetic
- Purple (#7C3AED) as primary color
- White background with subtle gradients
- Mobile-responsive design
- Professional typography (Inter font)
- Smooth scroll animations

Features to highlight:
1. Real-time collaboration
2. AI-powered task prioritization
3. Integrated video calls

User: "Make the hero section taller with a background gradient from purple to blue"
Claude: [Updates CSS with gradient]

User: "Add customer testimonials section before pricing"
Claude: [Generates testimonials HTML/CSS]

User: "Make pricing cards flip on hover to show feature details on the back"
Claude: [Implements 3D flip animation with CSS]

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

# Follow prompts, drag/drop your HTML file

Website: "TechBlog" - A technology blog

Pages:
1. Home (index.html) - Hero, latest posts, featured content
2. About (about.html) - Team info, mission statement
3. Blog (blog.html) - Blog post archive with filters
4. Contact (contact.html) - Contact form with validation
5. Privacy (privacy.html) - Privacy policy

Shared Components:
- Header navigation (logo, menu, search)
- Footer (links, newsletter signup, social media)
- Consistent color scheme and typography

Prompt to Claude:

"Create a reusable header and footer for a tech blog website called TechBlog.

Header should include:
- Logo (text-based: "TechBlog" in bold)
- Navigation menu: Home, About, Blog, Contact
- Search icon button
- Mobile hamburger menu

Footer should include:
- Quick links (same as nav + Privacy)
- Newsletter signup form
- Social media icons (Twitter, LinkedIn, GitHub)
- Copyright notice

Style: Modern, minimal, dark mode friendly
Colors: #1F2937 (dark gray), #10B981 (accent green)
Make it responsive and mobile-friendly"

"Using the header and footer from our previous conversation, create the Home page for TechBlog.

Home page should have:
- Hero section with tagline and featured image
- 'Latest Posts' section showing 6 recent blog post cards
- 'Featured Topics' section with 4 topic categories
- 'Newsletter' CTA section

Each blog post card should show:
- Featured image
- Title
- Excerpt (2 lines)
- Author, date, read time
- Tags

Make it fully responsive and include hover effects on cards"

"Create a blog post page template (blog-post.html) that matches our TechBlog design.

Include:
- Full-width hero image
- Title, author info, publish date, read time
- Table of contents (auto-generated from H2 headings)
- Article content area with good typography
- Code syntax highlighting blocks
- Social share buttons (Twitter, LinkedIn, Facebook)
- 'Related Posts' section at bottom
- Comments section placeholder

Make the content area comfortable to read (max-width 65ch, good line-height)"

netlify deploy --prod --dir=techblog

Create a React task management application called "TaskMaster"

Features:
- Add new tasks with title and description
- Mark tasks as complete/incomplete
- Filter tasks (All, Active, Completed)
- Delete tasks
- Edit existing tasks (inline editing)
- Local storage persistence (tasks saved in browser)
- Task count statistics
- Dark/light mode toggle

UI Components:
- App wrapper (main container)
- Header (title, dark mode toggle)
- TaskInput (form to add tasks)
- TaskList (list of all tasks)
- TaskItem (individual task with actions)
- FilterButtons (All/Active/Completed)
- Stats (total tasks, completed count, active count)

Styling:
- Modern design with Tailwind CSS (via CDN)
- Smooth transitions and hover effects
- Mobile responsive
- Accessible (ARIA labels, keyboard navigation)

// Claude generates this structure:

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function TaskMaster() {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');
  const [darkMode, setDarkMode] = useState(false);

  // Load tasks from localStorage on mount
  useEffect(() => {
    const saved = localStorage.getItem('tasks');
    if (saved) setTasks(JSON.parse(saved));
  }, []);

  // Save tasks to localStorage whenever they change
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (task) => { /* ... */ };
  const toggleTask = (id) => { /* ... */ };
  const deleteTask = (id) => { /* ... */ };
  const editTask = (id, newText) => { /* ... */ };

  const filteredTasks = tasks.filter(task => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  return (
    <div className={darkMode ? 'dark' : ''}>
      <div className="min-h-screen bg-white dark:bg-gray-900">
        {/* Header, TaskInput, FilterButtons, TaskList, Stats */}
      </div>
    </div>
  );
}

ReactDOM.render(<TaskMaster />, document.getElementById('root'));

User: "Add drag-and-drop reordering for tasks"
Claude: [Implements drag-and-drop with HTML5 drag API]

User: "Add task categories with color coding"
Claude: [Adds category selection and visual indicators]

User: "Add due dates with calendar picker"
Claude: [Implements date picker and overdue highlighting]

User: "Add export to JSON feature"
Claude: [Adds export button and download functionality]

"Optimize this React app for performance:
- Use React.memo for TaskItem components
- Implement useMemo for filtered tasks calculation
- Add debouncing to task search
- Lazy load task lists with virtualization if > 100 tasks"

npx create-react-app taskmaster
cd taskmaster

# Replace src/App.js with Claude's code (adapted for modules)
# Run development server
npm start

# Build optimized bundle
npm run build

# Deploy to Netlify
netlify deploy --prod --dir=build

Build a full-stack note-taking application called "QuickNotes"

Frontend (React):
- User authentication (login/signup)
- Note editor with rich text (bold, italic, lists)
- Note list with search and filters
- Tags for organizing notes
- Real-time auto-save
- Dark mode

Backend (Node.js + Express):
- RESTful API endpoints
- User authentication with JWT
- PostgreSQL database integration
- CRUD operations for notes
- Tag management
- Search functionality

Database Schema:
- Users table (id, email, password_hash, created_at)
- Notes table (id, user_id, title, content, created_at, updated_at)
- Tags table (id, user_id, name)
- Note_Tags table (note_id, tag_id)

Deployment:
- Frontend: Vercel
- Backend: Railway or Render
- Database: Railway PostgreSQL

"Create a Node.js Express backend for QuickNotes with:

1. User authentication:
   - POST /api/auth/signup - Create new user
   - POST /api/auth/login - Login and return JWT
   - Middleware to verify JWT on protected routes

2. Notes API:
   - GET /api/notes - Get all notes for authenticated user
   - GET /api/notes/:id - Get specific note
   - POST /api/notes - Create new note
   - PUT /api/notes/:id - Update note
   - DELETE /api/notes/:id - Delete note

3. Tags API:
   - GET /api/tags - Get all tags
   - POST /api/tags - Create tag
   - PUT /api/notes/:id/tags - Update note tags

Use PostgreSQL with pg library. Include:
- Password hashing with bcrypt
- JWT token generation
- Input validation
- Error handling
- CORS configuration
- Environment variables for secrets"

"Create database schema and migration files for QuickNotes using PostgreSQL.

Include:
- Schema definition SQL
- Migration scripts
- Seed data for testing
- Database connection configuration
- Indexes for performance (user_id, created_at, etc.)"

"Create a React frontend for QuickNotes that connects to our backend API.

Components:
- AuthForm (login/signup with toggle)
- Dashboard (main app container)
- NoteEditor (rich text editor with formatting toolbar)
- NoteList (sidebar with search and filter)
- TagManager (tag creation and assignment)
- Settings (theme toggle, account settings)

Features:
- JWT token storage in localStorage
- Axios for API requests
- React Router for navigation
- Context API for global state (user, notes, tags)
- Debounced auto-save (save 2 seconds after typing stops)
- Optimistic UI updates
- Loading states and error handling

Use Tailwind CSS and include dark mode support"

// Generated API service example
import axios from 'axios';

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';

const api = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

// Add JWT to all requests
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export const authService = {
  signup: (email, password) => api.post('/auth/signup', { email, password }),
  login: (email, password) => api.post('/auth/login', { email, password })
};

export const notesService = {
  getAll: () => api.get('/notes'),
  getById: (id) => api.get(`/notes/${id}`),
  create: (note) => api.post('/notes', note),
  update: (id, note) => api.put(`/notes/${id}`, note),
  delete: (id) => api.delete(`/notes/${id}`)
};

export const tagsService = {
  getAll: () => api.get('/tags'),
  create: (name) => api.post('/tags', { name }),
  updateNoteTags: (noteId, tagIds) => api.put(`/notes/${noteId}/tags`, { tagIds })
};

PORT=5000
DATABASE_URL=postgresql://user:password@host:5432/quicknotes
JWT_SECRET=your-secret-key-here
NODE_ENV=production
CORS_ORIGIN=https://your-frontend-domain.vercel.app

REACT_APP_API_URL=https://your-backend.railway.app/api

# Install Railway CLI
npm install -g @railway/cli

# Login and initialize
railway login
railway init

# Add PostgreSQL
railway add postgresql

# Deploy
railway up

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

"Make a website"

"Create a landing page for a fitness coaching business called 'FitLife Coaching'.

Target audience: Working professionals aged 25-40
Goal: Generate leads for 1-on-1 coaching

Structure:
- Hero with headline 'Transform Your Body in 12 Weeks' and email capture form
- 'How It Works' section (3 steps with icons)
- Testimonials (3 cards with before/after photos, quotes, names)
- Pricing (2 options: Standard $297/month, Premium $497/month)
- FAQ accordion (5 common questions)
- Footer with social links

Design:
- Energetic, motivating vibe
- Orange (#FF6B35) and dark blue (#003566) color scheme
- High-energy imagery (people exercising)
- Mobile-first design
- Fast loading (optimize images)

Include:
- Google Analytics integration
- Facebook Pixel
- Schema markup for SEO
- Accessibility (ARIA labels, alt text)"

1. "Create basic structure and layout"
   → Review output

2. "Add hero section with form"
   → Test form functionality

3. "Add testimonials section with carousel"
   → Verify carousel works on mobile

4. "Add pricing section with hover effects"
   → Check animations

5. "Optimize for mobile and add loading states"
   → Final testing

"Create a navigation bar similar to Stripe.com:
- Logo on the left
- Center menu items (Products, Solutions, Developers, Resources)
- Right side: Login and Sign Up buttons
- Sticky on scroll
- Mega menu dropdowns for Products and Solutions
- Search modal when clicking search icon

Here's a screenshot: [attach image]
Match the spacing and animation style"

"Build this using:
- React 18.3 with hooks (no class components)
- Tailwind CSS 3.4 for styling
- React Router 6 for navigation
- Axios for API calls
- React Hook Form for form handling
- Zod for validation
- Lucide React for icons

Use TypeScript for type safety
Follow Airbnb style guide for code formatting"

"Explain how this authentication flow works step-by-step.
Why did you use useContext instead of Redux?
What security measures are in place for the JWT tokens?
How does the auto-save feature prevent data loss?"

"Add comprehensive error handling:
- Network errors (show retry button)
- Validation errors (show field-specific messages)
- Server errors (show user-friendly message)
- Loading states for all async operations
- Empty states when no data
- Success confirmations for user actions

Also add:
- Unit tests for utility functions
- Integration tests for API calls
- E2E tests for critical user flows"

"Optimize this React app for performance:
- Code splitting with React.lazy
- Image optimization (WebP, lazy loading)
- Memoization for expensive calculations
- Virtual scrolling for long lists
- Service worker for offline support
- Bundle size analysis and reduction
- Lighthouse score > 90 for all metrics"

In Project Settings, add custom instructions:

"For all components in this project:
- Use Tailwind CSS classes (no inline styles)
- Follow our design system colors: primary #7C3AED, secondary #10B981
- Use Inter font family
- Ensure mobile-first responsive design
- Include TypeScript types
- Add PropTypes for runtime validation
- Include JSDoc comments for all functions
- Follow our component structure:
  - Imports
  - Type definitions
  - Component code
  - Export
  - Styled components (if needed)"

"Make this fully responsive with these breakpoints:
- Mobile: < 640px (stack all elements vertically)
- Tablet: 640px - 1024px (2-column grid)
- Desktop: > 1024px (3-column grid)

Specific adjustments:
- Hero text: 32px mobile, 48px tablet, 64px desktop
- Navigation: hamburger menu on mobile, full menu on desktop
- Images: full-width on mobile, 50% width on desktop
- Padding: 16px mobile, 32px tablet, 64px desktop"

"Optimize this application for performance:

1. Code Splitting:
   - Split routes into separate bundles
   - Lazy load non-critical components

2. Image Optimization:
   - Convert to WebP format
   - Implement responsive images (srcset)
   - Add lazy loading
   - Use appropriate sizes (no oversized images)

3. Bundle Optimization:
   - Remove unused dependencies
   - Tree shake effectively
   - Minimize and compress
   - Analyze bundle with webpack-bundle-analyzer

4. Runtime Performance:
   - Memoize expensive calculations
   - Virtualize long lists
   - Debounce input handlers
   - Use web workers for heavy computations

Target: < 3s load time on 3G, Lighthouse score > 90"

"Create a Next.js 14 application with:
- App Router (not Pages Router)
- Server Components by default
- Client Components where needed (use 'use client')
- API Routes in app/api directory
- Dynamic routing with catch-all routes
- Metadata API for SEO
- Streaming with Suspense
- Server Actions for form handling

Example structure:
app/
├── layout.tsx (root layout)
├── page.tsx (home page)
├── about/page.tsx
├── blog/
│   ├── page.tsx (blog list)
│   └── [slug]/page.tsx (individual post)
├── api/
│   └── posts/route.ts
└── components/
    ├── Header.tsx (Server Component)
    └── SearchBar.tsx (Client Component with 'use client')"

"Set up Prisma ORM for our Next.js app:

1. Install and initialize:
   npm install prisma @prisma/client
   npx prisma init

2. Define schema (schema.prisma):
   - User model (id, email, password, createdAt)
   - Post model (id, title, content, userId, published, createdAt)
   - Comment model (id, content, postId, userId, createdAt)
   - Relations: User -> Posts, User -> Comments, Post -> Comments

3. Create migration:
   npx prisma migrate dev --name init

4. Generate Prisma Client:
   npx prisma generate

5. Create database utilities (lib/db.ts):
   - Singleton Prisma Client instance
   - Helper functions for common queries

6. Implement CRUD operations:
   - Create post
   - Get all posts
   - Get post by ID
   - Update post
   - Delete post

Use TypeScript for type safety with Prisma's generated types"

"Implement authentication using NextAuth.js:

1. Install:
   npm install next-auth @next-auth/prisma-adapter

2. Create [...nextauth]/route.ts:
   - Providers: Google, GitHub, Email
   - Prisma adapter for database sessions
   - JWT strategy
   - Session callback to include user data

3. Add authentication pages:
   - /signin (custom sign-in page)
   - /signup (custom registration)
   - /verify-email (email verification)

4. Protect routes:
   - Create middleware.ts to protect /dashboard/*
   - Redirect unauthenticated users to /signin
   - Use getServerSession in Server Components
   - Use useSession in Client Components

5. Add user profile:
   - View profile information
   - Update avatar
   - Change password
   - Delete account

Include proper error handling and loading states"

"Add real-time chat to our application using Socket.io:

1. Backend (server.js):
   - Set up Socket.io server
   - Handle connection/disconnection
   - Implement rooms for different channels
   - Broadcast messages to room members
   - Handle typing indicators
   - Store messages in database

2. Frontend (React):
   - Create socket connection context
   - Chat component with message list
   - Message input with send button
   - Real-time message updates
   - Typing indicator ('User is typing...')
   - Online/offline status

3. Features:
   - Message delivery confirmations
   - Read receipts
   - File/image sharing
   - Emoji reactions
   - Message editing and deletion

4. Performance:
   - Paginated message loading
   - Optimistic UI updates
   - Connection recovery
   - Rate limiting

Use TypeScript for type-safe socket events"