# 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

```bash
# 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:
   ```bash
   npx bmad-method init --expansion javascript-fullstack
   ```

2. Use specialized agents through the CLI:
   ```bash
   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`:

```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