Project Setup Checklist

A step-by-step guide for bootstrapping a new project with the full stack: Next.js, Tailwind CSS 4, shadcn/ui, Convex, and Vercel.

1. Create the Next.js app

npx create-next-app@latest my-project --typescript --app --tailwind --eslint --src-dir=false
cd my-project
  • TypeScript enabled
  • App Router selected
  • Tailwind CSS included
  • ESLint configured

2. Configure Tailwind CSS 4

Replace the contents of app/globals.css with the v4 import and your theme tokens.

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.60 0.20 250);
  --font-sans: "Inter", sans-serif;
}
  • Remove legacy tailwind.config.ts if present
  • Switch to @import "tailwindcss" syntax
  • Define initial color tokens in @theme

3. Add shadcn/ui

npx shadcn@latest init
npx shadcn@latest add button card sidebar input label dialog
  • Run init to generate components.json and CSS variables
  • Add core components used across most pages
  • Verify the sidebar-08 variant if using sidebar navigation

4. Set up Convex

npm install convex
npx convex init
  • Create convex/schema.ts with initial table definitions
  • Add ConvexProvider to the root layout
  • Start npx convex dev alongside the Next.js dev server

5. Environment variables

vercel env pull .env.local
  • Add CONVEX_DEPLOYMENT and NEXT_PUBLIC_CONVEX_URL to .env.local
  • Confirm .env.local is in .gitignore
  • Set the same variables in the Vercel project dashboard

6. Set up credentials for agents

  • Create .envrc with Vercel and Convex tokens (do not commit)
  • Verify ./cli.sh vercel whoami returns the correct account

7. Deploy

./cli.sh npx convex deploy    # Deploy Convex functions
./cli.sh vercel --prod         # Deploy to Vercel production
  • Convex functions deployed without errors
  • Vercel build succeeds
  • Production URL loads and connects to Convex

8. Post-deploy

  • Verify real-time subscriptions work in production
  • Check dark mode toggle renders correctly
  • Confirm environment variables are not exposed to the client
  • Share the production URL with the team