Desafio proposto pela Rocketseat na Trilha ReactJS do Ignite.
Segui fielmente o protótipo feito para o desafio no Figma, indo além do que foi pedido, e estou muito contente com o resultado! 🎀
Live: https://todo-allbertuu.vercel.app/
Nesse desafio, desenvolvi uma aplicação de controle de tarefas no estilo to-do list, que contém as seguintes funcionalidades:
- Adicionar uma nova tarefa
- Marcar e desmarcar uma tarefa como concluída
- Remover uma tarefa da listagem
- Mostrar o progresso de conclusão das tarefas
Apesar de serem poucas funcionalidades, relembrei conceitos como:
- Estados (states) no ReactJS
- Imutabilidade do estado
- Listas e chaves no ReactJS
- Propriedades (props)
- Componentização
- Aviso/bloqueio ao usuário se ele está tentando adicionar uma tarefa que já existe.
- Aviso/bloqueio se o usuário está tentando adicionar uma tarefa sem texto.
- Responsividade. Responsivo para dispositivos móveis, tablets e desktops.
- Adicionado temas. "Light Theme" para modo claro, e "Dark Theme" para modo escuro. Possui persistência usando o LocalStorage no ReactJS.
- ReactJS
- Redux
- TailwindCSS
- TypeScript
- Vite
- Radix UI
Nesse desafio enfrentei problemas.
- Um deles foi que no começo do app, fiz prop drilling nos componentes, mas aquilo me deu uma agonia absurda, não gostei, e como sei Redux, criei o ambiente voltado a esse gerenciador de estados. Ganhei ganho de performance, manutenibilidade, e gerador de IDs sem precisar de libs externas (como uuid, por exemplo).
- Queria ordenar as tarefas feitas para ficar por último na lista, então criei um algoritmo de ordenação por tarefas feitas e não feitas: o
sortNotDoneToDone
. Uma função que usada como callback do método nativosort
em um array, ordena baseando-se na propisDone
iterando cada objeto do array. - Criei Generics em TypeScript para minha função de ordenação personalizada para testar meus conhecimentos em TypeScript, como também utilizar ao máximo o intellisense do VS Code, prevenindo erros na aplicação.
function sortNotDoneToDone<TaskType extends TaskState>(
a: TaskType,
b: TaskType
) {
// anterior não feito, próximo sim
if (!a.isDone && b.isDone) {
return -1;
}
// anterior feito, próximo não
if (a.isDone && !b.isDone) {
return 1;
}
// ambos feitos, ou não
return 0;
}
// uso da função
array.sort(sortNotDoneToDone);
Ressalto a importância de se estudar a base, os fundamentos. Construí com muita facilidade pois sabia o que queria, e como fazer a principio. Na seção Referências, disponibilizei alguns links úteis de métodos JS muito usados em aplicações ReactJS.
Você mesmo pode rodar e ver!
Clone o projeto
git clone https://github.com/allbertuu/todo-list
Entre no diretório do projeto
cd todo
Instale as dependências
yarn install
Inicie o servidor
yarn dev
- Instagram - @albert.vny
- Meu portfólio website
- Frontend Mentor
Se você tiver algum feedback, por favor me deixe saber por meio do meu LinkedIn 💬💙 (seção Autor).