Project Setup Checklist

Starting a new project? Run through this checklist.

What’s here:

• Before You Start — Questions to answer first
• Scaffolding — Starter commands
• Essential Files — CLAUDE.md, .env, .gitignore
• Templates — Copy-paste code
• Deployment — Ship it

Time: 15 minutes to a properly set up project.

---

Before You Start

Questions to Answer

Question	Why it matters
What problem am I solving?	Keeps you focused
Who is it for?	Shapes decisions
What’s the MVP?	Prevents scope creep
What’s the tech stack?	Informs AI prompts
What’s my timeline?	Sets pace

Project Scaffolding

Option A: Use a Starter

# Next.js
npx create-next-app@latest my-app --typescript --tailwind --eslint

# Astro
npm create astro@latest my-app

# Vite + React
npm create vite@latest my-app -- --template react-ts

# SvelteKit
npm create svelte@latest my-app

Option B: AI Scaffold

Tell Claude Code or Cursor:

Create a new [FRAMEWORK] project with:
- TypeScript
- Tailwind CSS
- [DATABASE/AUTH/ETC]

Project structure should follow best practices.
Include a README with setup instructions.

Essential Files

CLAUDE.md / AGENTS.md

# Project Context

## What This Is
[One paragraph description]

## Tech Stack
- Framework: [Next.js 14 / Astro / etc]
- Language: TypeScript
- Styling: Tailwind CSS
- Database: [PostgreSQL / SQLite / etc]
- Auth: [Clerk / NextAuth / etc]

## Build Commands
- `npm run dev` - Start dev server
- `npm run build` - Production build
- `npm test` - Run tests

## Project Structure
src/
├── components/   # Reusable UI components
├── pages/        # Route pages
├── lib/          # Utilities and helpers
└── styles/       # Global styles

## Conventions
- [Your coding conventions]
- [Naming patterns]
- [File organization rules]

## Current Focus
[What you're working on now]

.env.example

# Database
DATABASE_URL="postgresql://user:pass@localhost:5432/db"

# Auth
AUTH_SECRET="generate-a-secret"
NEXTAUTH_URL="http://localhost:3000"

# APIs
OPENAI_API_KEY=""
ANTHROPIC_API_KEY=""

# Services
STRIPE_SECRET_KEY=""
RESEND_API_KEY=""

.gitignore

# Dependencies
node_modules/

# Build
dist/
build/
.next/
.astro/

# Environment
.env
.env.local
.env*.local

# IDE
.vscode/
.idea/

# OS
.DS_Store

# Logs
*.log

First Commits

Commit 1: Initial Setup

git init
git add .
git commit -m "chore: initial project setup"

Commit 2: Core Config

git add .
git commit -m "chore: add TypeScript and Tailwind config"

Commit 3: First Feature

git add .
git commit -m "feat: add landing page"

AI Prompting Checklist

Before prompting for a new feature:

□ Clear description of what I want
□ Tech stack context provided
□ Constraints mentioned
□ Example of similar feature (if any)
□ File paths I want modified

Project Health Checks

Weekly

□ Dependencies up to date?
□ Tests passing?
□ No TypeScript errors?
□ README accurate?
□ CLAUDE.md current?

Before Shipping

□ Environment variables documented?
□ Build succeeds?
□ Tested on mobile?
□ Error handling in place?
□ Loading states added?
□ Committed and pushed?

Quick Setup Templates

API Route (Next.js)

// app/api/[resource]/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  try {
    // Your logic here
    return NextResponse.json({ data: [] });
  } catch (error) {
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    // Your logic here
    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}

Component Template

// components/MyComponent.tsx
interface MyComponentProps {
  title: string;
  children: React.ReactNode;
}

export function MyComponent({ title, children }: MyComponentProps) {
  return (
    <div className="p-4 rounded-lg border">
      <h2 className="text-xl font-bold">{title}</h2>
      <div className="mt-2">{children}</div>
    </div>
  );
}

Hook Template

// hooks/useMyHook.ts
import { useState, useEffect } from "react";

export function useMyHook(initialValue: string) {
  const [value, setValue] = useState(initialValue);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    // Effect logic
  }, [value]);

  return { value, setValue, loading, error };
}

Deployment Checklist

□ Environment variables set in production
□ Database migrated
□ Domain configured
□ SSL enabled
□ Error tracking set up (Sentry, etc.)
□ Analytics added
□ Monitoring in place
□ Backup strategy defined

Pro Tips

Tip: Start with CLAUDE.md before writing any code — it forces you to think

Tip: Keep your first version embarrassingly simple

Tip: Deploy on day one, even if it’s just “Hello World”

Tip: Use feature flags for work-in-progress features

Tip: Write the README as if explaining to yourself in 6 months

---

🎯 Start a Project Now

1. Run a scaffold command for your stack
2. Create CLAUDE.md using the template
3. Copy the .gitignore
4. Make your first commit
5. Deploy — even if it’s just “Hello World”

A proper setup takes 15 minutes and saves hours later. Do it right.

---

Related

• Project Scaffolding Guide — Deep dive
• Git for Vibecoders — Version control basics
• 10 First Project Ideas — What to build
• Tools Directory — Pick your tools