VibeCoding Guide for Starters

This document provides a recommended set of technologies and structures specifically for those new to the VibeCoding development methodology (>85% AI). The goal is to simplify initial choices, helping you focus on learning how to interact effectively with AI.

Recommended Technology Choices for Starters

To begin, we recommend choosing one of the following tech stacks, as they have clear structures, good typing support, and are friendly to AI code generation.

1. Backend

Choose one language and framework that suits you or the project:

• Node.js:
  • NestJS (v11 or later): Very structured, based on TypeScript, ideal for AI to follow existing patterns (modules, controllers, services).
  • Honojs: Minimalist, fast, very suitable for APIs or Edge Functions applications (e.g., on Cloudflare Workers). Requires good project structure due to its minimalist nature.
• PHP:
  • Laravel (v11 or later) with PHP 8+ Strong Types: Use the strong typing features of PHP 8+ in Controllers, Form Requests, Services for more accurate AI code generation.
• Python:
  • FastAPI: Automatically generates API documentation, based on Python's type hints. Requirement: Use type hints consistently for maximum effectiveness with VibeCoding.

2. Frontend

Choose one framework based on preference or project requirements:

• Nuxt 3 (Based on Vue.js): Clear structure (pages, layouts, composables), suitable if you are familiar with Vue.js.
• Next.js (Based on React): Similar structure to Nuxt (pages or app router), suitable if you are familiar with React.

Note: Both Nuxt 3 and Next.js should be used with TypeScript to optimize VibeCoding.

3. Mobile (If needed)

Choose one framework:

• Flutter (Dart): Dart language has strong typing, declarative UI model helps AI easily generate widgets.
• React Native (with TypeScript): Uses React principles. Requirement: Using TypeScript is mandatory for effective VibeCoding.

Choosing an IDE with AI Agent Support

Any IDE that supports Agent mode can perform VibeCoding. The crucial part is setting up the context for each IDE: user rules, project rules, documents, etc.

Some recommended IDEs to start with include:

• VSCode + AugmentCode: Use the 14-day trial. Inline Assist and Completion are not yet optimal, but the Agent is very good.
• Cursor: Also a good choice to start with.
• Windsurf: Also a good choice to start with.

Recommended Directory Structure: Feature-Based

Instead of grouping files by technical type (controllers, services), group them by feature or business domain. We recommend using a root folder named modules (or features, domains).

src/
├── modules/  # Or features, domains
│   │
│   ├── users/  # User management module
│   │   ├── user.controller.ts  # Controller handling HTTP requests
│   │   ├── user.service.ts     # Business logic
│   │   ├── user.entity.ts      # Entity/model definition
│   │   ├── user.dto.ts         # Data Transfer Objects (for request/response)
│   │   ├── user.routes.ts      # (If not using auto-routing framework)
│   │   └── user.module.ts      # (In NestJS or similar structure)
│   │
│   ├── products/ # Product management module
│   │   ├── product.controller.ts
│   │   ├── product.service.ts
│   │   ├── product.entity.ts
│   │   └── ... (other files)
│   │
│   └── orders/   # Order management module
│       └── ... (similar files)
│
└── shared/     # Shared components
    ├── config/
    ├── middleware/
    ├── utils/
    └── types/    # Shared types

Benefit: This structure provides clear context for AI when working on a specific feature, leading to more consistent and maintainable code generation.

Key Principles to Remember

• Typing is King: Always use TypeScript or strong types (PHP 8+, Python type hints, Dart) whenever possible. This is the most crucial factor for AI effectiveness.
• Clear Prompts: Provide detailed instructions and context for the AI.
• Review Carefully: Always double-check the code generated by AI. AI is an assistant, not a complete replacement.

Happy VibeCoding!