Skip to content

📃 Uma lista de tarefas completa, bonita e útil. Com Dark Mode 🌑.

Notifications You must be signed in to change notification settings

allbertuu/todo-list

Repository files navigation

todo-list 📃

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! 🎀

Deploy 💻

Live: https://todo-allbertuu.vercel.app/

Sobre o desafio ⚡

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

Minhas próprias adições de funcionalidades 🚀

  • 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.

Stack utilizada ⚙

  • ReactJS
  • Redux
  • TailwindCSS
  • TypeScript
  • Vite
  • Radix UI

Aprendizados 📚

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 nativo sort em um array, ordena baseando-se na prop isDone 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.

Função que me orgulho (falada acima) ⭐

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.

Rodando localmente ▶

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

Autor 🙎🏻‍♂️

Feedback 💬

Se você tiver algum feedback, por favor me deixe saber por meio do meu LinkedIn 💬💙 (seção Autor).

Referências 📑