Implementação da aplicação de Todos com React e Spring Boot

Leiame.md

@@ -1,79 +1,155 @@
-# Code Challenge Java
-
-## Desafio Overview:
-
-Você tem a tarefa de criar um aplicativo da Web que permita aos usuários criar e gerenciar suas listas de tarefas. O aplicativo deve consistir em uma página da Web responsiva construída em React e uma API construída em Java Spring Boot para armazenar e gerenciar as listas de tarefas.
-
-### Os Repositórios
-- **Frontend**: Construído com React. Você também pode escolher outro framework React, se preferir.
-- **Backend**: Construído com Java Spring Boot, utilizando qualquer banco de dados de sua escolha (por exemplo, MySQL, PostgreSQL, MongoDB ou em memória).
-
-### O Layout
-Consulte o [mockup do layout](https://www.figma.com/file/sQrUVHTlyogq3qGdkqGTXN/mockup?node-id=7%3A2&t=ANTOTiqjqGWYuoUr-0) nas versões desktop e mobile. Siga este design o mais fielmente possível.
-
-### Funcionalidades Requeridas:
-
-1. Os usuários devem ser capazes de **criar**, **ler**, **atualizar** e **excluir** itens de tarefas usando a API.
-2. Os usuários devem poder **marcar um item como favorito**.
-3. Os usuários devem poder **atribuir uma cor** a cada item de tarefa.
-4. O frontend React deve exibir a lista de tarefas do usuário de forma responsiva e visualmente atraente, com a capacidade de **filtrar** por itens favoritos e cor.
-5. Os itens favoritos devem aparecer no topo da lista.
-
-### Requisitos Técnicos:
-1. **API de Backend**:
-   - Construído usando **Java Spring Boot**.
-   - Use qualquer banco de dados de sua escolha (por exemplo, PostgreSQL, MongoDB, em memória, etc.).
-2. **Frontend**:
-   - Construído usando **React** e ferramentas modernas de desenvolvimento web.
-3. **Design Responsivo**:
-   - O aplicativo deve ser totalmente responsivo, proporcionando uma experiência perfeita em dispositivos desktop e mobile.
-
-### Entregáveis:
-
-1. Um link para um repositório GitHub contendo o código-fonte completo tanto para o **backend** quanto para o **frontend**.
-2. Uma descrição por escrito de como configurar e executar o aplicativo localmente.
-
-### Critério de Avaliação:
-
-1. **Qualidade do Código**: Código bem estruturado e de fácil manutenção.
-2. **Formato do Código**: Consistente e segue as melhores práticas.
-3. **Desempenho do Código**: Soluções eficientes e escaláveis.
-4. **Design de Frontend**: Uma interface de usuário amigável e visualmente atraente.
-5. **Legibilidade**: O código é fácil de entender e manter?
-6. **Abordagem Mobile-First**: O design deve priorizar a responsividade móvel.
-7. **Responsabilidade do Código**: Separação clara de responsabilidades (frontend vs. backend).
-8. **Funcionalidade Completa**: O app atende a todos os requisitos funcionais listados?
-9. **Capacidade de Resposta**: O aplicativo funciona bem em diferentes tamanhos de tela?
-10. **Boas Práticas**: Uso de ferramentas modernas de desenvolvimento web e padrões.
-11. **Design**: O aplicativo segue o mockup fornecido?
-12. **Documentação**: Código bem documentado e instruções de configuração claras.
-
-### Backend:
-1. **Java**: Versão 11+
-2. **Framework**: Spring Boot
-3. **Banco de Dados**: Escolha o seu, ou use um banco de dados em memória (por exemplo, H2).
-
-### Frontend:
-1. **Node**: ^16.15.0
-2. **NPM**: ^8.5.5
-3. **Framework**: React
-4. **CSS**: Sass ou outro pré-processador de sua escolha.
-
-### Quer Nos Impressionar Ainda Mais?
-
-1. Defina corretamente tipos e interfaces.
-2. Configure e aplique regras do **ESLint**.
-3. Crie uma configuração do **Prettier** para formatação consistente.
-4. Containerize o app com **Docker**.
-5. Escreva **testes** unitários e de integração.
-6. Configure pipelines de **CI/CD** para testes e deploy automatizados.
-
-### Instruções para Submissão:
-
-1. Crie um arquivo `PULL_REQUEST.md` onde você descreva o processo, decisões tomadas e quaisquer detalhes importantes sobre a implementação.
-2. Crie uma solicitação pull para os repositórios **backend** e **frontend** usando o mesmo nome de branch.
-3. Envie-nos o pull request e pronto!
-
----
-
-Boa sorte! 🚀
+# Todo App
+
+Um aplicativo web de gerenciamento de tarefas, projetado para oferecer uma experiência intuitiva e eficiente na organização do dia a dia. A aplicação utiliza React no frontend, proporcionando uma interface dinâmica e responsiva, enquanto o Java Spring Boot no backend garante um desempenho robusto e escalável. O sistema permite aos usuários criar, ler, atualizar e excluir tarefas de forma simples, com a possibilidade de marcar itens como favoritos e atribuir cores a cada tarefa, facilitando a categorização e priorização.
+
+## Funcionalidades
+
+- Criar, ler, atualizar e excluir itens de tarefas.
+- Marcar itens como favoritos.
+- Atribuir cores a cada item de tarefa.
+- Filtrar tarefas por favoritos e cores.
+- Interface responsiva para desktop e dispositivos móveis.
+- Teste unitário para o hook customizado
+- Definição de interfaces e types no backend e frontend
+
+## Tecnologias Utilizadas
+
+- **Frontend:** React, Typescript, Sass, Axios
+- **Backend:** Java Spring Boot, MySQL
+- **Docker:** Contêineres para o backend, frontend e banco de dados
+
+
+## Estrutura do Projeto
+
+    /project-root
+    │
+    ├── /backend       # Código do backend (Java Spring Boot)
+    │   ├── Dockerfile
+    │   ├── pom.xml
+    │   └── /src       # Código-fonte do backend
+    │       ├── /main  # Código principal
+    │       │   ├── /java  # Código Java
+    │       │   └── /resources  # Recursos como templates e arquivos de configuração
+    │       └── /test  # Testes
+    │
+    ├── /frontend      # Código do frontend (React)
+    │   ├── Dockerfile
+    │   ├── package.json
+    │   ├── /public    # Arquivos públicos
+    │   └── /src       # Código-fonte do frontend
+    │       ├── /components  # Componentes React
+    │       ├── /hooks       # Hooks customizados (Testes _unitários_para cada hook dentro dessa pasta)
+    │       ├── /services    # Serviço que realiza conexão com api externa
+    │       └── /styles      # Estilos (Sass)
+    │       └── App.tsx      # Pagina principal
+    │
+    └── docker-compose.yml  # Arquivo de configuração do Docker Compose
+
+
+
+ ## Configuração do Ambiente
+ ### Pré-requisitos
+
+- Docker e Docker Compose instalados
+ ### Instruções de Execução
+
+1. Clone o repositório:
+
+   ```bash
+   git clone https://github.com/santowilll/code-challenge-java.git
+   cd code-challenge-java
+2.  Navegue até o diretório do backend:
+	 ```bash
+	cd backend/
+3. Compile o projeto com o Maven: Execute o seguinte comando para compilar e empacotar seu aplicativo:
+	 ```bash
+	mvn clean package
+4. Verifique se o arquivo `.jar` foi gerado: Certifique-se de que o arquivo `.jar` está na pasta `target`:
+	```bash
+	ls target/
+5. Execute o Docker Compose: Agora que o arquivo `.jar` foi gerado, você pode navegar até o diretório raiz do seu projeto (onde está o arquivo `docker-compose.yml`) e executar o Docker Compose:
+    ```bash
+    cd ../
+    docker-compose up --build 
+6.  Acesse o aplicativo:
+
+    -   Frontend: http://localhost:3000
+    -   Backend: http://localhost:8080
+
+### Testando o Backend com Thunder Client (Opcional)
+
+Para facilitar os testes da API, adicionei uma coleção do Thunder Client ao projeto. Essa coleção contém todas as rotas da API, permitindo que você teste facilmente as funcionalidades do backend sem a necessidade de criar chamadas de API manualmente.
+
+#### Como Usar
+
+1. **Instale o Thunder Client:** Caso ainda não tenha, instale a extensão Thunder Client na sua IDE (por exemplo, Visual Studio Code).
+2. **Importe a Coleção:** 
+   - Abra o Thunder Client.
+   - Clique em "Import" e selecione a coleção do Thunder Client fornecida no projeto (arquivo `thunder-collection_code-challenge-java.json`).
+3. **Execute os Testes:** 
+   - Selecione as requisições desejadas na coleção e execute-as para verificar a funcionalidade da API.
+
+A coleção foi projetada para cobrir todas as operações CRUD e outras funcionalidades.
+
+## Estrutura do Docker
+
+### Dockerfile - Backend
+
+
+    FROM openjdk:17-jdk-slim 
+    VOLUME /tmp
+    COPY target/*.jar app.jar
+
+    ENTRYPOINT ["java", "-jar", "/app.jar"]
+    EXPOSE 8080
+
+### Dockerfile - Frontend
+
+
+    FROM node:16 AS build 
+    WORKDIR /app
+    COPY package.json ./
+    COPY package-lock.json ./
+    RUN npm install --legacy-peer-deps
+    COPY . .
+    RUN npm run build
+
+    FROM nginx:alpine
+    COPY --from=build /app/build /usr/share/nginx/html
+    EXPOSE 80
+
+### docker-compose.yml
+
+    services:
+      backend:
+        build:
+          context: ./backend
+          dockerfile: Dockerfile
+        container_name: backend
+        ports:
+          - "8080:8080"
+        environment:
+          - SPRING_DATASOURCE_URL=jdbc:mysql://db:3306/todo_app?useSSL=false&serverTimezone=UTC
+          - SPRING_DATASOURCE_USERNAME=root
+          - SPRING_DATASOURCE_PASSWORD=12345678
+        depends_on:
+          - db
+
+      db:
+        image: mysql:5.7
+        restart: always
+        environment:
+          MYSQL_ROOT_PASSWORD: 12345678
+          MYSQL_DATABASE: todo_app
+          MYSQL_USER: root
+          MYSQL_PASSWORD: 12345678
+        ports:
+          - "3306:3306"
+
+      frontend:
+        build:
+          context: ./frontend
+          dockerfile: Dockerfile
+        container_name: frontend
+        ports:
+          - "3000:80"

PULL_REQUEST.md

@@ -0,0 +1,130 @@
+
+# Pull Request: To Do APP 
+
+
+
+## Descrição do Projeto
+
+
+
+Este pull request implementa um aplicativo web para gerenciamento de tarefas, desenvolvido com React para o frontend e Java Spring Boot para o backend. O objetivo é fornecer uma interface intuitiva e funcional para a criação, leitura, atualização e exclusão de tarefas.
+
+
+
+## Funcionalidades
+
+
+
+-  **CRUD de Tarefas:** Permite criar, ler, atualizar e excluir itens de tarefas.
+
+-  **Marcação de Favoritos:** Os usuários podem marcar itens como favoritos para fácil acesso.
+
+-  **Cores para Tarefas:** Cada item de tarefa pode ser atribuído a uma cor específica, facilitando a organização visual.
+
+-  **Filtragem de Tarefas:** Opções para filtrar tarefas com base em favoritos, cores e título.
+
+-  **Interface Responsiva:** A aplicação é totalmente responsiva, adaptando-se a desktops e dispositivos móveis.
+
+-  **Testes Unitários:** Inclusão de testes unitários para hooks  customizados utilizados na aplicação.
+
+-  **Definição de Interfaces e Types:** Uso de interfaces e tipos no backend (Java) e frontend (TypeScript) para garantir a consistência e segurança do código.
+
+
+
+## Tecnologias Utilizadas
+
+
+
+-  **Frontend:** React, Typescript, Sass, Axios
+
+-  **Backend:** Java Spring Boot, MySQL
+
+-  **Docker:** Utilização de contêineres para o backend, frontend e banco de dados.
+
+
+
+## Decisões Tomadas
+
+
+
+### **Escolha do Stack**
+
+A escolha de **React** e **Java Spring Boot** foi motivada pela sua popularidade e robustez na comunidade de desenvolvimento. A arquitetura baseada em componentes do React permite uma experiência de usuário altamente interativa, enquanto o Spring Boot fornece uma base sólida para construir serviços de backend escaláveis e manuteníveis. Juntas, essas tecnologias facilitam uma clara separação de preocupações, tornando a arquitetura da aplicação mais organizada e adaptável a futuras mudanças.
+
+### **Gerenciamento de Estado**
+
+Para gerenciar o estado das tarefas, criei um **hook personalizado** que encapsula a lógica de gerenciamento dos todos. Essa abordagem não apenas garante uma melhor **testabilidade**, permitindo que os testes sejam realizados de forma isolada, mas também abstrai a camada visual da lógica, tornando o código mais modular e reutilizável. O uso de hooks do React, como `useState` e `useEffect`, combinado com este hook personalizado, proporciona uma solução moderna e eficaz para a manipulação de dados. Essa abordagem simplifica o código, melhora o desempenho ao minimizar re-renderizações desnecessárias e facilita a manutenção e a escalabilidade da aplicação.
+
+###  **Persistência de Dados:** 
+O MySQL foi escolhido como sistema de banco de dados pela sua confiabilidade e fácil integração com o Spring Boot.
+
+### **Containerização**
+
+A implementação do **Docker** garante que os ambientes de desenvolvimento e produção sejam consistentes. Essa containerização simplifica o processo de configuração, permitindo que os desenvolvedores se concentrem na construção de funcionalidades sem se preocupar com discrepâncias de ambiente.
+
+### **Estilização e Consistência da UI**
+
+Para criar uma interface de usuário que se aproxime do mockup fornecido, utilizei **SCSS**. Esse pré-processador permite o uso de variáveis, regras aninhadas e mixins, o que aumenta a manutenibilidade e escalabilidade da estilização. O SCSS possibilita a criação de uma folha de estilos modular, garantindo que os estilos sejam consistentes em toda a aplicação e facilmente gerenciáveis.
+
+###  **Teste Unitário: `useTodos`**
+
+Neste teste unitário, utilizei a biblioteca **React Testing Library** junto com **Jest** para garantir que o hook `useTodos` funcione corretamente. O teste verifica as operações de busca, adição, exclusão e atualização de tarefas.
+
+##### **Configurações**
+
+-   **`renderHook`**: Para renderizar o hook em um ambiente de teste, permitindo acessar seu estado e métodos.
+-   **`act`**: Envolvendo operações que alteram o estado, garantindo que as atualizações ocorram de forma previsível.
+-   **Mock do `todoService`**: Isola o hook das dependências externas, permitindo testar apenas a lógica do hook.
+
+##### **Testes Implementados**
+
+1.  **Busca de Tarefas**: Verifica se as tarefas são recuperadas corretamente ao montar o hook.
+2.  **Adição de Tarefa**: Testa se uma nova tarefa é adicionada corretamente ao estado.
+3.  **Exclusão de Tarefa**: Confirma se uma tarefa pode ser removida e que o estado é atualizado adequadamente.
+4.  **Atualização de Tarefa**: Garante que as modificações em uma tarefa existente sejam refletidas no estado.
+
+###  **Criação e Uso do `todoService` na Aplicação**
+
+O `todoService` é uma camada de abstração que encapsula as operações de comunicação com a API para gerenciar tarefas (todos). Esta abordagem é fundamental para manter a aplicação organizada e facilitar a manutenção.
+
+##### **Criação do `todoService`**
+
+-   **Estrutura**: O serviço é implementado como um módulo que exporta funções para as operações CRUD (Criar, Ler, Atualizar e Deletar) das tarefas.
+-   **Axios**: Utiliza a biblioteca `axios` para realizar as requisições HTTP, permitindo interagir com a API de forma simples e intuitiva.
+
+
+
+##### **Uso do `todoService` na Aplicação**
+
+-   **Integração com Hooks**: No hook personalizado `useTodos`, o `todoService` é utilizado para gerenciar o estado das tarefas. As funções do serviço são chamadas nas operações de busca, adição, exclusão e atualização de tarefas.
+-   **Gerenciamento de Estado**: Ao utilizar o `todoService`, a lógica de estado fica isolada em um único lugar, o que facilita a manutenção e a testabilidade da aplicação.
+-   **Resiliência**: O `todoService` lida com possíveis erros nas requisições, permitindo que a aplicação responda de forma adequada a falhas na comunicação com a API.
+
+
+
+
+### **Explicação dos Filtros Aplicados**
+
+Neste pull request, foram implementados filtros para a lista de _todos_ de forma otimizada, utilizando o `useMemo` para melhorar o desempenho e evitar cálculos desnecessários. Abaixo estão os detalhes dos filtros aplicados:
+
+1.  **Filtragem de Todos os Itens**:
+
+    -   A lista principal de _todos_ foi filtrada com base no valor de pesquisa fornecido e na cor selecionada, caso aplicável.
+    -   Para cada _todo_, verificamos se o título contém o valor de pesquisa (ignorando maiúsculas e minúsculas) e se corresponde à cor selecionada, se uma cor foi especificada. Caso nenhuma cor tenha sido selecionada, todos os _todos_ que atendam ao critério de pesquisa são incluídos.
+2.  **Filtragem de Itens Favoritos**:
+
+    -   A partir da lista de _todos_ previamente filtrada, criamos uma lista que contém apenas os itens marcados como favoritos.
+    -   Este filtro é aplicado para facilitar a visualização e o acesso rápido aos itens que foram marcados como favoritos pelo usuário.
+3.  **Filtragem de Itens Não Favoritos**:
+
+    -   Da mesma forma, criamos uma lista que contém apenas os itens que não foram marcados como favoritos.
+    -   Isso permite separar os _todos_ em duas categorias distintas, favorecendo a organização e o gerenciamento dos itens.
+
+Esses filtros foram implementados utilizando `useMemo` para evitar recalcular os resultados sempre que a lista original de _todos_ ou os critérios de filtragem (valor de pesquisa ou cor selecionada) não sofrerem alterações, o que melhora significativamente a performance da aplicação.
+
+
+## Conclusão
+
+
+
+Este PR inclui todas as funcionalidades planejadas e seguiu as melhores práticas de desenvolvimento. Estou ansioso para receber seu feedback e sugestões para melhorias.