# 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:
```bash
git clone https://github.com/seu-usuario/BMAD-METHOD.git
cd BMAD-METHOD/bmad-web
```

2. Instale as dependencias:
```bash
npm install
```

3. Configure as variaveis de ambiente:
```bash
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:
```bash
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

```bash
# 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
- [x] Estrutura do monorepo
- [x] Frontend basico com Next.js
- [x] API com autenticacao
- [x] 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](../LICENSE) para detalhes.

---

**BMAD - Build More, Architect Dreams**

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