Funcionalidades | Tecnologias | Validação | Pesquisa | Responsividade | Rodar Projeto
Projeto com a função de criar uma lista de tarefas.
Para isso, a aplicação é capaz de comunicar-se com a API e realizar as seguintes funcionalidades:
A aplicação é capaz de renderizar todas as tarefas na Home Page para o usuário, aravés da conexão com a API.
Novas tareas podem ser criadas através de um menu. Onde o usuário deve inserir um título e uma descição opcional.
A tarefa é enviada para o back-end através do método POST.
O usuário pode clicar na opção: Remover tarefa - disponível nas opções em todas as caixas de tarefa.
Cada tarefa contém um ID de identificação único, através do envio desse parâmetro com o método DELETE, a aplicação pode realizar a remoção de uma tarefa.
O usuário é capaz de alterar o título, descição ou situação da tarefa (completa ou incompleta).
Para a alteração é necessário enviar o ID de identificação da tarefa, título, descrição e situação, com o método PUT, a aplicação é capaz de realizar as alterações e renderizar a tarefa atualizada.
A linguagem tipada foi utilizada para a criação de toda a aplicação.
A aplicação utiliza o Server Side Rendering, para isso foi utilizada a ferramenta Next.js.
Para o gerenciamento de estados dos componentes, foi utilizado o Redux toolkit. Uma ferramenta criada pelo Redux, que torna a sua implemetação mais simples no projeto.
Durante a implementação, ocorreram algumas dificuldades com relação as tipagens do Redux, tais erros foram resolvidos com pesquisa nas documentações disponíveis.
Foi utilizado o pré-processador de CSS, o SASS. A implementação facilitou a criação da aplicação, pois adiciona algumas funcionalidades, como o encapsulamento das regras de estilo, o que melhora bastante a visualização do projeto.
Para a validação dos inputs e tratamento de erros, foi utilizada a biblioteca YUP.
Uma biblioteca de simples implementação, que segue as regras da documentação do back-end para a validação, conforme mostrado abaixo:
O componente de pesquisa criado, filtra as tarefas e atualiza em tempo real os resultados a cada caractere inserido.
Sua funcionalidade está demonstrada abaixo:
A aplicação conta com responsividade para dispositivos móveis, conforme demostrado:
Instalação das dependências
$ yarn$ yarn devPara testes das funcionalidades, a aplicação está hospedada na Vercel.
E pode ser acessada através do link:
https://to-do-list-indol.vercel.app/