BMAD-METHOD/bmad-web/README.md

BMAD Web - Consumer Frontend Application

Uma aplicacao web completa para consumidores finais do BMAD-METHOD (Build More, Architect Dreams).

Visao Geral

Este projeto transforma o BMAD-METHOD (atualmente uma CLI) em uma aplicacao web acessivel para usuarios finais, permitindo que qualquer pessoa utilize o framework de desenvolvimento agil impulsionado por IA.

Estrutura do Projeto

bmad-web/
├── apps/
│   ├── web/          # Frontend Next.js
│   └── api/          # Backend Express + WebSocket
├── packages/
│   ├── bmad-core/    # Core BMAD como biblioteca
│   ├── ui/           # Componentes UI compartilhados
│   └── config/       # Configuracoes compartilhadas
└── docs/             # Documentacao

Stack Tecnologico

Frontend

• Next.js 14 - Framework React com App Router
• TypeScript - Type safety
• Tailwind CSS - Estilos
• shadcn/ui - Componentes
• Zustand - Estado global
• TanStack Query - Data fetching
• Socket.io Client - Real-time

Backend

• Node.js 20+ - Runtime
• Express - HTTP Server
• Socket.io - WebSocket
• Prisma - ORM (para producao)
• JWT - Autenticacao

Requisitos

• Node.js 20.0.0 ou superior
• npm 10.0.0 ou superior

Instalacao

1. Clone o repositorio:

git clone https://github.com/seu-usuario/BMAD-METHOD.git
cd BMAD-METHOD/bmad-web

2. Instale as dependencias:

npm install

3. Configure as variaveis de ambiente:

cp .env.example .env
cp apps/api/.env.example apps/api/.env
cp apps/web/.env.local.example apps/web/.env.local

4. Inicie o desenvolvimento:

npm run dev

Isso iniciara:

• Frontend: http://localhost:3000
• API: http://localhost:4000

Funcionalidades

Para Usuarios

• Dashboard de Projeto - Visao geral do seu projeto
• Chat com Agentes IA - Interacao em tempo real com 21+ agentes especializados
• Workflows Guiados - 50+ workflows para todas as fases de desenvolvimento
• Editor de Artefatos - Edicao e versionamento de documentos
• Tracks Adaptativos - Quick Flow (~5min), BMAD Method (~15min), Enterprise (~30min)

Agentes Disponiveis

Agente	Funcao
John (PM)	Product Manager - PRDs e requisitos
Alex (Architect)	Arquiteto - Design de sistemas
Dev	Desenvolvedor Senior - Implementacao
Barry	Quick-Flow Solo Dev - Desenvolvimento rapido
UX Designer	Design de experiencia do usuario
Tech Writer	Documentacao tecnica
TEA	Test Architecture Agent - Estrategia de testes
Scrum Master	Coordenacao de equipe
Analyst	Analise de dados e requisitos

Workflows Principais

Analise

• Project Discovery
• Requirement Elicitation
• Team Composition

Planejamento

• PRD Creation
• Workflow Initialization

Solutioning

• Architecture Design
• Epic/Story Creation
• Excalidraw Diagrams

Implementacao

• Sprint Planning
• Sprint Status
• Retrospectives

Quick Flow

• Quick-Spec (~5 min)
• Quick-Dev (~5 min)

Scripts Disponiveis

# Desenvolvimento
npm run dev          # Inicia frontend e backend

# Build
npm run build        # Build de producao

# Lint
npm run lint         # Verifica codigo

# Banco de dados (producao)
npm run db:generate  # Gera cliente Prisma
npm run db:push      # Sincroniza schema
npm run db:studio    # Interface do banco

# Limpeza
npm run clean        # Remove node_modules e builds

Arquitetura

Frontend (Next.js)

apps/web/src/
├── app/              # Rotas (App Router)
│   ├── (auth)/       # Login, Register
│   ├── (dashboard)/  # Area logada
│   ├── projects/     # Gestao de projetos
│   ├── agents/       # Interface de agentes
│   └── workflows/    # Visualizacao de workflows
├── components/       # Componentes React
├── hooks/            # Hooks customizados
├── stores/           # Estado (Zustand)
└── types/            # TypeScript types

Backend (Express)

apps/api/src/
├── routes/           # Endpoints REST
├── services/         # Logica de negocio
├── middleware/       # Auth, errors
├── websocket/        # Handlers real-time
├── bmad/             # Integracao BMAD Core
└── database/         # Models (Prisma)

Packages

• @bmad/core - Tipos, loaders de agentes e workflows
• @bmad/ui - Componentes compartilhados (Button, Card, Input, etc.)
• @bmad/config - Configuracoes de TypeScript, ESLint

API Endpoints

Autenticacao

• POST /api/auth/register - Registro
• POST /api/auth/login - Login
• POST /api/auth/logout - Logout
• GET /api/auth/me - Usuario atual

Projetos

• GET /api/projects - Listar projetos
• POST /api/projects - Criar projeto
• GET /api/projects/:id - Detalhes do projeto
• PUT /api/projects/:id - Atualizar projeto
• DELETE /api/projects/:id - Deletar projeto

Agentes

• GET /api/agents - Listar agentes
• GET /api/agents/:id - Detalhes do agente
• POST /api/agents/:id/chat - Chat com agente

Workflows

• GET /api/workflows - Listar workflows
• POST /api/workflows/:id/start - Iniciar workflow
• GET /api/workflows/instance/:id/status - Status
• POST /api/workflows/instance/:id/step/complete - Completar passo

WebSocket Events

• agent:message - Mensagem do agente
• agent:typing - Indicador de digitacao
• workflow:progress - Progresso do workflow
• artifact:updated - Artefato atualizado

Proximos Passos

Fase 1 - MVP

• Estrutura do monorepo
• Frontend basico com Next.js
• API com autenticacao
• Chat com agentes
• Integracao com LLM (OpenAI/Anthropic)
• Persistencia em banco de dados

Fase 2 - Features

• Todos os agentes integrados
• Workflow engine completo
• Editor de artefatos rico
• Versionamento de artefatos

Fase 3 - Polish

• Onboarding wizard
• Templates de projeto
• Temas e personalizacao
• Mobile responsivo

Fase 4 - Scale

• Colaboracao em tempo real
• Integracoes (GitHub, Jira)
• API publica
• Analytics

Contribuindo

1. Fork o repositorio
2. Crie uma branch (git checkout -b feature/nova-funcionalidade)
3. Commit suas mudancas (git commit -am 'Adiciona nova funcionalidade')
4. Push para a branch (git push origin feature/nova-funcionalidade)
5. Abra um Pull Request

Licenca

MIT - Veja LICENSE para detalhes.

---

BMAD - Build More, Architect Dreams

Framework de desenvolvimento agil impulsionado por IA com 21 agentes especializados e 50+ workflows guiados.