feat: adding kanban project

PULL_REQUEST_TEMPLATE.md

@@ -6,41 +6,78 @@ Gostariamos de entender como você pensa e as decisões que você tomou durante
 
 Descreva ferramentas e bibliotecas (libraries, framework, tools etc) você usou.
 
+- Backend: NestJS, TypeScript, Prisma, Class-validator e Class-transformer
+- Frontend: Angular, Angular Material, Angular CDK, Typescript
+- Banco de dados: SQLite inicialmente, porém, foi migrado para PostgreSQL em produção
+- Realtime: Socket.io para desenvolvimento e em produção Ably devido à limitação da Vercel quanto ao uso de WebSockets
+
 **Técnologias X e Y**
 
 Justifique porque você optou pela tecnologia X e não a Y?
 
+- As tecnologias foram escolhidas devido aos requisitos do desafio.
+
 **Princípios de software**
 
 Quais princípios da engenharia de software que você usou?
 
+- Procurei implementar um código limpo, com nomes de funções e variáveis descritivas, seguindo os princípios de SOLID, seguindo uma estrutura modular, Dry onde eu reaproveitei código em services.
+
 **Desafios e problemas**
 
 Conte um pouco sobre os desafios e problemas que você enfrentou e como você resolveu.
 
+#### Backend
+
+- Inicialmente tive problemas de configuração da nova versão do prisma utilizando o banco de dados SQLite, porém, consegui resolver o problema seguindo a documentação oficial.
+- Tive também problemas em relação a persistência dos dados na reorndenação de cards e columns, porém, consegui resolver o problema implementando uma verificação de posição das colunas e cards para que ao arrastar ambos elas sejam reordenadas corretamente e salvas no banco de dados.
+
+#### Frontend
+
+- Em relação ao Drag and Drop, eu queria entender mais como funcionava em si, e como implementar ele, seguido pela persistência dos dados, onde eu crei uma rota apenas para reordenar as columns e cards pois achei mais facil de implementar.
+
+#### Deploy
+
+- Migrar o banco de dados de SQLite para Postgres para conseguir subir em produção, utilizei a vercel em ambos (front e back) e a neon para hospedar o banco de dados.
+
+- Erro classíco de CORS, que foi resolvido adicionando a função bootstrap no app.module.ts do backend.
+
+- Realtime: Após conseguir subir o backend e frontend, percebi que o socket.io não funcionava em produção devido à limitação da Vercel quanto ao uso de WebSockets, então, decidi utilizar o Ably para o realtime que é uma das opções em que a vercel sugere.
+
 **Melhorias e próximas implementações**
 
 O que você entende que pode ser melhorado e como isso pode ser feito?
 
+- Acredito que o meu próximo passo (e que ainda irei fazer) seria tornar a aplicação responsiva para dispositivos móveis
+- Testes automatizados: Implementar testes automatizados para garantir a qualidade do código e facilitar futuras manutenções.
+- Api em GraphQL ao invés de REST.
+- Autenticação e autorização onde usuários podem se registrar, fazer login e criar seus próprios boards.
+
 **Vídeo de apresentação**
 
 Grave um vídeo do seu projeto rodando e envie o link:
-<!-- Dica: você pode usar o https://jam.dev/ para facilitar sua gravação ;) -->
+
+- Video de apresentação: https://youtu.be/bKrxSSZKV6o
+- Link do projeto em produção: https://kanban-frontend-amber.vercel.app
+- Link do repositório isolado: https://github.com/MateusLeonardo/kanban
 
 **Sobre você**
 
 Queremos te conhecer um pouco melhor, conte um pouco sobre você.
 
 Onde nasceu/De onde você é? Lugares que estudou, empresas que trabalhou, como você se envolveu com desenvolvimento de software.. enfim, Quem é você?
 
+- Eu nasci e fui criado em São José do Rio Preto,tenho 28 anos e sou casado a 4 meses, desde criança gostava de passar horas no computador jogando com meus amigos, aos 18 começei a treinar musculação e resolvi fazer educação física, onde trabalhei por volta de 7 anos em academia. Após isso, como tinha um certo tempo sobrando e não estava tão satisfeito na área, um amigo meu me disse para fazer um curso de html e css do Gustavo Guanabara no youtube antes de começar Ánalise e Desenvolvimento de Sistemas, e foi ai que me apaixonei pelo desenvolvimento de software, consegui um emprego onde eu trabalho atualmente, quase 1 anos e 7 meses, nesse tempo fiz minha transição de carreira onde agora busco desafios ainda maiores.
+
 **Outros detalhes**
 
 Se quiser enviar alguma informação adicional sobre o desafio..
 
+- Foi muito desafiador principalmente o frontend pois não tinha muito conhecimento em angular, apesar de saber typescript, mas fui vendo a documentação e entendendo mais sobre o framework que é bem parecido com nestjs em relação a modularidade.
 
 ---
 
-Ah, deixe seu e-mail ou telefone para entrarmos em contato com você :) 
-
-
+Ah, deixe seu e-mail ou telefone para entrarmos em contato com você :)
 
+- E-mail: mateus_leonardo1997@hotmail.com
+- Whatsapp: (17) 98231-4442

README.md

@@ -1,230 +1,74 @@
-👨‍💻 Vaga para apaixonados por criação de software
-===========================================
+# Valinor Kanban
 
-A empresa
-----------
+## Pré-requisitos
 
-Somos um [SaaS (Software as a service)](https://pt.wikipedia.org/wiki/Software_como_servi%C3%A7o) para empresas que possuem prestadores de serviços externos.
+- Node.js >= 20
+- Docker & Docker Compose
 
-Entregamos **controle**, **organização** e **melhor relacionamento com o cliente** para empresas de Climatização, Segurança eletrônica, Telecom, Provedores de internet, Montadoras de móveis, Empresas de limpeza, enfim, qualquer empresa que possui uma equipe de campo para realização de serviços.
+## Backend
 
-Nossa missão é melhorar a prestação de serviços no Brasil.
+### Para rodar o backend, siga os passos abaixo:
 
-Te convido a conhecer um pouco mais da Field e da nossa **cultura** pelo nosso instagram: [@FieldControl](https://www.instagram.com/fieldcontrol/)
+Entre na pasta backend
 
-<p>
-  <img src="assets/fielders.jpeg" width="855"/>
-</p>
-
-Origem
-----------
-
-Um ponto importante é que a Field foi fundada por desenvolvedores, só por esse motivo você pode **TER CERTEZA** que aqui as coisas são muito diferentes das empresas tradicionais.
-
-Aqui utilizamos [princípios ágeis](http://www.manifestoagil.com.br/) **DE VERDADE** para criação de software. Veja bem, não estou falando de post its ou reuniões em pé.. E sim de: Pair programming, Continuous Integration, Continuous Deployment e claro, testes automatizados.
-
-Condições
-----------
-- Período: Integral
-- Onde: Qualquer lugar :)
-- Benefícios: Alimentação, Plano de saúde, Seguro de vida, [Pluralsight](https://www.pluralsight.com/), [Alura](https://www.alura.com.br/), [Amazon Books](https://www.amazon.com/books-used-books-textbooks/b?ie=UTF8&node=283155) <3
-
-:house_with_garden: Você pode ler sobre nossa cidade no [G1](http://g1.globo.com/sao-paulo/sao-jose-do-rio-preto-aracatuba/especial-publicitario/prefeitura-de-rio-preto/rio-preto-noticias/noticia/2015/12/rio-preto-e-melhor-cidade-do-estado-e-segunda-do-pais-para-se-viver.html), [Infomoney](http://www.infomoney.com.br/minhas-financas/consumo/noticia/6391352/melhores-cidades-brasil-para-viver-veja-ranking) ou aqui na [Exame](https://exame.com/brasil/o-ranking-do-servico-publico-nas-100-maiores-cidades-do-brasil/).
-
-Trabalhamos com uma boa infraestrutura, nosso hardware é muito bom (você vai ter um notebook f#d@ com ssd e dois monitores :computer: :computer:) e possuímos um ambiente de trabalho agradável:
-
-<p float="left">
-  <img src="assets/field3.jpeg" width="215"/>
-  <img src="assets/field1.jpeg" width="382"/>
-  <img src="assets/field4.jpeg" width="215"/>
-</p>
-
-A empresa não possui hierarquias e você é convidado e desafiado a colaborar com todas as frentes de trabalho. Ou seja, aqui todas sugestões são bem vindas!
-
-Ah, e quando a Field bate meta (quase sempre) o frigobar fica assim:
-
-<p>
-  <img src="assets/frigobar-da-field-quando-meta-eh-batida.jpeg" width="400" />
-</p>
-
-Queremos a cada dia mais flexibilidade e continuar animados a evoluir nossas aplicações.
-
-Nosso trabalho é baseado em autogestão. Só existe uma regra de convivência: É proibido murmurar! Aqui as opiniões são discutidas, resolvidas e sempre chegamos a um consenso para melhorar a nossa convivência. Isso não foi descrito por um gerente de RH e sim por um desenvolvedor de software.
-
-Oportunidade
-----------
-
-Estamos em busca de desenvolvedores **Frontend** FODAS e APAIXONADOS para fazer parte do nosso time de produto.
-
-Na Field, o seu dia-a-dia será repleto de:
-
-```javascript
-[
-  'GitHub & Git <3',
-  'Muito, muito e muito JavaScript',
-  'Object-oriented programming, SOLID Principles & Design Patterns',
-  'Práticas e princípios ágeis (Pair programming, Continuous Integration, Continuous Deployment)',
-  'Testes de software (unitários, integração, e2e..)',
-  'Desafios de escalabilidade',
-  'Desafios de alta disponibilidade',
-  'Micro services e aplicações distribuídas',
-  'Amazon Web Services',
-  'PAAS & Cloud Services',
-  'Serverless apps',
-  'AngularJS, Angular',
-  'REST APIs',
-  'GraphQL APIs',
-  'Material Design',
-  'Open source software'
-]
+```bash
+cd backend
 ```
 
-Nossa stack tecnológica é predominantemente JavaScript, abrangendo Node.js, Single Page Applications (SPA) e Hybrid Mobile Apps.
-
-Acreditamos firmemente que excelentes desenvolvedores são capazes de selecionar a ferramenta mais adequada para cada desafio. Por essa razão, para resolver problemas específicos, recorremos às melhores alternativas disponíveis, o que nos leva a incluir uma pitada de C#, Java e PHP em nossas soluções.
-
-Nossos servidores residem na AWS, onde utilizamos a nuvem como nossa plataforma principal. Temos aplicativos funcionando com Elastic BeanStalk, armazenamento em S3 e arquiteturas serverless com AWS Lambda.
-
-Antes mesmo de avaliar o conhecimento técnico, valorizamos o perfil pessoal dos candidatos. Para nós, a determinação, o interesse e a curiosidade são qualidades essenciais. Se você é alguém proativo, interessado e que busca constantemente aprender, é isso que realmente importa para nós! 😊
-
----
-
-## Requisitos Principais
-
-🌟 **Sem Ego**: Acreditamos que ninguém é melhor que ninguém e que todos podem aprender uns com os outros. Promovemos um ambiente onde a humildade, o respeito e a abertura para aprender e ensinar são valorizados.
-
-📈 **Evolução Contínua**: Encorajamos o crescimento pessoal e profissional de todos os membros da equipe. Estamos comprometidos em fornecer oportunidades de aprendizado e desenvolvimento, permitindo que cada indivíduo evolua constantemente em sua jornada.
-
-🚀 **Proatividade**: Buscamos indivíduos proativos, capazes de antecipar problemas e buscar soluções de forma autônoma.
-
-🔑 **Sentimento de Dono**: Valorizamos profissionais que assumem responsabilidade pelo seu trabalho e estão comprometidos com o sucesso do projeto como se fossem os donos.
-
-🤝 **Boa Comunicação e Trabalho em Equipe**: Habilidades de comunicação eficaz e colaboração são essenciais para trabalhar de forma eficiente em equipe.
-
-💻 **Proficiência em JavaScript e TypeScript**: Experiência sólida em JavaScript e TypeScript, demonstrando habilidade em desenvolver soluções robustas e escaláveis.
-
-🎨 **Experiência com CSS e HTML Semântico**: Conhecimento prático em CSS e HTML Semântico para criar interfaces atraentes e acessíveis.
-
-🔧 **Experiência Sólida com Angular e Ionic**: Capacidade comprovada no desenvolvimento com Angular e Ionic, demonstrando habilidade em construir aplicações web e mobile de alta qualidade.
-
-🖌️ **Familiaridade com Princípios de UX**: Compreensão dos princípios de User Experience (UX) para criar interfaces intuitivas e amigáveis aos usuários.
-
-🌐 **Familiaridade com APIs REST, GraphQL e WebSockets**: Conhecimento em APIs REST, GraphQL e WebSockets para comunicação eficiente entre cliente e servidor.
-
-🧪 **Prática em Testar Software**: Experiência prática em testes de software, incluindo testes unitários, integrados e de aceitação, garantindo a qualidade e a confiabilidade do sistema.
-
-Estes requisitos refletem nossa busca por profissionais qualificados e comprometidos, capazes de contribuir de forma significativa para o sucesso de nossos projetos.
-
-O desafio de programação
-----------
-
-Se você é apaixonado por desenvolvimento de software e busca desafios para impulsionar sua carreira, este teste é para você! Realize o desafio abaixo e faça um fork deste repositório para começar a codificar. [Let the hacking begin](https://www.youtube.com/watch?v=Dvrdxn0kHL8)! 🚀
-
-# Teste de Programação: Kanban
+Copie o arquivo .env.example para .env
 
-Este é um teste de programação que consiste em implementar um Kanban, utilizando Angular para o client side e NestJs para o back-end. 
-
-O objetivo é avaliar a capacidade do candidato em estruturar um projeto seguindo as boas práticas de ambos os frameworks e implementar um fluxo básico de colunas e cards dentro do Kanban.
-
-## Critérios de Avaliação
-
-Os critérios de avaliação para este teste são os seguintes:
-
-1. **Código Limpo e Organização**: Avalia a clareza, legibilidade e organização do código fonte.
-
-2. **Testes de Software**: Serão avaliados os testes unitários e integrados para garantir a robustez do sistema.
-
-3. **Semântica**: A utilização de nomes significativos para variáveis, funções, classes, etc., será observada.
-
-4. **Documentação do Projeto (README)**: A qualidade e completude da documentação do projeto, que inclui informações sobre como executar, testar e utilizar o sistema.
-
-5. **Segurança**: A adoção de práticas de segurança apropriadas, como proteção contra ataques comuns, será considerada.
-
-## Instruções
-
-1. Implemente um Kanban básico que permita a criação de colunas e cards.
-2. Utilize Angular para o desenvolvimento do cliente e NestJs para o desenvolvimento do servidor.
-3. Siga as boas práticas de desenvolvimento de software recomendadas pelos frameworks.
-4. Implemente testes unitários e integrados para garantir a qualidade e robustez do sistema.
-5. Documente o projeto de forma clara e completa neste arquivo README.
-
-## Entrega
-
-Você deve enviar a resolução do desafio via pull request nesse mesmo repositório ;)
-
-## Estrutura do Projeto
-
-A estrutura do projeto deve seguir as convenções padrão do Angular e do NestJs, com os arquivos de configuração e código-fonte organizados de maneira lógica e intuitiva.
-
-## Observações
-
-- Certifique-se de que o código está devidamente comentado e documentado para facilitar a compreensão e manutenção futura.
-- Evite a utilização de bibliotecas ou frameworks que não sejam necessários para a implementação do Kanban básico.
-- Qualquer dúvida ou problema encontrado durante a execução do projeto, entre em contato com os avaliadores.
-
-## Referências
-
-### Angular
-
-- Documentação Oficial do Angular: [Angular Docs](https://angular.io/docs)
-- Repositório do Angular no GitHub: [Angular GitHub](https://github.com/angular/angular)
-
-### NestJs
-
-- Documentação Oficial do NestJs: [NestJs Docs](https://docs.nestjs.com/)
-- Repositório do NestJs no GitHub: [NestJs GitHub](https://github.com/nestjs/nest)
-
-Estes recursos fornecem uma base sólida para aprender e se aprofundar nos frameworks Angular e NestJs.
-
-## Para Iniciantes
-
-Se você é um iniciante nesta jornada de desenvolvimento, queremos encorajá-lo a participar deste teste e fazer o seu melhor. Na Field, valorizamos a força de vontade, a iniciativa e o desejo de aprender.
-
-Não se preocupe se você não conseguir entregar um projeto perfeito ou completo. O objetivo é que você ganhe experiência, aprenda com o processo e se desafie a ir além do que já conhece.
-
-Aqui estão algumas dicas para ajudá-lo durante o teste:
-
-1. **Comece com o Básico**: Concentre-se em entender os conceitos fundamentais do Angular e do NestJs. Explore tutoriais, documentações e exemplos de código para se familiarizar com as tecnologias.
+```bash
+cp .env.example .env
+```
 
-2. **Divida o Projeto em Etapas**: Em vez de tentar implementar tudo de uma vez, divida o projeto em etapas menores e gerenciáveis. Concentre-se em uma funcionalidade de cada vez e avance gradualmente.
+Suba o container docker com serviço do Postgres
 
-3. **Não Tenha Medo de Errar**: O processo de aprendizado envolve tentativa e erro. Não se preocupe com os erros ou obstáculos que encontrar ao longo do caminho. Eles fazem parte do processo e são oportunidades de aprendizado.
+```bash
+docker-compose up -d
+```
 
-4. **Celebre suas Conquistas**: Cada pequeno progresso é uma conquista. Celebre suas realizações, por menores que sejam, e reconheça o esforço e a dedicação que você está dedicando ao projeto.
+Isso iniciará o container do Postgres na porta `5432`.
 
-Lembre-se, o importante é tentar e aprender durante o processo. Valorizamos sua iniciativa e estamos aqui para apoiá-lo em sua jornada de desenvolvimento. Boa sorte e divirta-se codificando! 🌟
+Instale dependências do projeto
 
-## Diferenciais
+```bash
+npm install
+```
 
-Além dos requisitos básicos do teste, a inclusão dos seguintes diferenciais pode agregar valor ao projeto:
+Gere o cliente Prisma
 
-### Aplicação Publicada e Rodando
+```bash
+npx prisma generate
+```
 
-- Configurar e publicar a aplicação em um ambiente de hospedagem como Heroku, Netlify, AWS, Azure, etc., para demonstrar a capacidade de implantar e disponibilizar o sistema para uso real.
+Inicie o servidor em modo desenvolvimento
 
-### Testes Integrados e E2E
+```bash
+npm run start:dev
+```
 
-- Implementar testes integrados e end-to-end (E2E) utilizando ferramentas como Jasmine, Protractor, Jest, etc., para garantir a qualidade e estabilidade do sistema em diferentes níveis de teste.
+O backend estará rodando em `http://localhost:3000`
 
-### API em GraphQL ao Invés de REST
+## Frontend
 
-- Utilizar GraphQL como interface de programação de aplicativos (API) em vez de REST para oferecer uma forma mais flexível e eficiente de consultar e manipular dados entre o cliente e o servidor.
+### Para rodar o frontend, siga os passos abaixo:
 
-### Realtime com Socket.io
+Entre na pasta frontend
 
-- Implementar funcionalidades em tempo real utilizando Socket.io para fornecer uma experiência interativa e dinâmica aos usuários, permitindo atualizações instantâneas e sincronizadas entre os diferentes clientes conectados à aplicação.
+```bash
+cd frontend
+```
 
-A inclusão destes diferenciais demonstrará uma compreensão mais avançada e a aplicação de tecnologias modernas e práticas de desenvolvimento de software, elevando a qualidade e a experiência do usuário final.
+instale dependências do projeto
 
+```bash
+npm install
+```
 
-Dúvidas?
-----------
-Abra um issue ou me mande um e-mail em **luiz@fieldcontrol.com.br**, fechou? :)
+Inicie o servidor em modo desenvolvimento
 
-Gostariamos de entender como você pensa e as decisões que você tomou durante o desenvolvimento. Então, quando for enviar seu pull request, por favor responda:
+```bash
+npm start
+```
 
-- Qual ferramentas e bibliotecas (libraries, framework, tools etc) você usou
-- Porque você optou pela tecnologia X e não a Y
-- Quais princípios da engenharia de software que você usou?
-- Desafios e problemas que você enfrentou e como você resolveu
-- O que você entende que pode ser melhorado e como fazer isso
+O frontend estará rodando em `http://localhost:4200`

backend/.env.example

@@ -0,0 +1,2 @@
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/kanban_dev"
+FRONTEND_URL="http://localhost:3000"