Este repositório contém um projeto de Lista de Tarefas (Todo List) projetado para ser utilizado em entrevistas técnicas para candidatos a posições junior de desenvolvimento front-end com foco em React. O objetivo deste teste é avaliar as habilidades práticas do candidato em resolver problemas de codificação em um ambiente colaborativo de pair programming.
Durante a entrevista (cerca de 50 minutos), você será solicitado(a) a trabalhar em diversas tarefas relacionadas ao código fornecido. A interação é fundamental, e o entrevistador estará presente para guiá-lo(a) pelo processo, oferecendo ajuda conforme necessário.
- Node.js 18+
Necessário para executar o projeto. Disponível em https://nodejs.org/. - Visual Studio Code (VS Code)
Recomendado como editor de código. Disponível em https://code.visualstudio.com/. - Gerenciador de Pacotes
Pode ser Yarn, PNPM ou NPM. Escolha o que preferir para instalar as dependências do projeto.
Antes da entrevista, configure o ambiente de desenvolvimento em sua máquina:
git clone [email protected]:globocom/todo-list-app.git
cd todo-list-app
yarn install
Para executar o projeto em modo web (via Expo for Web):
yarn start
Para facilitar a resolução das tarefas e compreender melhor a estrutura do código, a recomendação é:
- Comece pelo arquivo
useTask- Este arquivo gerencia a lógica central das tarefas e a persistência no Local Storage.
- Depois, analise o
TaskProvider- Ele é responsável por distribuir as tarefas e funções de manipulação entre os componentes da aplicação.
-
Domínio de GIT
- Clonar o repositório e instalar as dependências necessárias.
-
Estado Local (
useState)- Criar um estado local para armazenar a lista de tarefas.
-
Adicionar Tarefa
- Implementar funcionalidade para adicionar uma nova tarefa.
-
Validação de Tarefa
- Não permitir adicionar uma tarefa vazia ou contendo apenas espaços.
-
Alternar Estado de Conclusão
- Marcar uma tarefa como concluída ou pendente.
-
Deletar Tarefa
- Permitir que o usuário delete uma tarefa da lista.
-
Desabilitar Botão
- Desabilitar o botão "Adicionar" quando não houver valor no campo de input.
Esta aplicação carrega e salva a lista de tarefas no Local Storage do navegador, garantindo que as tarefas persistam mesmo após recarregar a página.
- Carregar
- Quando a aplicação inicia, o hook de tarefas (
useTask) lê as tarefas salvas no Local Storage.
- Quando a aplicação inicia, o hook de tarefas (
- Salvar
- Sempre que o estado de tarefas (
tasks) é atualizado, o hook salva a nova lista no Local Storage.
- Sempre que o estado de tarefas (
Para compartilhar a lista de tarefas e funções de manipulação (adicionar, alternar, deletar) entre diferentes componentes, foi criado um Context (TaskProvider). Dessa forma:
- TaskProvider envolve a aplicação, provendo
tasks,addTask,toggleTaskedeleteTask. - useTasksContext acessa o contexto, retornando o estado atual e as funções de CRUD.
Este projeto conta com testes que validam as principais funcionalidades:
addTasktoggleTaskdeleteTaskLocal Storage(carregar e salvar)Context(distribuição de estado)
Para executar os testes:
yarn test
-
Rode os testes apenas no arquivo que está mexendo para facilitar a depuração e otimizar o tempo. Use:
yarn test nome-do-arquivo.test.tsx -
Leia atentamente as mensagens de erro, pois elas podem indicar problemas de configuração de ambiente (por exemplo, ausência de mocks para
localStorage).
- React
- Expo
- React Native Web
- Git
- TypeScript (opcional/fortemente recomendado)
- Leia atentamente cada tarefa e cada mensagem de erro.
- Faça perguntas sempre que algo não estiver claro.
- Use a documentação oficial das tecnologias envolvidas como referência.
- O objetivo é avaliar sua capacidade de resolver problemas, suas habilidades de comunicação e colaboração (pair programming).
Boa sorte! Estamos ansiosos para ver suas habilidades em ação.