BMAD-METHOD/expansion-packs/javascript-fullstack-pack/DOCUMENTATION

JavaScript Full-Stack Expansion Pack

A comprehensive BMAD-METHOD expansion pack for building modern JavaScript applications with specialized agents for frontend, backend, and full-stack development.

Overview

This expansion pack provides a complete team of AI agents specialized in JavaScript development, covering:

• Frontend Development: React, Vue, Svelte, Angular with modern tooling
• Backend Development: Node.js, Express, Fastify, NestJS
• API Development: REST, GraphQL, WebSocket, tRPC
• Database Integration: SQL (PostgreSQL, MySQL) and NoSQL (MongoDB, Redis)
• Modern Tooling: Vite, Webpack, TypeScript, ESBuild
• Testing: Jest, Vitest, Cypress, Playwright
• Deployment: Docker, Kubernetes, Serverless

Agents Included (5 Total)

Planning & Architecture

• JS Solution Architect: Designs full-stack JavaScript architectures, technology selection, and system design

Development Agents

• React Developer: Expert in React 18+, Next.js 14, hooks, and modern state management
• Node Backend Developer: Backend development with Express, Fastify, NestJS, and database integration
• API Developer: REST, GraphQL, tRPC API design with versioning and documentation

Specialized Roles

• TypeScript Expert: Type safety, advanced type patterns, migration strategies, and strict mode configuration

Installation

# Install BMAD-METHOD if not already installed
npx bmad-method install

# Install this expansion pack
npm install bmad-expansion-javascript-fullstack

# Or manually copy to your bmad-core/expansion-packs directory

Quick Start

Web UI Usage

1. Load the full-stack team bundle:

   *load team-javascript-fullstack
   

2. Start with architecture planning:

   *js-solution-architect
   I need to build a real-time collaboration platform with React frontend and Node.js backend
   

3. Switch to specific development agents as needed:

   *react-developer
   *node-backend-developer
   *api-developer
   

IDE Usage

1. Initialize with JavaScript templates:

   npx bmad-method init --expansion javascript-fullstack
   

2. Use specialized agents through the CLI:

   npx bmad-method develop --agent react-developer
   

Agent Capabilities

JS Solution Architect

• Full-stack architecture design
• Technology stack selection
• Microservices vs monolith decisions
• Database schema design
• API contract definition
• Performance and scalability planning

React Developer

• Modern React patterns (hooks, context, custom hooks)
• State management (Redux, Zustand, Jotai, Recoil)
• Next.js for SSR/SSG
• Component libraries (shadcn/ui, MUI, Chakra)
• React Query for data fetching
• Performance optimization

Node Backend Developer

• Express, Fastify, NestJS frameworks
• Authentication & authorization (JWT, OAuth, Passport)
• Database integration (Prisma, TypeORM, Mongoose)
• Background jobs (Bull, BullMQ)
• Caching strategies (Redis)
• Error handling and logging

API Developer

• RESTful API design
• GraphQL schema and resolvers
• tRPC for type-safe APIs
• API documentation (OpenAPI/Swagger)
• Versioning strategies
• Rate limiting and throttling

TypeScript Expert

• TypeScript configuration optimization
• Advanced type patterns
• Generic types and utility types
• Type inference and narrowing
• Migration from JavaScript
• Type safety for APIs

Structure

Agent Teams

• fullstack-team.yaml: Complete full-stack development team
• frontend-team.yaml: Frontend-focused development team
• backend-team.yaml: Backend and API development team

Workflows (6 Total)

• fullstack-greenfield.yaml: New full-stack project from scratch
• frontend-app-development.yaml: Frontend application workflow
• backend-api-development.yaml: Backend API development workflow
• feature-development.yaml: Adding features to existing apps
• mvp-rapid-prototype.yaml: Fast MVP and prototype development
• migration-to-typescript.yaml: JavaScript to TypeScript migration

Checklists (8 Total)

• architecture-review-checklist.md: Architecture validation
• api-design-checklist.md: API design quality
• frontend-checklist.md: React/Next.js quality
• backend-checklist.md: Node.js backend quality
• security-checklist.md: Security validation
• performance-checklist.md: Performance optimization
• deployment-readiness-checklist.md: Production deployment
• story-dod-checklist.md: Story definition of done

Tasks (6 Total)

• create-development-story.md: Story creation guide
• create-architecture-doc.md: Architecture documentation
• create-api-spec.md: API specification creation
• setup-project.md: Project initialization
• code-review.md: Code review process
• performance-optimization.md: Performance tuning

Data/Reference (6 Total)

• development-guidelines.md: Coding standards and conventions
• architecture-patterns.md: Common architecture patterns
• best-practices.md: Full-stack best practices
• technology-stack-guide.md: Stack selection guide
• security-guidelines.md: Security implementation
• deployment-strategies.md: Deployment patterns

Templates (2 Total)

• fullstack-javascript-prd.md: Comprehensive PRD template
• javascript-development-story.md: Detailed story template

Use Cases

Building a SaaS Application

*js-solution-architect
I want to build a project management SaaS with:
- React frontend with real-time updates
- Node.js REST API
- PostgreSQL database
- Stripe payment integration
- Multi-tenant architecture

Creating a Real-Time Chat App

*node-backend-developer
Build a WebSocket-based chat server with:
- Socket.io for real-time communication
- Redis for pub/sub
- MongoDB for message persistence
- JWT authentication

Performance Optimization

*performance-engineer
My React app is loading slowly. Here's my bundle analysis:
[attach webpack-bundle-analyzer output]
Help me optimize the bundle size and loading performance.

Best Practices Included

Each agent follows industry best practices:

• Code Quality: ESLint, Prettier, Husky pre-commit hooks
• Testing: Unit tests, integration tests, E2E tests
• Documentation: JSDoc, TypeDoc, API documentation
• Security: OWASP guidelines, dependency scanning
• Performance: Code splitting, lazy loading, caching
• Accessibility: WCAG compliance, semantic HTML

Integration with Core BMAD

This expansion pack integrates seamlessly with core BMAD agents:

• Analyst: Gathers requirements for JS projects
• PM: Creates PRDs using JS-specific templates
• Architect: Works with JS Solution Architect for technical design
• Scrum Master: Creates stories using JS development templates
• Dev: Executes development with JS-specific guidance
• QA: Tests with JS testing frameworks

Configuration

Add to your bmad-core/config/core-config.yaml:

expansion_packs:
  - name: javascript-fullstack
    enabled: true
    agents:
      - js-solution-architect
      - react-developer
      - node-backend-developer
      - api-developer
      - typescript-expert

Contributing

Contributions welcome! Add new agents for:

• Svelte/SvelteKit development
• Deno/Bun runtimes
• Astro/Remix frameworks
• Mobile development (React Native)
• Desktop apps (Electron, Tauri)

License

MIT License - Part of the BMAD-METHOD ecosystem

Support

• GitHub Issues: Report bugs or request features
• Discord: Join the BMAD community
• Documentation: Full docs in /docs directory