Advanced practical scenario · Scenario 1

Create a new project from scratch

Master the complete project kickoff process, from requirements analysis to technology selection, from architecture design to project initialization. Use AI tools to accelerate project kickoff and gain the ability to start new projects independently.

Learning objectives

Master the complete project kickoff process
Have the ability to make technology choices and design architectures
Can use AI tools to speed up project initialization
Understand best practices for project initialization

Methodology

Project kickoff process

1
Requirements analysis: Understand business requirements, user requirements, and technical requirements, and clarify the project goals and scope
2
Technology selection: Choose the right technology stack based on factors such as requirements, team capabilities, cost, and ecosystem
3
Architecture Design: Design system architecture, module division, data models, interface design
4
Project initialization: Create the project structure, configure the toolchain, set up CI/CD, and write the initial documentation

Technical selection decision-making framework

Selection criteria

Performance
Response time, throughput, concurrency capacity
Cost
Development costs, operational costs, licensing fees
Team capabilities
Team familiarity, learning curve, recruiting difficulty
ecosystem
Community activity, third-party libraries, tool support
Maintainability
Code quality, documentation completeness, long-term support
Scalability
Horizontal scaling, vertical scaling, architectural flexibility

AI tool applications：Use Cursor Agent or Spec to automatically generate technology selection recommendations and comparative analysis based on the requirements description.

Architecture design principles

Clean Architecture

  • • Layered architecture：Entities → Use Cases → Interfaces → Frameworks
  • • Dependency Rules: The inner layer does not depend on the outer layer; dependency direction points inward
  • • AI advantages: Decoupled across layers, suitable for AI chunked generation and maintenance

DDD (Domain-Driven Design)

  • • Ubiquitous language: Use AI to distill a common language for the business domain
  • • Bounded Context: AI-assisted business boundary partitioning
  • • Entities and value objects: AI generates domain model code

Microservices vs monolith

  • • Monolith advantages: Simple, rapid development, suitable for small teams
  • • Advantages of microservices: independent deployment, flexible tech stack, scalable
  • • Selection recommendations: Start with a monolith and evolve to microservices as needed

Best practices for project initialization

Table of contents structure

project-name/
├── src/
│   ├── app/              # application layer (Next.js App Router)
│   ├── components/       # UI components
│   ├── lib/              # utility functions
│   └── types/            # TypeScript types
├── prisma/               # database schema (if using Prisma)
├── public/               # static assets
├── tests/                # test files
├── docs/                 # project documentation
├── .github/              # GitHub Actions
├── .env.example          # environment variable example
├── README.md             # project description
├── package.json          # dependency management
└── tsconfig.json         # TypeScript configuration

Toolchain configuration

  • • code formatting：Prettier + ESLint
  • • Type checking：TypeScript strict mode
  • • Testing framework：Jest + React Testing Library
  • • Git Hooks：Husky + lint-staged

CI/CD configuration

  • • Automated testing: Automatically run tests on every commit
  • • Code review: Automatically run ESLint and type checking
  • • Automatic deployment: Automatically deploy to the test/production environment after passing tests

AI tool applications

Use Cursor Agent for architecture design

Use Cursor's Agent mode to describe requirements in natural language, and AI will automatically generate the architecture design:

Sample Prompt:

"Design an architecture for a SaaS application that includes user authentication, data storage, API services, and a frontend interface. It must support multi-tenancy, scalability, and ease of maintenance."

  • • AI generates system architecture diagrams, module breakdowns, and data model designs
  • • You can iteratively refine the architecture design until you are satisfied
  • • Generate architecture documents and code structure

Use Spec-driven development for technology selection

Write a technical selection spec, and AI generates selection recommendations and comparative analysis based on the spec:

  • • Clarify requirements: performance requirements, team size, budget constraints
  • • AI-generated: technology stack recommendations, comparative analysis, selection rationale
  • • Decision support: selection recommendations based on data and technology trends

Use Windsurf to initialize large projects

Windsurf's Fast Context technology can quickly understand the structure of large projects and accelerate project initialization:

  • • Rapid analysis: Analyze the structure of existing projects and understand best practices
  • • Template generation: generate project templates based on analysis results
  • • Configuration synchronization: automatically configure the toolchain and CI/CD

Use Fabric to generate project documentation

Automatically generate project documentation using Fabric's Patterns:

  • • README generation: automatically generate README based on the project structure
  • • API documentation: generate API documentation based on code comments
  • • Architecture document: generate architecture documents based on architecture design

Practical case study

Case 1: Build a SaaS app from scratch

Tech stack

Next.jsPrismaVercelTypeScriptTailwind CSS

Step 1: Requirements analysis (2 hours)

  • • Clear business requirements: multi-tenant SaaS application, supports user registration, data management, and access control
  • • Technical requirements: rapid development, easy scalability, and controllable costs
  • • Use AI tools: Cursor Agent for requirement clarification and document generation

Step 2: Technology selection (1 hour)

  • • Frontend: Next.js (SSR, API Routes, Vercel deployment)
  • • Database: PostgreSQL + Prisma (type safety, migration management)
  • • Deployment: Vercel (zero config, automatic CI/CD)
  • • Use AI tools: Spec-driven generation of selection comparison analysis

Step 3: Architecture design (2 hours)

  • • System architecture: Next.js App Router + Prisma + Vercel
  • • Data model: multi-tenant design for users, tenants, and data tables
  • • API design: RESTful API + Next.js API Routes
  • • Use AI tools: Cursor Agent generates architecture diagrams and code structure

Step 4: Project initialization (2 hours)

  • • Create a Next.js project: npx create-next-app@latest
  • • Configure Prisma: initialize Prisma, design the Schema, generate the Client
  • • Configure the toolchain: ESLint, Prettier, TypeScript, Git Hooks
  • • Set up CI/CD: use GitHub Actions for automated testing and deployment
  • • Use AI tools: Windsurf for quick setup, Fabric to generate documentation

Case 2: Building a microservices architecture from scratch

Tech stack

DockerKubernetesService meshgRPCNode.js

Step 1: Requirements analysis (3 hours)

  • • Business requirements: large distributed systems, requiring high availability and scalability
  • • Technical requirements: service decoupling, independent deployment, service governance
  • • Use AI tools: Cursor Agent for microservice architecture design

Step 2: Service decomposition (2 hours)

  • • User service: user authentication, permission management
  • • Order service: order creation, payment processing
  • • Product services: product management, inventory management
  • • Use AI tools: divide bounded contexts using the DDD approach

Step 3: Infrastructure design (3 hours)

  • • Containerization: build and push Docker images
  • • Orchestration: Kubernetes deployment configuration
  • • Service mesh: Istio or Linkerd configuration
  • • Monitoring: Prometheus + Grafana
  • • Use AI tools: Cursor Agent generates K8s configurations and deployment scripts

Step 4: Project initialization (4 hours)

  • • Create a Monorepo structure: use pnpm workspaces or Nx
  • • Initialize each service: create service templates, configure the toolchain
  • • Set up CI/CD: build and deployment processes for multi-service applications
  • • Using AI tools: Windsurf for batch initialization, Fabric for document generation

Learning outcomes checklist

Able to independently complete the project kickoff process (requirements analysis → technology selection → architecture design → project initialization)
Master the technology selection decision-making framework and make reasonable technology choices based on requirements
Understand architectural design principles such as Clean Architecture and DDD
Able to use Cursor Agent for architecture design and code generation
Be able to make technical choices driven by Spec
Able to use Windsurf and Fabric to speed up project initialization
Complete at least one practical case study (SaaS application or microservices architecture)