Feature/andrepinotti

PULL_REQUEST_TEMPLATE.md

@@ -1,46 +1,171 @@
-## Envio de solução
+# **Sistema de Kanban**
 
-Gostariamos de entender como você pensa e as decisões que você tomou durante o desenvolvimento, detalhe um pouco mais sobre:
+## **1. Introdução**
 
-**Framework, linguagem e ferramentas**
 
-Descreva ferramentas e bibliotecas (libraries, framework, tools etc) você usou.
-
-**Técnologias X e Y**
+---
 
-Justifique porque você optou pela tecnologia X e não a Y?
+## **2. Funcionalidades**
+* **Gerenciamento de Colunas(CRD)**:
+  * Adicionar, listar e excluir colunas.
+* **Gerenciamento de Cartões(CRUD)**:
+  * Adicionar, editar, mostrar, mover e excluir cartões entre colunas.
+* **Persistência de Dados**:
+  * Uso de TypeORM para conectar ao PostgreSQL.
 
-**Princípios de software**
+---
 
-Quais princípios da engenharia de software que você usou?
+## **3. Ferramentas e Bibliotecas Utilizadas**
 
-**Desafios e problemas**
+#### **Frontend**
+* **Angular**:
+  * Como pedido pelas instruções de desenvolvimento do projeto foi optado o Angular. Me encantei pela facilidade em desenvolver o frontend devido à sua integração nativa com TypeScript e pela clareza na estrutura dos componentes, o que facilitou bastante a organização do projeto. Por mais que realizei somente uma organização de componentes
+* **Uso do angular**:
+  * Desenvolvi os componentes e serviços da aplicação de, garantindo escalabilidade e manutenção facilitada.
 
-Conte um pouco sobre os desafios e problemas que você enfrentou e como você resolveu.
 
-**Melhorias e próximas implementações**
+#### **Backend**
+* **NestJS**:
+  * Como pedido pelas instruções de desenvolvimento do projeto foi optado o NestJS por ser um framework robusto,esclável e simples.Escrito em TypeScript e com uma arquitetura modular que facilita a organização do código. Sua semelhança com o Angular também proporcionou uma curva de aprendizado mais suave.
+  * Sua estrutura organizada facilita a criação de APIs REST, promovendo uma arquitetura limpa e reutilizável com os serviços. Além disso, o suporte nativo ao TypeORM torna a integração com o banco de dados ainda mais prática e eficiente.
+* **TypeORM**:
+  * ORM utilizado para criar e manipular o meu banco de dados no PostgreSQL.
+* **PostgreSQL**:
+  * Meu SGBD escolhido por ter mais facilidade com ele, por estar junto no meu dia a dia de desenvolvimento, por ter experiência e é claro,  Software Livre!.
 
-O que você entende que pode ser melhorado e como isso pode ser feito?
+#### **Testes**
+* **Frontend**:
+  * Ferramentas como o Jasmine e Karma configuradas automaticamente ao criar um projeto Angular com o CLI. Os arquivos de teste (.spec.ts) são gerados junto com componentes e serviços. O comando ng test executa os testes em modo watch, permitindo que os testes sejam reexecutados automaticamente a cada alteração no código.
+* **Backend**:
+  * Foi utilizado o framework de testes JEST que é integrado ao NestJS, com suporte a testes unitários e ótima performance. Os arquivos .spec.ts são gerados automaticamente ao criar serviços ou controladores pelo Nest CLI. Com npm run test:watch, os testes são executados continuamente a cada mudança no projeto.
 
-**Vídeo de apresentação**
+#### **Outras Ferramentas**
+* **Git**:
+  * Controle de versão.
+* **Visual Studio Code**:
+  * IDE para desenvolvimento.
 
-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 ;) -->
+---
 
-**Sobre você**
+## **4. Por que Escolhi estas Tecnologias?**
+* **Angular**:
+  *  Utiliza TypeScript, o que permite uma tipagem forte e detecção de erros em tempo de desenvolvimento.
+  *  Oferece uma estrutura modular e escalável, ideal para aplicações de médio e grande porte.
+  *  Possui excelente suporte a ferramentas modernas.
+* **NestJS**:
+  * Framework baseado em módulos, o que favorece a separação de responsabilidades e uma arquitetura limpa.
+  * Integra-se facilmente com ferramentas como TypeORM e bibliotecas de testes.
+  * Inspirado no Angular, o que garante sinergia entre frontend e backend
+* **TypeORM**:
+  * Permite mapear modelos para tabelas de banco de dados usando classes TypeScript.
+  * Facilita a realização de operações como CRUD, sem a necessidade de escrever SQL manualmente.
+
+## **5. Princípios de Engenharia de Software Utilizados**
+* **SOLID**:
+  * A organização do backend segue o princípio de responsabilidade única (cada serviço tem uma única responsabilidade).
+* **Modularidade**:
+  * Ambos os frameworks com suas respectivas funções atribuídas.
+* **DRY (Don't Repeat Yourself)**:
+  * Reaproveitamento de código utilizando services, modules e componentes.
+* **Test-Driven Development**:
+  * Testes unitários e integração gerados pelas bibliotecas de testes dos respectivos frameworks.
 
-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ê?
+## **6. Desafios e Soluções**
 
-**Outros detalhes**
+### **6.1 Integração do Drag-and-Drop**
+* **Desafio**: Integrar o recurso de drag-and-drop de maneira fluida no Angular sem interferir na usabilidade.  
+* **Solução**: Utilizei a biblioteca `@angular/cdk/drag-drop`, que oferece eventos pré-construídos para arrastar e soltar, reduzindo a complexidade da implementação manual.
 
-Se quiser enviar alguma informação adicional sobre o desafio..
+mockar os métodos de repositório (`find`, `create`, `save`, etc.), simulando o comportamento esperado em um ambiente de teste.
 
+### **6.3 Backend API Simples, mas Funcional**
+* **Desafio**: Criar um backend funcional com recursos limitados e um tempo reduzido.  
+* **Solução**: Optei por SQLite no desenvolvimento local e garanti uma estrutura modular que pode ser facilmente adaptada para bancos relacionais mais robustos, como PostgreSQL.
 
 ---
 
-Ah, deixe seu e-mail ou telefone para entrarmos em contato com você :) 
-
-
+## **7. O Que Pode Ser Adicionado e Ajustado**
+* **Autenticação e Autorização**:
+  * Aplicar segurança colocando login e protegendo nossas rotas com JWT, seria uma boa prática
+* **Testes End-to-End (E2E)**:
+  * Aplicar testes E2E com ferramentas como o Cypress traria uma cobertura mais ampla e realista do funcionamento da aplicação em diferentes cenários..
+* **Estilização e Responsividade**:
+  * O design da aplicação ainda está simples e pode ser aprimorado com melhorias visuais e adaptação responsiva para diferentes dispositivos.
+* **Suporte a Dados em Tempo Real**:
+  * Usar WebSockets para permitir que diversas resposta sejam geradas ao cliente de maneira automática.A implementação de WebSockets permitiria atualizações em tempo real, melhorando a experiência do usuário ao refletir mudanças automaticamente na interface sem a necessidade de recarregar a página.
+* **Deploy e CI/CD**:
+  * A criação de pipelines automatizadas com ferramentas como GitHub Actions pode agilizar o processo de deploy contínuo, garantindo consistência e eficiência nas atualizações do sistema
+* **Containers**
+  * Como uma das maneiras de melhorar a performance, a segurança e realizar mitigação de problemas. Utilizar Docker e seus paradigmas para que o usuário tenha mesma experiência, sem problemas de funcionamento por conta de Sistema Operacional ou Navegador.
+---
 
+## **8. Como Executar o Sistema**
+
+### **Pré-requisitos**
+* Node.js instalado.
+* Gerenciador de pacotes `npm` ou `yarn`, o de sua preferência, porém aqui será usado o `npm`.
+* Angular CLI instalado.
+
+### **Passo 1: Clonar o Repositório**
+```bash
+git clone https://github.com/andrepinotti/valinor.git
+```
+### **Passo 2: Configurar o Backend**
+1. Entre na pasta do backend:
+```bash
+cd .\valinor\KanbanMain\backend\
+```
+2. Instale as dependências:
+```bash
+npm install
+```
+4. Em seguida instale o pg para possibilitar o uso do postgreSQL
+```
+npm instal pg
+```
+3. Execute o backend:
+```bash
+npm run start
+```
+### **Passo 3**: Configurar o Frontend
+1. Abra um outro terminal e entre na pasta do frontend:
+```bash
+cd .\valinor\KanbanMain\frontend\
+```
+2. Instale as dependências:
+```bash
+npm install
+```
+3. Execute o frontend:
+```bash
+ng serve
+```
+### **Passo 4**: Acessar o servidor local:
+
+Entre em seu navegador acesse a seguinte URL: http://localhost:4200
+### **Passo 5**: Executar Testes no back-end e no front-end
+* Frontend
+```bash
+ng test
+```
+* Backend
+```bash
+npm run test
+```
+
+## 9. Vídeo de Apresentação
+
+https://jam.dev/c/3e0fdd29-8a5c-4793-b063-0203395636fb
+
+## 10. Contato
+Autor: André Pinotti
+
+Whatsapp: 17 99154-6089
+
+E-mail: [email protected]
+
+LinkedIn: https://www.linkedin.com/in/andre-pinotti/
+
+Sugestões e críticas são muito bem-vindas!

kanban/KanbanMain/backend/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};

kanban/KanbanMain/backend/.gitignore

@@ -0,0 +1,56 @@
+# compiled output
+/dist
+/node_modules
+/build
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# temp directory
+.temp
+.tmp
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

kanban/KanbanMain/backend/nest-cli.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "deleteOutDir": true
+  }
+}