Claude Code Starter Web

The ultimate starter template for building modern web apps with Claude Code.

View Course »

Tech Stack · Getting Started · Scripts

Tip

This template is part of the Vibe Coding 101 course. It is Open Source and free to use for everyone!

This is a starter template for building modern web applications using Claude Code. It comes pre-configured with a robust tech stack to help you hit the ground running.

🚀 Tech Stack

This project uses the following technologies:

• Next.js 15: The React framework for the web (App Router).
• React 19: The library for web and native user interfaces.
• Tailwind CSS 4: A utility-first CSS framework.
• shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS.
• Supabase: Open source Firebase alternative (Database, Auth, Realtime).
• TypeScript: Typed JavaScript for better developer experience.
• Playwright: Reliable end-to-end testing for modern web apps.
• Zod: TypeScript-first schema declaration and validation library.
• React Hook Form: Performant, flexible and extensible forms with easy-to-use validation.
• motion: A modern animation library for React (formerly framer-motion).

🛠️ Getting Started

Prerequisites

• Node.js (v18 or later recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd claude-code-starter-web

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Copy .env.example to .env.local (create .env.example if it doesn't exist based on your needs, primarily for Supabase).
   • Fill in the required values in .env.local.

Development

Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

📜 Available Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the application for production.
• npm run start: Starts the production server.
• npm run lint: Runs ESLint to check for code quality issues.
• npm run typecheck: Runs TypeScript compiler to check for type errors.
• npm run test: Runs Playwright end-to-end tests.

📂 Project Structure

• app/: Next.js App Router pages and layouts.
• components/: React components, including ui/ for shadcn/ui components.
• hooks/: Custom React hooks.
• lib/: Utility functions and shared logic.
• public/: Static assets like images and fonts.
• supabase/: Supabase configuration and migrations.
• tests/: Playwright test specifications.

🌍 Environment Variables

This project uses Next.js environment variable conventions:

• Server-side: Variables without NEXT_PUBLIC_ prefix (e.g., DATABASE_URL) are only available on the server.
• Client-side: Variables with NEXT_PUBLIC_ prefix (e.g., NEXT_PUBLIC_SUPABASE_URL) are exposed to the browser.

Note: Never commit your .env.local file to version control.