O objetivo deste desafio é criar uma lista de tarefas com armazenamento persistente de dados. A lista de tarefas deve ser estilizada com Tailwind CSS e, também, suportar a adição/conclusão de tarefas.
O desafio deve ser executado em até 1h15m. Você deve gerenciar o seu tempo e priorizar as tarefas de acordo com a sua experiência e conhecimento.
- Respeito aos requisitos e as limitações de desenvolvimento;
- Conhecimento de padrões e boas práticas de programação;
- Utilização de recursos do React, TypeScript e Tailwind CSS;
- Gerenciamento de tempo e priorização de tarefas;
- Ser consistente e saber argumentar escolhas.
- O usuário deve ser capaz de adicionar tarefas a uma lista;
- As tarefas sempre adicionadas no início da fila;
- O usuário deve ser capaz de marcar tarefas adicionadas como concluídas;
- As tarefas sempre finalizadas no final da fila;
- Quando passar 30 segundos após a conclusão de uma tarefa, ela deve ser oculta da lista, mas permanecer no armazenamento;
- O usuário deve visualizar em um cabeçalho a quantidade de tarefas adicionadas, concluídas (em porcentagem) e pendentes (em porcentagem);
- Para as tarefas pendentes, se a porcentagem for
>= 50%
deve ser exibida em vermelho, caso contrário, em verde; - Para as tarefas concluídas, se a porcentagem for
>= 50%
deve ser exibida em verde, caso contrário, em vermelho.
- Para as tarefas pendentes, se a porcentagem for
- O usuário deve conseguir rever as suas tarefas novamente, mesmo que feche o navegador ou atualize a página;
- O usuário deve conseguir migrar do modo claro para o modo escuro e vice-versa.
- Utilizar
useEffect
,useState
,useCallback
euseMemo
no projeto; - Seguir o padrão de projeto com ESLint, Prettier e organizar os recursos do projeto em pastas dentro de
/src/core
; - Utilizar Redux ou Contexto para gerenciar o estado da aplicação - com TypeScript;
- As definições de tipos - com TypeScript - devem ser aplicadas em todos os componentes, funções e hooks;
- Reproduzir a interface de usuário em exemplo.
- É permitido consulta somente às documentações oficiais do React, Redux, NextJS, TypeScript e Tailwind CSS;
- Não é permitido consultar a documentação do JavaScript;
- Não é permitido o uso de ferramentas de inteligência artificial (como Chat GPT ou Github Copilot) e nem consultas no Google, fóruns ou similares;
- Os arquivos de configuração não devem ser alterados, se necessário utilize o arquivo
.vscode/settings.json
para alinhar as configurações do seu VSCode com as configurações do projeto (ESLint, Prettier, etc); - Não é permitido adicionar nenhuma dependência ao projeto, somente as que já estão instaladas.
Com base nos requisitos implementados, será solicitado:
- Adicionar as tarefas (em ordem): 1, 2, 3, 4;
- Concluir as tarefas (em ordem): 3, 1;
- Esperar por 30 segundos;
- Pressionar F5;
- Trocar o tema para o modo escuro.