THE VIBE CODE HERO'S QUICKSTART

npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm install @clerk/nextjs @prisma/client prisma
npm install -D @types/node

npx prisma init

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  posts     Post[]
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
}

// app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <h1 className="text-4xl font-bold">My App</h1>
      <p>Solving [problem] for [users]</p>
      <button className="bg-blue-500 text-white px-4 py-2 rounded">
        Get Started
      </button>
    </main>
  )
}

git init
git add .
git commit -m "Initial commit"
gh repo create my-app --public --source=. --push

// Loading state
const [loading, setLoading] = useState(false)
{loading ? "Saving..." : "Save"}

// Error handling
try {
  // your code
} catch (error) {
  toast.error("Something went wrong")
}

// Empty state
{data.length === 0 && <p>No items yet. Create your first!</p>}