Conclusão do Desafio - Lucas Vinícios

PULL_REQUEST_TEMPLATE.md

@@ -1,46 +1,79 @@
 ## Envio de solução
 
-Gostariamos de entender como você pensa e as decisões que você tomou durante o desenvolvimento, detalhe um pouco mais sobre:
+***Gostariamos de entender como você pensa e as decisões que você tomou durante o desenvolvimento, detalhe um pouco mais sobre:***
+Bom, eu não tenho experiência na área ainda, **FOI MÚITO DÍFICIL PRA INICIAR O PROJETO**,até que eu tinha um norte(começar pelo mais difícl, que seria o backend e depois o frontend,que seria um pouco mais fácil), mas eu não sabia mesmo assim por onde começar, declarando as classes, montar as entidades que seriam ser utilizadas no projeto, qual banco de dados usar,**foi muito louco,porém divertido**.
+Como sou uma pessoa inexperiente na área, foi bem difícil
+## Framework, linguagem e ferramentas
 
-**Framework, linguagem e ferramentas**
+***Descreva ferramentas e bibliotecas (libraries, framework, tools etc) você usou.***
+### No FrontEnd:
+**Angular 17** Framework principal utilizado com a arquitetura de *Standalone Components* (sem módulos excessivos).
+**Angular CDK (Component Dev Kit):** Biblioteca essencial utilizada para implementar a funcionalidade complexa de **Drag and Drop** (arrastar e soltar) de forma fluida e acessível.
+**TypeScript:** Superconjunto do JavaScript que adiciona tipagem estática, garantindo um código mais seguro e fácil de manter.
+**HTML5 & CSS3:** Utilização de *Flexbox* e *CSS Grid* para layout responsivo, além de variáveis CSS para manter a consistência visual.
 
-Descreva ferramentas e bibliotecas (libraries, framework, tools etc) você usou.
+### No BackEnd:
+**NestJS:** Framework Node.js progressivo e modular, utilizado para construir a API RESTful.
+**TypeORM:** ORM (Object-Relational Mapper) utilizado para manipular o banco de dados usando classes e objetos TypeScript, facilitando o CRUD e as relações entre tabelas.
+**Node.js:** O ambiente de execução JavaScript no lado do servidor.
+Banco de Dados
+**PostgreSQL:** Banco de dados relacional robusto utilizado para persistir as colunas e os cards do sistema, hospedado na nuvem em um site chamado Supabase.
 
-**Técnologias X e Y**
 
-Justifique porque você optou pela tecnologia X e não a Y?
+## Técnologias X e Y
 
-**Princípios de software**
+***Justifique porque você optou pela tecnologia X e não a Y?***
+Em vez de utilizar o JavaScript para o desenvolvimento do projeto, utilizei TypeScript por facilidade de uso de decorators, linguagem nativa de ambos os frameworks(eu tentei realizar este projeto em JavaScript puro, porém estava com muitos problemas de configurações),
+Utilizei TypeORM para a facilitação de manipulação de dados das colunas e cards, em vez de escrever SQL puro no projeto.
 
-Quais princípios da engenharia de software que você usou?
 
-**Desafios e problemas**
+## Princípios de software
 
-Conte um pouco sobre os desafios e problemas que você enfrentou e como você resolveu.
+***Quais princípios da engenharia de software que você usou?***
+**Separação de Responsabilidades (SoC):** Backend (API) e Frontend (Client) totalmente desacoplados.
+**Arquitetura em Camadas:** Uso de Controllers, Services e Repositories no NestJS.
+**Injeção de Dependência (DI):** Gerenciamento de instâncias provido pelos frameworks Angular e NestJS.
+**Repository Pattern:** Abstração da camada de dados com TypeORM.
+**SOLID:** Aplicação de princípios como Responsabilidade Única (SRP) e Inversão de Dependência (DIP).
 
-**Melhorias e próximas implementações**
+## Desafios e problemas
 
-O que você entende que pode ser melhorado e como isso pode ser feito?
+***Conte um pouco sobre os desafios e problemas que você enfrentou e como você resolveu.***
+Bom tive o problemas sobre a configuração do JavaScript no projeto, iria realizar este projeto utilizando o JavaScript, porém gastou muito do meu tempo para realizar o projeto, portanto, eu tive que trocar para o TypeScript.
+Tive problemas também sobre o TypeORM, não sabia muito sobre este recurso, tive que pesquisar na internet de como funciona e como utilizar no projeto.
+A maioria foi no backend os problemas, já no frontend foi bem fácil e molezinha de construir
 
-**Vídeo de apresentação**
+## Melhorias e próximas implementações
+
+***O que você entende que pode ser melhorado e como isso pode ser feito?***
+Analisando o projeto, eu não gostei muito do layout, eu estava sem criatividade para desenvolver um layout descente, mas é funcinal pelo menos :/, eu queria trazer mais funcinalidades neste projeto, com páginas de cadastros e login, com os boards criados pelo usuário.
+
+## 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 ;) -->
 
-**Sobre você**
+https://jam.dev/c/e4f8bef0-2bf6-4677-ad2e-53381026a3d4
 
-Queremos te conhecer um pouco melhor, conte um pouco sobre você.
+## Sobre Mim
 
-Onde nasceu/De onde você é? Lugares que estudou, empresas que trabalhou, como você se envolveu com desenvolvimento de software.. enfim, Quem é você?
+***Queremos te conhecer um pouco melhor, conte um pouco sobre você.***
 
-**Outros detalhes**
+Vamos lá, meu nome é Lucas Vinícios, 19 anos, atualmente, estudo Análise e Desenvolvimento de Sistemas na UNIP, moro próximo de Rio Preto, num sítio chamado Sítio São João, perto do SetValley, não nasci aqui, sou de São José do Rio Claro/MG (irônico né? Foi de Rio Claro pra Rio Preto), mudei pro Estado de São Paulo em 2010, morei em 6 cidades diferentes(está é a 6ª), pretendo ficar aqui em Rio Preto mesmo, tive e tenho muitas oportunidades aqui, trabalhei no setor de vendas, numa empresa chamada EnergySky(já faliu), realizando consulta, cobranças num ramo de painéis solares da empresa(eles realizavam orçamento de painéis solares e venda do plano Sky) e atualmente, trabalho numa empresa de engenharia chamada Astec Engenharia, faço parte de um escritório da empresa que presta consultoria para o DER(Departamento de Estradas e Rodovias), minhas atividades diárias envolve validação das sinalizações de transito e realizo algumas análises no BI.
+Ai vocês me  perguntam: "Como eu me envolvi em programação?", meu irmão era Universitário na UNIP realizando o mesmo curso, ele chegou um dia pra mim e falou: "Eu comprei um curso de Python, você vai estudar" e fiquei tipo: "Bacana😀", eu não queria fazer, mas ele me forçou a fazer, SÓ QUE, no decorrer do curso, eu fui aprendendo e começando a gostar de Python, foi ali que surgiu a ideia de seguir com a carreira, pesquisei outros cursos no Youtube, conheci o canal CursoEmVídeo, Fiz os cursos de HTML, CSS, SQL, mas foi ali que decidi construir minha carreira na área de desenvolvimento.
 
-Se quiser enviar alguma informação adicional sobre o desafio..
+## Outros detalhes
 
+***Se quiser enviar alguma informação adicional sobre o desafio.***
+Foi um desafio bem difícil para mim, porém com a dedicação que eu coloquei nesse projeto, tempo e foco, café, consegui finalizar o projeto, fico muito feliz por  ter participado desse desafio, foi muito bom para meu desenvolvimento na carreira.
 
----
 
-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ê :) 
 
+lvinicios365@gmail.com
+017997630577
+Sinto muito pela Informalidade desse texto, porém, eu preciso ser eu mesmo para ser avaliado neste texto :D
+E por favor, caso for entrar em contato cmg, seja por email, fui viajar agora no final do ano, e meu celular foi de F

project/README.md

@@ -0,0 +1,94 @@
+#  Kanban Board Fullstack
+
+![Status](https://img.shields.io/badge/Status-Concluído-green?style=for-the-badge)
+![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)
+![NestJS](https://img.shields.io/badge/NestJS-E0234E?style=for-the-badge&logo=nestjs&logoColor=white)
+![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white)
+![TypeORM](https://img.shields.io/badge/TypeORM-FE0C05?style=for-the-badge&logo=typeorm&logoColor=white)
+
+> Um sistema de gerenciamento de tarefas visual (estilo Trello) desenvolvido com arquitetura moderna, separando Frontend e Backend em um monorepo.
+
+---
+##  Sobre o Projeto
+
+Este projeto é uma aplicação **Fullstack** que implementa um quadro Kanban interativo. O objetivo principal foi criar uma arquitetura limpa onde o Frontend (Angular) consome uma API RESTful (NestJS), com persistência de dados em banco relacional (PostgreSQL).
+
+**Principais desafios técnicos resolvidos:**
+* **Comunicação entre Componentes:** Sincronização de estado entre componentes pais e filhos no Angular.
+* **Drag & Drop:** Implementação fluida de arrastar e soltar tarefas usando `Angular CDK`.
+* **API Robusta:** Backend em NestJS com tratamento de erros e validação de dados.
+
+---
+
+##  Tecnologias Utilizadas
+
+### **Frontend** (`/frontend`)
+- **Angular 17+** (Standalone Components)
+- **Angular CDK** (Drag & Drop)
+- **HTML5 & CSS3** (Flexbox, Grid e Variáveis CSS)
+- **TypeScript**
+
+### **Backend** (`/backend`)WS
+- **NestJS** (Framework progressivo para Node.js)
+- **TypeORM** (ORM para abstração do banco de dados)
+- **PostgreSQL** (Banco de dados relacional)
+
+---
+
+##  Funcionalidades
+
+- [x] **Gestão de Colunas**: Criar e excluir listas de tarefas dinamicamente.
+- [x] **Gestão de Cards**: Adicionar tarefas com título e descrição.
+- [x] **Drag & Drop**: Arrastar cards entre colunas diferentes livremente.
+- [x] **Interface Limpa**: Formulários inline para criação rápida (UX focada em produtividade).
+- [x] **Persistência Real**: Todos os dados e movimentos são salvos no banco de dados.
+
+---
+
+##  Instalação e Execução
+
+Siga os passos abaixo para rodar o projeto em sua máquina local.
+
+### 1. Pré-requisitos
+Certifique-se de ter instalado:
+- **Node.js** (v18 ou superior)
+- **Git**
+- **PostgreSQL** (Rodando na porta padrão 5432)
+
+### Backend (NestJS)
+
+2. Navegue até o diretório do backend:
+   ```bash
+   cd kanban-backend
+   ```
+
+3. Instale as dependências:
+   ```bash
+   npm install
+   ```
+
+4. Inicie o servidor de desenvolvimento:
+   ```bash
+   npm run start:dev
+   ```
+
+   O backend estará disponível em `http://localhost:3000`.
+
+### Frontend (Angular)
+
+1. Navegue até o diretório do frontend:
+   ```bash
+   cd kanban-frontend
+   ```
+
+2. Instale as dependências:
+   ```bash
+   npm install
+   ```
+
+3. Inicie o servidor de desenvolvimento:
+   ```bash
+   npm start
+   ```
+
+   O frontend estará disponível em `http://localhost:4200`

project/backend_kanban/.gitignore

@@ -0,0 +1,58 @@
+# 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
+
+/generated/prisma

project/backend_kanban/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "endOfLine": "auto"
+}

project/backend_kanban/README.md

@@ -0,0 +1,98 @@
+<p align="center">
+  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
+</p>
+
+[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
+[circleci-url]: https://circleci.com/gh/nestjs/nest
+
+  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
+    <p align="center">
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
+<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
+<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
+<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
+<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
+  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" alt="Donate us"/></a>
+    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
+  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow" alt="Follow us on Twitter"></a>
+</p>
+  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
+  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
+
+## Description
+
+[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
+
+## Project setup
+
+```bash
+$ npm install
+```
+
+## Compile and run the project
+
+```bash
+# development
+$ npm run start
+
+# watch mode
+$ npm run start:dev
+
+# production mode
+$ npm run start:prod
+```
+
+## Run tests
+
+```bash
+# unit tests
+$ npm run test
+
+# e2e tests
+$ npm run test:e2e
+
+# test coverage
+$ npm run test:cov
+```
+
+## Deployment
+
+When you're ready to deploy your NestJS application to production, there are some key steps you can take to ensure it runs as efficiently as possible. Check out the [deployment documentation](https://docs.nestjs.com/deployment) for more information.
+
+If you are looking for a cloud-based platform to deploy your NestJS application, check out [Mau](https://mau.nestjs.com), our official platform for deploying NestJS applications on AWS. Mau makes deployment straightforward and fast, requiring just a few simple steps:
+
+```bash
+$ npm install -g @nestjs/mau
+$ mau deploy
+```
+
+With Mau, you can deploy your application in just a few clicks, allowing you to focus on building features rather than managing infrastructure.
+
+## Resources
+
+Check out a few resources that may come in handy when working with NestJS:
+
+- Visit the [NestJS Documentation](https://docs.nestjs.com) to learn more about the framework.
+- For questions and support, please visit our [Discord channel](https://discord.gg/G7Qnnhy).
+- To dive deeper and get more hands-on experience, check out our official video [courses](https://courses.nestjs.com/).
+- Deploy your application to AWS with the help of [NestJS Mau](https://mau.nestjs.com) in just a few clicks.
+- Visualize your application graph and interact with the NestJS application in real-time using [NestJS Devtools](https://devtools.nestjs.com).
+- Need help with your project (part-time to full-time)? Check out our official [enterprise support](https://enterprise.nestjs.com).
+- To stay in the loop and get updates, follow us on [X](https://x.com/nestframework) and [LinkedIn](https://linkedin.com/company/nestjs).
+- Looking for a job, or have a job to offer? Check out our official [Jobs board](https://jobs.nestjs.com).
+
+## Support
+
+Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
+
+## Stay in touch
+
+- Author - [Kamil Myśliwiec](https://twitter.com/kammysliwiec)
+- Website - [https://nestjs.com](https://nestjs.com/)
+- Twitter - [@nestframework](https://twitter.com/nestframework)
+
+## License
+
+Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).

project/backend_kanban/eslint.config.mjs

@@ -0,0 +1,35 @@
+// @ts-check
+import eslint from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['eslint.config.mjs'],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  eslintPluginPrettierRecommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      sourceType: 'commonjs',
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
+      "prettier/prettier": ["error", { endOfLine: "auto" }],
+    },
+  },
+);