Desafio Kanban - Vitor Santini

[vitorsantini]

Framework, linguagem e ferramentas

Usei principalmente:

Linguagem

• TypeScript no backend (NestJS) e no frontend (Angular).

Backend

• NestJS – framework Node com:
  • arquitetura modular (módulos de boards, columns, cards)
  • injeção de dependência
  • suporte integrado a pipes, filtros e testes
• Prisma ORM:
  • schema centralizado
  • geração de tipos
  • migrations
• PostgreSQL (Supabase) como banco relacional
• Jest + supertest para testes unitários e e2e
• class-validator / class-transformer para validação de entrada

Frontend

• Angular com standalone components
• Angular Material para UI (cards, dialogs, botões, inputs)
• Angular CDK DragDrop para drag and drop
• HttpClient + RxJS para chamadas à API

Ferramentas de qualidade

• ESLint + Prettier para padronização
• Husky + lint-staged para automatizar lint/format antes dos commits

---

Tecnologias X e Y

**NestJS **

• requisito técnico do desafio
• já entrega uma estrutura de projeto organizada
• facilita o uso de injeção de dependência

Angular

• requisito técnico do desafio
• fornece um ecossistema completo (router, DI, HttpClient, forms)
• a integração com Angular Material e CDK DragDrop é direta e produtiva

Prisma x outros ORMs

Escolhi Prisma porque:

• o schema é fácil de ler e manter
• gera tipos fortes para as entidades
• a integração com Nest é simples

Supabase x Postgres local/heroku

Usei Supabase como banco remoto por ser:

• um Postgres gerenciado, pronto para uso
• simples de integrar com Prisma via DATABASE_URL
• prático para deploy rápido em ambiente de desafio

Angular Material x CSS/HTML puro

Usei Angular Material para:

• acelerar a construção da UI com componentes prontos e acessíveis
• padronizar dialogs, botões, cards e inputs
• focar mais tempo na lógica (API, drag and drop, testes) do que em CSS puro

---

Princípios de software

Alguns princípios que procurei aplicar:

SRP (Single Responsibility Principle)

• controllers focados em orquestrar requisição → serviço
• services concentrando lógica de negócio
• PrismaService isolando o acesso ao banco

Separation of Concerns

• divisão clara entre:
  • DTOs (entrada/validação)
  • services (negócio)
  • camada de apresentação (Angular)
• no frontend:
  • board-list, board-detail, kanban-column, kanban-card e dialogs com responsabilidades bem definidas

DRY (Don’t Repeat Yourself)

• centralização de chamadas HTTP em KanbanApiService
• estilos globais reaproveitados (botões, dialogs, tipografia)

KISS (Keep It Simple)

• API REST simples e objetiva
• ordenação baseada em order = índice do array
• adiei GraphQL e WebSockets para a seção de melhorias, para manter o escopo controlado

Nomes semânticos

• métodos e variáveis com nomes descritivos:
  • createBoard, updateColumn, onColumnDrop, openCreateCardDialog, etc.
• DTOs e modelos autoexplicativos:
  • CreateBoardDto, UpdateCardDto, Board, Column, Card

---

Desafios e problemas

Alguns desafios e como resolvi:

1. Testes unitários e e2e

• Estruturar os testes de forma que fizessem sentido:
  • primeiro serviços (mocks simples do Prisma)
  • depois controllers
  • por fim e2e com supertest
• Garantir que o fluxo básico (criar board/coluna/card, editar e deletar) estava coberto

2. Drag and drop com persistência*

• Não bastava só mexer na UI; precisei:
  • reordenar arrays em memória
  • persistir order de colunas e cards
  • atualizar columnId ao arrastar card entre colunas
• Tratamento de colunas vazias:
  • column.cards sempre como array ([])
  • placeholder visual e área de drop mesmo sem cards

3. Atualização da UI sem recarregar tudo

• Após cada operação (create/update/delete), atualizo board, columns e cards no estado local
• Uso de trackBy em *ngFor para evitar recriações desnecessárias e melhorar performance

---

Melhorias e próximas implementações

Algumas ideias de evolução:

Realtime com Socket.io

• Atualizar boards em tempo real para múltiplos usuários:
  • criação/edição/remoção de cards e colunas sendo refletidas instantaneamente

API em GraphQL

• Oferecer uma API GraphQL além da REST:
  • queries aninhadas de board → columns → cards
  • mutations específicas para CRUD e reordenação

UX/UI

• Indicadores de prazo (ex: cards atrasados em destaque)
• Skeletons/loaders durante carregamento
• Melhor responsividade em telas menores
• Melhorias visuais adicionais nos cards (badges, estados, etc.)

Testes frontend

• Testes unitários de componentes Angular
• Testes e2e com Cypress/Playwright cobrindo o fluxo completo do Kanban

Autenticação e multiusuário

• Autenticação (por exemplo JWT)
• Boards por usuário
• Compartilhamento de boards entre usuários, com permissões

---

Vídeo de apresentação

• Link do vídeo: https://jam.dev/c/18d74101-b9ce-4c1a-b913-55b9e689c98b

---

Sobre você

Sou Vitor Santini, de São José do Rio Preto, 24 anos.

Formado em análise e desenvolvimento de sistema, trabalha na area de tecnologia a mais de 2 anos.

Busco sempre aprender e praticar coisas novas... realizando cursos e alguns projetos pessoais.

Atualmente tenho o objetivo de buscar um alinhamento com o meu plano de carreira e a oportunidade de crescer e me especializar
na area de desenvolvimento podendo assim agregar valor ao meu trabalho e consequentemente aos projetos em que for alocado.

trabalhar com aplicações web fullstack me chama muita a atenção, pela abrangência e necessidade de adquirir o conhecimento necessário para
acompanhar o planejamento e desenvolvimento, por conta disso busco estudar boas práticas, integrações e arquitetura. Somando os meus
conhecimentos e minha experiência em front-end e minha ambição e dedicação para estudar e adquirir o conhecimento do restante, acredito que
irei somar, colaborar nos projetos e atuar com times que valorizam qualidade de código e entrega consistente.

---

Outros detalhes

• Priorizei:
  • uma base sólida de backend (com testes e Prisma)
  • um frontend funcional, com drag and drop e UX razoável dentro do tempo
• Diferenciais como GraphQL e WebSockets foram deixados como melhorias futuras para não inflar demais o escopo inicial.

---

Contato

• E-mail: vitorsantini2001@gmail.com
• Telefone/WhatsApp: (17) 99655-8289