Skip to main content

Required Tools

1

Node.js & pnpm

# Install Node.js 20+ via nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 20
nvm use 20

# Install pnpm
npm install -g pnpm
2

VS Code

Download from code.visualstudio.comEssential extensions:
  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense
  • Prisma
  • GitLens
3

Claude Code Terminal

# Install Claude CLI
npm install -g @anthropic/claude-cli

# Verify installation
claude --version
4

Git Configuration

git config --global user.name "Your Name"
git config --global user.email "[email protected]"
git config --global init.defaultBranch main

Development Stack

  • Frontend Tools
  • Backend Tools
  • AI Development
# Essential global packages
pnpm add -g vercel
pnpm add -g @mintlify/cli

Browser Extensions

  • React Developer Tools
  • Redux DevTools
  • Pesticide CSS

VS Code Settings

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Project Configuration

TypeScript Config

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

ESLint & Prettier

.eslintrc.js
module.exports = {
  extends: [
    'next/core-web-vitals',
    'prettier'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'warn',
    'react/no-unescaped-entities': 'off'
  }
}
.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Git Hooks

# Install husky and lint-staged
pnpm add -D husky lint-staged
pnpm husky init

# Configure pre-commit hook
echo "pnpm lint-staged" > .husky/pre-commit
package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,mdx}": [
      "prettier --write"
    ]
  }
}

Environment Variables

Local Development

.env.local
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://[project].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_KEY=eyJ...

# AI Services
OPENAI_API_KEY=sk-...
LANGCHAIN_API_KEY=ls_...
TOGETHER_API_KEY=...

# Monitoring
SENTRY_DSN=https://...
NEXT_PUBLIC_SENTRY_DSN=https://...

# Feature Flags
NEXT_PUBLIC_ENABLE_AI=true
Never commit .env.local files. Use .env.example as a template and store actual values in 1Password or environment-specific vaults.

Database Setup

1

Install Supabase CLI

brew install supabase/tap/supabase
2

Login to Supabase

supabase login
3

Link Project

supabase link --project-ref [project-ref]
4

Pull Schema

supabase db pull

Testing Tools

Unit Testing

pnpm add -D vitest @testing-library/react

E2E Testing

pnpm add -D playwright @playwright/test

Troubleshooting

npm install -g pnpm
# Or via corepack
corepack enable
corepack prepare pnpm@latest --activate
# Fix npm permissions
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
# Find and kill process
lsof -i :3000
kill -9 [PID]

# Or use different port
PORT=3001 pnpm dev

Next Steps

1

Clone Expand AI

Follow the Expand AI Setup guide
2

Join Slack

Connect with the team in #dev channel
3

Read Driver Docs

Review claude.md, plan.md, and agents.md in the repo