Open
Conversation
- Criar BoardsService com CRUD completo para boards - Criar BoardsController com endpoints REST - Criar BoardsModule para encapsular o módulo - Implementar testes unitários do BoardsService - Adicionar DatabaseModule para configurar TypeORM - Configurar ValidationPipe global para validação de DTOs
- Criar ColumnsService com CRUD para colunas do Kanban - Criar ColumnsController com endpoints REST para colunas - Criar CardsService com CRUD e suporte a drag-and-drop - Criar CardsController com endpoints REST para cartões - Importar novos módulos no AppModule - Validação automática de dados em todos os endpoints
- Implementar testes do ColumnsService (create, findByBoard, findOne, update, delete) - Implementar testes do CardsService (create, findByColumn, findOne, update com drag-drop, delete) - Testar validações de entrada e tratamento de exceções - Testar funcionalidade de mover cartão entre colunas
- Documentar arquitetura modular e princípios SOLID - Incluir instruções de instalação e execução - Documentar todos os endpoints da API - Adicionar exemplos de uso com curl - Estrutura de pastas explicada
- Instalação de dependências do Angular e CDK - Criar modelos de dados (Board, Column, Card) - Criar serviço API para comunicação com backend - Criar componente raiz (AppComponent) com gerenciamento de boards - Criar template HTML com lista de boards e formulário - Criar estilos SCSS profissionais e responsivos - Configurar tsconfig e angular.json - Adicionar arquivo principal (main.ts) e index.html
- Adicionar middleware enableCors com origin configurável via env - Permitir métodos GET, POST, PUT, PATCH, DELETE, OPTIONS - Permitir headers Content-Type, Accept, Authorization - Default para http://localhost:4200 (porta do Angular dev server)
Testes implementados: - Health Check: validar endpoint GET / - Boards: POST/GET/GET/:id/PATCH/DELETE com validações - Columns: POST/GET/PATCH/DELETE com relações a boards - Cards: POST/GET/PATCH/DELETE com suporte a drag-and-drop - Validação: rejeitar dados inválidos (title vazio, propriedades não permitidas) Todos os testes passando e validam: - Status HTTP correto (201/200/404) - Estrutura de respostas e relacionamentos - Fluxos de negócio (atualizar board, mover card entre colunas, deletar cascata) - Tratamento de erros (board/coluna/card inexistente)
- BoardsService: create() e update() agora retornam board com columns.cards carregados - ColumnsService: create() e update() agora retornam column com cards carregados - Corrige problema onde responses não incluíam arrays vazios de relacionamentos - Necessário para testes E2E validarem estrutura de respostas corretamente Fixes de TypeScript: - Adicionar type assertion 'as Promise<Entity>' para findOne() que pode retornar null
Mudanças implementadas: - Criar environment.ts (dev) e environment.prod.ts (produção) - Atualizar ApiService para usar URL dinâmica via environment - Configurar file replacements no angular.json para trocar environments - Adicionar scripts build e build:prod no package.json - Criar tsconfig.app.json e tsconfig.spec.json necessários - Instalar @angular-devkit/build-angular para suporte ao builder - Corrigir builders no angular.json para usar @Angular-devkit Design: - Dev: apiUrl = http://localhost:3000 (backend local) - Prod: apiUrl = /api (proxy no servidor) Agora é fácil: - npm start: inicia dev server na porta 4200 com API localhost:3000 - npm run build:prod: build de produção com URL /api
Updated app.component.html and board.component.html with data-testid attributes for test selectors. Added confirm-dialog component for delete confirmations. Changes enable Cypress tests to find and interact with UI elements reliably. Changes: - Add data-testid to buttons for creating/editing/deleting boards, columns, and cards - Add data-testid to input fields for board, column, and card titles - Add data-testid to cards and columns for drag-and-drop testing - Create confirm-dialog component with modal styles - Support for both static testids and dynamic ones using column/card IDs
Document the complete Cypress setup for frontend. Includes: - Installation and configuration details - 15 E2E tests covering main workflows and UI interactions - Custom API commands (createBoard, addColumn, addCard, clearAllBoards) - Testing execution instructions (interactive, headless, headed modes) - Troubleshooting guide - Data-testid attributes reference - Prerequisites and setup steps for running tests Tests cover: - Main Kanban workflows (create board, columns, cards) - Drag-and-drop between columns - UI interactions (create, edit, delete) - Form validation - Multiple boards management
…-lock Correções aplicadas: - Fixa tag button mal formada em btn-save-board - Fixa elemento board-card com ngFor duplicado - Remove duplicação de card-header - Atualiza package-lock.json após instalação do Cypress Resultado: Componente app.component.html está syntaticamente correto e pronto para testes E2E
Mudanças implementadas: - Atualizar database.module.ts para usar arquivo persistente ao invés de :memory: - Suportar diferentes ambientes (dev/test/prod) via variáveis de ambiente - Carregar dotenv em main.ts e adicionar logging do servidor - Criar .env.example como template de configuração - Criar backend/.gitignore com ormconfig.json Configuração: - NODE_ENV=development: database.sqlite (persistente) - NODE_ENV=test: :memory: (isolado) - Variáveis: DATABASE_PATH, DATABASE_SYNCHRONIZE, DATABASE_LOGGING, PORT, CORS_ORIGIN
Mudanças implementadas: - Criar seed.ts: popula BD com dados iniciais (3 boards, 8 colunas, 6 cards) - Criar cleanup.ts: remove arquivo database.sqlite - Adicionar scripts npm: db:seed, db:cleanup, db:reset - Atualizar package.json com dependência dotenv ^17.3.1 Scripts disponíveis: npm run db:seed - Criar dados iniciais npm run db:cleanup - Limpar banco de dados npm run db:reset - Limpar + criar dados iniciais (ideal para dev) Comportamento: - Seed: Connect → Limpar → Sincronizar → Criar boards/colunas/cards - Cleanup: Remover arquivo database.sqlite se existir - Reset: Combina cleanup + seed
Mudanças implementadas: - Criar DATABASE.md: Documentação completa de uso do banco de dados - Atualizar .gitignore global: padrões para .env, .sqlite e database.sqlite Documentação DATABASE.md: - Arquitetura: Board → Columns → Cards - Configuração: variáveis de ambiente e .env.example - Scripts: seed, cleanup, reset com exemplos - Modo sincronização (dev), produção, testes - Troubleshooting e boas práticas - Referências: TypeORM, SQLite, NestJS .gitignore: - Ignorar: .env, .env.local, .env.*.local - Ignorar: *.sqlite, *.sqlite3, *.db - Ignorar: backend/database.sqlite
- Add trackByColumnId method for column tracking optimization - Add trackByCardId method for card tracking optimization - Remove invalid moveItemInList from CDK drag-drop imports - Add missing CDK components to component imports
- Add @nestjs/websockets dependency - Add socket.io for real-time communication - Update class-validator version - Remove rxjs from dependencies (included in NestJS)
- Delete app.module.ts (no longer needed) - Migrate to Angular standalone API - Use app.routes.ts for routing configuration
- Update app.config.ts to use standalone providers - Simplify app.component.ts with standalone component - Update api.service imports and structure
- Update angular.json with new project structure - Update frontend package.json with latest Angular 21 dependencies - Update index.html with correct app-root
- Monorepo uses root package-lock.json for dependency resolution
- Create app.routes.ts for application routing - Define routes for board list and individual boards - Add not-found component for 404 handling
- Create NotFoundComponent as standalone - Display user-friendly 404 page - Route redirect on invalid paths
- Remove all state management from AppComponent - Delegate to DashboardComponent - Use composition over inheritance - Minimal responsibility principle
- Add Angular CDK DragDropModule to AppModule - Enhance global SCSS with reset, typography, forms - Add app root container styles - Support for responsive design
- Document current implementation status (45% complete) - Detail what's implemented vs what's missing - Prioritize next features to implement - Visual component breakdown and checklist - Serve as reference for future development
- Remove commit.sh (one-time use for Angular downgrade) - Remove commits.sh (temporary automation for component commits) - Keep repository clean from utility scripts
- Novo serviço centralizado para confirmação de ações - Gerencia estado do dialog com BehaviorSubjects - Interface ConfirmDialogConfig para configuração flexível - Método open() para abrir dialog com callback - Métodos confirm() e cancel() para controlar o dialog
- Convertido para standalone component - Integrado confirm-dialog global via ConfirmDialogService - Simplificado template para renderizar apenas dashboard - Injetado ConfirmDialogService como dependência - Atualizado color scheme para #4169E1
- Convertido para usar observables do BoardService (board$, columnIds$) - Adicionado @output back para navegar de volta ao dashboard - Implementado método onBack() para emitir evento - Simplificado template com async pipe - Melhorado responsividade do header do board - Adicionado método trackByColumnId para otimização
- Importado DragDropModule para suporte a drag-drop - Integrado ConfirmDialogService para confirmação de deleção - Adicionado [cdkDragData] para passar dados do card ao arrastar - Atualizado método deleteCard() para usar confirm-dialog - Melhorado styling dos botões de edição - Adicionado feedback visual hover nos botões
- Importado DragDropModule com CdkDragDrop e moveItemInArray - Integrado ConfirmDialogService para confirmações - Adicionado @input columnIds para identificar drop zones - Implementado método onDrop() para movimentação de cards - Adicionado suporte para reordenação dentro da mesma coluna - Adicionado suporte para transferência entre colunas - Integrado BoardService.moveCard() para persistência
- Adicionados valores padrão para inputs (@input) - Adicionados campos aria-label com descrições - Adicionado id modal-description para associação aria-describedby - Melhorado uso do dialog com propriedade open - Adicionado role alertdialog e aria-modal true - Melhorado styling com animações fade e slideUp - Adicionado suporte a click outside para cancelar
- Adicionado @Inject para ConfirmDialogService - Adicionado método deselectBoard() para voltar da view do board - Implementado getTotalCards() para contar cards em board - Implementado trackByBoardId() para otimizar *ngFor - Atualizado deleteBoard() para usar confirm-dialog - Adicionado suporte para seleção automática de novo board criado - Melhorado layout do dashboard com min-height e background - Adicionados null coalescing operators (??) nos bindings
- Adicionado método deselectBoard() para limpar seleção - Adicionado método moveCard() para transferência entre colunas - Melhorado método createBoard() para recarregar lista completa - Adicionado logging para debug de createColumn() - Melhorado tratamento de erros em selectBoard() - Adicionados comentários e documentação JSDoc - Integração com CardDrop para persistência de movimentação
- Criado arquivo not-found.component.html com template separado - Criado arquivo not-found.component.scss com estilos separados - Atualizado not-found.component.ts para usar templateUrl e styleUrls - Mantido padrão standalone component com RouterModule - Melhorado componentes 404 com estrutura profissional
- Mudança de #3498db para #4169E1 como cor primária - Consistência de tema em toda a aplicação
- Mudança de #3498db para #4169E1 - Sincronização com novo esquema de cores da aplicação
- Criar gateway WebSocket no backend - Integrar emissão de eventos em boards, columns e cards services - Criar socket.service no frontend com listeners para todos os eventos - Integrar socket.service no board.service para sincronização automática - Adicionar testes para socket.service
- Criar kanban-gateway.module.ts com providers e exports do gateway - Importar KanbanGatewayModule em AppModule e nos módulos que usam - Instalar @nestjs/platform-socket.io package - Testar backend e frontend em desenvolvimento
- Criar CONTRIBUTING.md com guia completo para contribuidores - Criar CHANGELOG.md com histórico de versões e roadmap - Criar SECURITY.md com política de segurança - Criar LICENSE com MIT license - Remover arquivo clean.sh Documentação agora inclui: - Fluxo de desenvolvimento com exemplos de código - Padrões de commit e PR - Boas práticas de segurança - Reporte responsável de vulnerabilidades - Histórico completo do projeto v1.0.0
- Adicionar declaração global para jasmine - Usar cast 'as any' em expect() para compatibilidade com TypeScript - Reorganizar testes em blocos describe por funcionalidade - Resolver erros de compilação de tipagem
- Create TESTING_AND_DEPLOYMENT.md with step-by-step instructions - Cover local Docker testing - AWS setup (RDS, ECR, EB) - Elastic Beanstalk deployment - PR submission and question responses - Include PR template with technical decisions - Docker infrastructure ready for evaluation
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive full-stack Kanban board application as a technical challenge response for FieldControl. The implementation includes a modern Angular 18+ frontend, NestJS 11+ backend with PostgreSQL database, real-time synchronization via Socket.io, and complete Docker containerization.
Changes:
- Complete Kanban application with boards, columns, and cards functionality
- Real-time WebSocket synchronization for multi-user collaboration
- Comprehensive test coverage including unit tests, integration tests, and Cypress E2E tests
- Full Docker setup with PostgreSQL, development scripts, and production-ready configuration
Reviewed changes
Copilot reviewed 119 out of 121 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| docker-compose.yml | Multi-container Docker setup with PostgreSQL, NestJS backend, Angular frontend, and Nginx |
| test-docker.sh, scripts/docker.sh | Utility scripts for Docker testing and development workflow |
| backend/* | Complete NestJS API with TypeORM entities, services, controllers, DTOs, WebSocket gateway, and tests |
| frontend/* | Angular 18 application with standalone components, services, Socket.io client, and Cypress E2E tests |
| nginx.conf | Reverse proxy configuration with WebSocket support and security headers |
| package.json | Root workspace configuration for monorepo structure |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| done(); | ||
| }); | ||
|
|
||
| it('deve estar prosto para escutar card:deleted', (done) => { |
There was a problem hiding this comment.
Typo in test description: "prosto" should be "pronto"
|
|
||
| it('Deve criar um fluxo completo: criar board, adicionar colunas e cards', () => { | ||
| // Criar board | ||
| cy.createBoard('Nova Inicialiva 2026').then((board) => { |
There was a problem hiding this comment.
Typo in PR description: "Inicialiva" should be "Iniciativa"
Comment on lines
+35
to
+41
|
|
||
| ## Princípios de Design | ||
|
|
||
| ✅ **SOLID Principles** - Código modular e extensível | ||
| ✅ **Separation of Concerns** - Cada módulo tem responsabilidade única | ||
| ✅ **Dependency Injection** - Uso nativo do NestJS | ||
| ✅ **Clean Code** - Código legível e bem documentado |
There was a problem hiding this comment.
Duplicate "Princípios de Design" section. Lines 36-42 are a duplicate of lines 29-34 with slight variations. Remove the duplicate section.
Suggested change
| ## Princípios de Design | |
| ✅ **SOLID Principles** - Código modular e extensível | |
| ✅ **Separation of Concerns** - Cada módulo tem responsabilidade única | |
| ✅ **Dependency Injection** - Uso nativo do NestJS | |
| ✅ **Clean Code** - Código legível e bem documentado |
| @@ -0,0 +1,21 @@ | |||
| # MIT License | |||
|
|
|||
| Copyright (c) 2024 João Pedro Salles | |||
There was a problem hiding this comment.
The copyright year is 2024 but the PR description mentions "© 2026". Consider updating to 2026 for consistency or using the correct current year.
Suggested change
| Copyright (c) 2024 João Pedro Salles | |
| Copyright (c) 2026 João Pedro Salles |
Comment on lines
+12
to
+17
| ## Autenticação | ||
|
|
||
| Atualmente, a API não requer autenticação. Todos os endpoints são públicos. | ||
|
|
||
| *Future: Implementar JWT authentication* | ||
|
|
There was a problem hiding this comment.
A API é explicitamente documentada como pública e sem autenticação ("Atualmente, a API não requer autenticação. Todos os endpoints são públicos"), e não há nenhum AuthGuard/@UseGuards ou mecanismo de autenticação no backend. Se esse backend for exposto em rede (especialmente na internet), qualquer usuário poderá criar, ler, alterar e excluir todos os boards/columns/cards, caracterizando acesso não autorizado e vazamento/integração indevida de dados. Reforce o projeto implementando autenticação (por exemplo, JWT) e autorização por recurso/usuário nas rotas sensíveis antes de considerar esse serviço pronto para ambientes compartilhados ou de produção.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📋 Descrição
Implementação completa de um Kanban Board como resposta ao desafio técnico do FieldControl, incluindo frontend com Angular, backend com NestJS, banco de dados PostgreSQL e sincronização em tempo real com Socket.io.
✅ Respostas às Perguntas
1️⃣ Ferramentas e Bibliotecas Utilizadas
Frontend:
Backend:
DevOps:
2️⃣ Por Que Essas Tecnologias?
✅ Angular - Recomendado no desafio e excelente para aplicações empresariais com grande base de código. Oferece estrutura robusta, dependency injection nativo e comunidade forte.
✅ NestJS - Framework modular e opinado que segue padrões enterprise. Integração natural com TypeScript e estrutura escalável.
✅ PostgreSQL - Banco de dados relacional robusto e confiável. Ideal para dados estruturados de um kanban.
✅ Socket.io - Comunicação bidirecional real-time para sincronização instantânea entre clientes, melhorando a experiência do usuário.
✅ Docker - Garante consistência entre desenvolvimento e produção. Facilita deploy e testes.
✅ Angular Material - Design system pronto que segue Material Design Guidelines, acelerando desenvolvimento da UI.
3️⃣ Princípios de Engenharia de Software Aplicados
🏗️ SOLID Principles:
🎯 Design Patterns:
📐 Boas Práticas:
4️⃣ Desafios Enfrentados e Soluções
5️⃣ Melhorias Futuras
🚀 Funcionalidades:
🔒 Segurança:
⚡ Performance:
🧪 Qualidade:
📊 Observabilidade:
🎯 Como Usar
🧪 Testes
📚 Documentação