7.1 KiB

Raw Blame History

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

Planning & Architecture

JS Solution Architect: Designs full-stack JavaScript architectures
Frontend Architect: Specializes in frontend architecture and state management
Backend Architect: Focuses on API design, microservices, and scalability

Development Agents

React Developer: Expert in React, Next.js, and modern React patterns
Vue Developer: Specializes in Vue 3, Nuxt, and composition API
Node Backend Developer: Backend development with Express, Fastify, NestJS
API Developer: REST, GraphQL, and modern API patterns
Full-Stack Developer: End-to-end JavaScript development

Specialized Roles

TypeScript Expert: Type safety, advanced types, and migration
Performance Engineer: Optimization, profiling, and monitoring
DevOps Engineer: CI/CD, containerization, and deployment
Security Specialist: Security best practices and vulnerability assessment
Testing Engineer: Test strategy, automation, and quality assurance

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

Load the full-stack team bundle:
```
*load team-javascript-fullstack
```

Start with architecture planning:

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

Switch to specific development agents as needed:

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

IDE Usage

Initialize with JavaScript templates:

npx bmad-method init --expansion javascript-fullstack

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

Templates Included

PRD Templates

js-fullstack-prd.md: Full-stack project requirements
frontend-app-prd.md: Frontend application requirements
backend-api-prd.md: Backend API requirements
microservices-prd.md: Microservices architecture requirements

Architecture Templates

fullstack-architecture.md: Complete stack architecture
frontend-architecture.md: Frontend-specific architecture
backend-architecture.md: Backend system design
api-architecture.md: API design and documentation

Story Templates

frontend-feature-story.md: Frontend feature development
backend-endpoint-story.md: Backend endpoint implementation
api-integration-story.md: API integration work
performance-optimization-story.md: Performance improvements
security-enhancement-story.md: Security implementations

Workflow Plans

fullstack-mvp-workflow.md: MVP development workflow
feature-development-workflow.md: Adding new features
refactoring-workflow.md: Code refactoring process
deployment-workflow.md: Deployment and release process

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
      - vue-developer
      - node-backend-developer
      - api-developer
      - typescript-expert
      - performance-engineer
      - devops-engineer
      - security-specialist
      - testing-engineer

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

7.1 KiB Raw Blame History