Open
Conversation
There was a problem hiding this comment.
Pull request overview
Introduz uma solução completa de Kanban em monorepo (pnpm workspaces), com frontend Angular + backend NestJS/GraphQL + Socket.io, além de configurações de qualidade, deploy (Netlify) e testes E2E (Cypress).
Changes:
- Adiciona o app frontend (Angular 17 + Material + Apollo) com UI de Kanban e drag-and-drop.
- Adiciona o app backend (NestJS + GraphQL + TypeORM + Socket.io) com CRUD e eventos em tempo real.
- Inclui Cypress E2E, documentação da solução e arquivos de tooling/workspace.
Reviewed changes
Copilot reviewed 107 out of 109 changed files in this pull request and generated 17 comments.
Show a summary per file
| File | Description |
|---|---|
| SOLUTION_README.md | Documentação detalhada da solução/arquitetura e comandos |
| pnpm-workspace.yaml | Define workspaces apps/* e packages/* |
| package.json | Scripts raiz (dev/build/test/lint/e2e) para o monorepo |
| netlify.toml | Configuração de build/publish e redirect SPA para Netlify |
| .npmrc | Configuração do pnpm/npm para o workspace |
| .prettierrc | Regras do Prettier |
| .gitignore | Ignora artefatos de build, env, coverage, Cypress, etc. |
| .env.example | Variáveis de exemplo para execução local |
| .editorconfig | Convenções de formatação (indentação, EOL, etc.) |
| .vscode/tasks.json | Tasks VS Code (dev, lint, test, etc.) |
| .vscode/settings.json | Settings VS Code (format, eslint, working dirs) |
| .vscode/launch.json | Debug configs (Chrome frontend, attach backend, Jest) |
| .vscode/extensions.json | Recomendações de extensões para o workspace |
| .github/agents/angular-frontend.agent.md | Perfil de agente para boas práticas Angular |
| .github/agents/e2e-testing.agent.md | Perfil de agente para estratégia de testes (Cypress/Jest) |
| .github/agents/graphql-api.agent.md | Perfil de agente para design/boas práticas GraphQL |
| .github/agents/nestjs-backend.agent.md | Perfil de agente para boas práticas NestJS |
| .github/agents/ux-specialist.agent.md | Perfil de agente para UX/acessibilidade |
| packages/shared-types/package.json | Package de tipos compartilhados (scripts build/dev) |
| packages/shared-types/tsconfig.json | TS config do package shared-types |
| packages/shared-types/src/index.ts | Interfaces/DTOs/eventos do pacote shared-types |
| apps/frontend/package.json | Dependências e scripts do Angular/Cypress |
| apps/frontend/angular.json | Config do Angular CLI (build/serve/test/lint) e Sass includePaths |
| apps/frontend/.eslintrc.json | ESLint do frontend (TS/Angular/template) |
| apps/frontend/tsconfig.json | TS config base do frontend (paths, strict, etc.) |
| apps/frontend/tsconfig.app.json | TS config do build do app |
| apps/frontend/tsconfig.spec.json | TS config de specs (Jasmine) |
| apps/frontend/cypress.config.ts | Config do Cypress (baseUrl, timeouts, patterns) |
| apps/frontend/cypress/tsconfig.json | TS config para Cypress |
| apps/frontend/cypress/support/e2e.ts | Hook global beforeEach para reset/visit do board |
| apps/frontend/cypress/support/commands.ts | Custom commands Cypress + seed/reset via GraphQL |
| apps/frontend/cypress/e2e/kanban-board.cy.ts | E2E: estado inicial do board |
| apps/frontend/cypress/e2e/column-management.cy.ts | E2E: criar/deletar coluna + snackbar |
| apps/frontend/cypress/e2e/card-creation.cy.ts | E2E: criação de cards e validações |
| apps/frontend/cypress/e2e/card-update.cy.ts | E2E: edição de card e validações |
| apps/frontend/cypress/e2e/card-deletion.cy.ts | E2E: deleção de cards e empty state |
| apps/frontend/src/index.html | HTML base (fonts/Material icons, pt-BR) |
| apps/frontend/src/main.ts | Bootstrap do Angular standalone |
| apps/frontend/src/styles.scss | Estilos globais + scrollbar |
| apps/frontend/src/favicon.ico | Asset de favicon |
| apps/frontend/src/assets/.gitkeep | Placeholder para pasta de assets |
| apps/frontend/src/environments/environment.ts | URLs dev (API/WS/GraphQL) |
| apps/frontend/src/environments/environment.prod.ts | URLs prod (API/WS/GraphQL) |
| apps/frontend/src/app/app.routes.ts | Rotas (lazy load Kanban + wildcard redirect) |
| apps/frontend/src/app/app.config.ts | Providers (Router, Apollo, HttpClient, animations, date adapter) |
| apps/frontend/src/app/app.component.ts | Shell com toolbar + router-outlet |
| apps/frontend/src/app/app.component.scss | Layout do shell e responsividade |
| apps/frontend/src/app/app.component.spec.ts | Teste básico do AppComponent |
| apps/frontend/src/app/core/graphql/operations.ts | Queries/Mutations GraphQL (boards/columns/cards) |
| apps/frontend/src/app/core/graphql/index.ts | Barrel export do core/graphql |
| apps/frontend/src/app/core/socket/socket.service.ts | Wrapper Socket.io como Observable/BehaviorSubject |
| apps/frontend/src/app/core/socket/index.ts | Barrel export do core/socket |
| apps/frontend/src/app/styles/_variables.scss | Design tokens (cores, spacing, breakpoints) |
| apps/frontend/src/app/styles/_mixins.scss | Mixins (mobile, layout dialog, ellipsis, chips) |
| apps/frontend/src/app/styles/_index.scss | Forward de variables/mixins |
| apps/frontend/src/app/features/kanban/models/kanban.models.ts | Modelos do Kanban no frontend |
| apps/frontend/src/app/features/kanban/kanban.component.ts | Componente Kanban (GraphQL + sockets + DnD colunas) |
| apps/frontend/src/app/features/kanban/kanban.component.html | Template do board e colunas (CDK) |
| apps/frontend/src/app/features/kanban/kanban.component.scss | Estilos do board e responsividade |
| apps/frontend/src/app/features/kanban/components/kanban-column/kanban-column.component.ts | Coluna (DnD cards, add/delete, eventos) |
| apps/frontend/src/app/features/kanban/components/kanban-column/kanban-column.component.html | Template da coluna + menu + empty state |
| apps/frontend/src/app/features/kanban/components/kanban-column/kanban-column.component.scss | Estilos da coluna e DnD |
| apps/frontend/src/app/features/kanban/components/kanban-card/kanban-card.component.ts | Card (menu delete + abrir dialog de detalhes) |
| apps/frontend/src/app/features/kanban/components/kanban-card/kanban-card.component.html | Template do card + chips de metadata |
| apps/frontend/src/app/features/kanban/components/kanban-card/kanban-card.component.scss | Estilos do card/chips |
| apps/frontend/src/app/features/kanban/components/add-column-dialog/add-column-dialog.component.ts | Dialog criação de coluna |
| apps/frontend/src/app/features/kanban/components/add-column-dialog/add-column-dialog.component.scss | Estilos do dialog de coluna |
| apps/frontend/src/app/features/kanban/components/add-card-dialog/add-card-dialog.component.ts | Dialog criação de card |
| apps/frontend/src/app/features/kanban/components/add-card-dialog/add-card-dialog.component.scss | Estilos do dialog de card |
| apps/frontend/src/app/features/kanban/components/card-detail-dialog/card-detail-dialog.component.ts | Dialog detalhes/edição do card |
| apps/frontend/src/app/features/kanban/components/card-detail-dialog/card-detail-dialog.component.scss | Estilos do dialog de detalhes |
| apps/backend/package.json | Dependências/scripts do NestJS/TypeORM/Jest |
| apps/backend/tsconfig.json | TS config do backend (paths, strict flags) |
| apps/backend/tsconfig.build.json | TS config de build |
| apps/backend/nest-cli.json | Config do Nest CLI |
| apps/backend/.eslintrc.js | ESLint do backend |
| apps/backend/test/jest-e2e.json | Config Jest para e2e |
| apps/backend/test/app.e2e-spec.ts | E2E básico (POST /graphql) |
| apps/backend/src/main.ts | Bootstrap NestJS (ValidationPipe + CORS) |
| apps/backend/src/app.module.ts | Módulo raiz (Config, TypeORM, GraphQL, módulos) |
| apps/backend/src/schema.gql | Schema GraphQL gerado |
| apps/backend/src/config/typeorm.config.ts | Config TypeORM (Postgres/SSL/synchronize/logging) |
| apps/backend/src/config/seed.service.ts | Seed de dados iniciais no startup |
| apps/backend/src/gateways/gateways.module.ts | Módulo de gateways |
| apps/backend/src/gateways/kanban.gateway.ts | Gateway Socket.io (rooms + broadcast) |
| apps/backend/src/modules/boards/entities/board.entity.ts | Entity Board (TypeORM + GraphQL) |
| apps/backend/src/modules/boards/dto/create-board.input.ts | Input GraphQL para criação de board |
| apps/backend/src/modules/boards/dto/update-board.input.ts | Input GraphQL para update de board |
| apps/backend/src/modules/boards/dto/index.ts | Barrel export dos DTOs de boards |
| apps/backend/src/modules/boards/boards.service.ts | Service de boards (CRUD) |
| apps/backend/src/modules/boards/boards.service.spec.ts | Unit tests do BoardsService |
| apps/backend/src/modules/boards/boards.resolver.ts | Resolver GraphQL de boards |
| apps/backend/src/modules/boards/boards.module.ts | Módulo boards |
| apps/backend/src/modules/columns/entities/column.entity.ts | Entity Column (TypeORM + GraphQL) |
| apps/backend/src/modules/columns/dto/create-column.input.ts | Input GraphQL para criação de coluna |
| apps/backend/src/modules/columns/dto/update-column.input.ts | Input GraphQL para update de coluna |
| apps/backend/src/modules/columns/dto/index.ts | Barrel export dos DTOs de columns |
| apps/backend/src/modules/columns/columns.service.ts | Service de columns (CRUD + socket events) |
| apps/backend/src/modules/columns/columns.resolver.ts | Resolver GraphQL de columns |
| apps/backend/src/modules/columns/columns.module.ts | Módulo columns |
| apps/backend/src/modules/cards/entities/card.entity.ts | Entity Card (TypeORM + GraphQL) |
| apps/backend/src/modules/cards/dto/create-card.input.ts | Input GraphQL para criação de card |
| apps/backend/src/modules/cards/dto/update-card.input.ts | Input GraphQL para update de card |
| apps/backend/src/modules/cards/dto/move-card.input.ts | Input GraphQL para mover/reordenar card |
| apps/backend/src/modules/cards/dto/index.ts | Barrel export dos DTOs de cards |
| apps/backend/src/modules/cards/cards.service.ts | Service de cards (CRUD/move + socket events) |
| apps/backend/src/modules/cards/cards.resolver.ts | Resolver GraphQL de cards |
| apps/backend/src/modules/cards/cards.module.ts | Módulo cards |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+8
to
+31
| export const getTypeOrmConfig = (configService: ConfigService): TypeOrmModuleOptions => ({ | ||
| type: 'postgres', | ||
| host: configService.get<string>( | ||
| 'DB_HOST', | ||
| 'dpg-d6rh8vea2pns73ahk5u0-a.virginia-postgres.render.com' | ||
| ), | ||
| port: configService.get<number>('DB_PORT', 5432), | ||
| database: configService.get<string>('DB_NAME', 'redlamp'), | ||
| username: configService.get<string>('DB_USERNAME', 'redlamp_user'), | ||
| password: configService.get<string>('DB_PASSWORD', '1O7LDRY7MgNFZWKKGJs5ylYQTEEbZmRi'), | ||
| ssl: { rejectUnauthorized: false }, | ||
| entities: [Board, Column, Card], | ||
| synchronize: configService.get<string>('NODE_ENV') !== 'production', | ||
| logging: configService.get<string>('NODE_ENV') !== 'production', | ||
| }); | ||
|
|
||
| // For CLI migrations (if needed later) | ||
| export const typeOrmConfig: TypeOrmModuleOptions = { | ||
| type: 'postgres', | ||
| host: 'dpg-d6rh8vea2pns73ahk5u0-a.virginia-postgres.render.com', | ||
| port: 5432, | ||
| database: 'redlamp', | ||
| username: 'redlamp_user', | ||
| password: '1O7LDRY7MgNFZWKKGJs5ylYQTEEbZmRi', |
Comment on lines
+27
to
+35
| host: 'dpg-d6rh8vea2pns73ahk5u0-a.virginia-postgres.render.com', | ||
| port: 5432, | ||
| database: 'redlamp', | ||
| username: 'redlamp_user', | ||
| password: '1O7LDRY7MgNFZWKKGJs5ylYQTEEbZmRi', | ||
| ssl: { rejectUnauthorized: false }, | ||
| entities: [Board, Column, Card], | ||
| synchronize: true, | ||
| logging: true, |
Comment on lines
+67
to
+86
| async move(id: string, input: MoveCardInput): Promise<Card> { | ||
| const card = await this.findOne(id); | ||
| const fromColumnId = card.columnId; | ||
| const boardId = await this.getBoardIdByColumnId(input.targetColumnId); | ||
|
|
||
| // Update cards in the target column | ||
| await this.cardRepository | ||
| .createQueryBuilder() | ||
| .update(Card) | ||
| .set({ order: () => '"sort_order" + 1' }) | ||
| .where('"columnId" = :columnId AND "sort_order" >= :newOrder', { | ||
| columnId: input.targetColumnId, | ||
| newOrder: input.newOrder, | ||
| }) | ||
| .execute(); | ||
|
|
||
| // Move the card | ||
| card.columnId = input.targetColumnId; | ||
| card.order = input.newOrder; | ||
|
|
Comment on lines
+95
to
+99
| onDrop(event: CdkDragDrop<Card[]>): void { | ||
| if (event.previousContainer === event.container) { | ||
| moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); | ||
| } else { | ||
| transferArrayItem( |
Comment on lines
+168
to
+174
| variables: { | ||
| input: { | ||
| boardId: this.boardId, | ||
| title: result.title, | ||
| order: this.columns.length, | ||
| }, | ||
| }, |
Comment on lines
+5
to
+6
| # Database (SQLite - path to database file) | ||
| DATABASE_PATH=kanban.sqlite |
Comment on lines
+200
to
+204
| O pacote `shared-types` centraliza interfaces, DTOs e enums usados por ambos frontend e backend: | ||
|
|
||
| - **Interfaces**: `IBoard`, `IColumn`, `ICard` — contratos de dados compartilhados. | ||
| - **DTOs**: `CreateBoardDto`, `UpdateCardDto`, `MoveCardDto`, etc. — validação consistente. | ||
| - **Socket Events Enum**: `BOARD_CREATED`, `CARD_MOVED`, `COLUMN_DELETED`, etc. — nomes de eventos tipados para WebSocket. |
| @@ -0,0 +1 @@ | |||
| /* Placeholder for favicon - replace with actual .ico file */ | |||
Comment on lines
+1
to
+4
| [build] | ||
| base = "/" | ||
| command = "pnpm --filter frontend build" | ||
| publish = "apps/frontend/dist/frontend/browser" |
Comment on lines
+118
to
+121
| // Update order for all cards | ||
| this.column.cards.forEach((card, index) => { | ||
| card.order = index; | ||
| }); |
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.
This pull request introduces foundational configuration files and specialized agent documentation to support a full-stack Kanban application using Angular, NestJS, and GraphQL. The most important changes are the addition of
.editorconfigand.env.examplefor consistent development setup, and four comprehensive agent files detailing best practices for frontend, backend, GraphQL API, and end-to-end testing.Configuration and environment setup:
.editorconfigto enforce consistent code formatting across the project, including indentation, charset, and newline settings..env.exampleto provide environment variable templates for application, database, frontend URL, and GraphQL settings.Agent documentation for best practices:
Frontend and Testing
.github/agents/angular-frontend.agent.mdoutlining Angular component architecture, RxJS patterns, GraphQL integration, Cypress testing strategies, and project structure expectations..github/agents/e2e-testing.agent.mddetailing testing strategies for Angular/NestJS/GraphQL stack, including Cypress and Jest setup, test patterns, and CI/CD integration.Backend and API
.github/agents/nestjs-backend.agent.mddescribing NestJS backend architecture, module organization, validation, error handling, testing patterns, and security checklist..github/agents/graphql-api.agent.mdcovering GraphQL schema design, resolver implementation, Apollo Client usage, code generation, performance, error handling, and security practices.