Choosing Tools That Maximize Speed, Clarity, and AI Effectiveness
A tech stack is not about “best tools”.
It is about minimizing friction between:
This handbook uses a stack that is:
- TypeScript-first
- End-to-end visible
- Real-time by default
- Easy for AI to reason about and modify
IDE Setup Optimized for AI Coding
Choosing the Right Editor
Best Options for AI Coding:
- Trae - Built specifically for AI coding (fork of VS Code)
- VS Code - Most popular, extensive AI integration support
- Cursor - Built specifically for AI coding (fork of VS Code)
Improve Code Readability:
- Use consistent indentation (2 or 4 spaces)
- Enable syntax highlighting and semantic tokens
- Show whitespace characters when needed
- Use a clean, readable font (Fira Code, JetBrains Mono, etc.)
Performance Settings:
- Disable unnecessary extensions when working with AI
- Adjust auto-save settings (AI tools work better with saved files)
- Configure Git to auto-stage changes for easier context sharing
What it does:
Acts as the primary AI engineer for planning, coding, refactoring, and reasoning.
Why exactly Claude Code:
- Strong long-context understanding
- Better architectural reasoning
- More reliable multi-file changes
AI advantage:
Complex systems, refactors, and workflows can be handled without losing context or intent.
**Clerk (Authentication & Payments)**
What it does:
Handles authentication, user management, sessions, and subscriptions.
Why exactly Clerk:
- Secure and production-ready
- Clean, well-defined APIs
- Easy integration with Next.js and Convex
- Minimal custom auth logic required
AI advantage:
AI does not need to reason about security-sensitive flows, it works with standardized, predictable APIs.
**Next.js (Application Framework)**
What it does:
Provides routing, rendering, server logic, and frontend structure in one framework.
Why exactly Next.js:
- Clear file-based routing
- Strong server vs client separation
- First-class TypeScript support
- Tight integration with Vercel
AI advantage:
AI understands Next.js conventions extremely well, can safely add pages, components, and APIs without breaking the app structure.
**Convex (Backend + Database)**
What it does:
Combines backend logic, database schema, and real-time data into one TypeScript-based system.
Why exactly Convex:
- Real-time updates by default
- Database schema is directly visible in code
- Backend functions live next to data definitions
- No ORM or hidden SQL layer
AI advantage:
AI can see how the database is structured and used, which dramatically improves correctness when adding features or modifying data models.
