📝 Aplicativo de Lista de Tarefas em React Native

📋 Aplicativo para gerenciamento de tarefas em React Native, utilizando Expo e TypeScript.

📚 Sumário

• 🚀 Como Rodar
  • 📦 Requisitos
  • 🛠️ Caminho Fácil
  • 💻 Emulador
• ✨ Funcionalidades
• ⚙️ Decisões Técnicas
• 🚧 Melhorias
• 👏 Créditos

🚀 Como Rodar

📦 Requisitos

• Node v20.13.1
• Yarn v1.22.21
• Windows, Linux(WSL pode encontrar problemas)

Para rodar o projeto, primeiro clone este repositório:

git clone https://github.com/GabrielTrindadeC/todo-native.git

🛠️ Caminho Fácil

Com o projeto clonado, dentro da pasta raiz do projeto, siga os seguintes passos:

1. Instalar as dependências: yarn install
2. Iniciar o aplicativo: yarn start
3. Caso seja a primeira vez que você roda o projeto sera necessário a instalação do NGROK, a linha de comando vai te pedir para instalar

A forma mais fácil de rodar o projeto é instalando o Expo Go no seu dispositivo móvel e escaneando o QR Code que vai aparecer no seu terminal(tanto o computador quanto o dispositivo móvel devem estar na mesma rede):

💻 Emulador

Caso você queira rodar o aplicativo com emulador localmente, vai ser necessário configurações adicionais no seu ambiente de desenvolvimento. Com o emulador funcionando corretamente, siga os seguintes passos:

1. Instalar as dependências: yarn install
2. Iniciar o aplicativo: yarn start
3. Pressione a tecla "A", no terminal, para rodar o projeto no emulador Android

✨ Funcionalidades

• Criar Tarefas

  

• Deletar Tarefas

  

• Editar Tarefas

  

• Marcar/Desmarcar Tarefa como Concluída, filtrar tarefas concluídas ou por data de criação

  

• Tema Claro/Escuro

  

⚙️ Decisões Técnicas

Algumas decisões técnicas foram tomadas para a criação deste aplicativo. Abaixo, explico algumas delas:

• useReducer: Utilizado em estados complexos (como tarefas), pois é mais otimizado para estados que contêm vários sub-valores, evitando re-renderizações desnecessárias.

• useCallback e useMemo: Ambos são capazes de memoizar estados/funções, evitando re-renderizações e recálculo dos valores. Exemplo: filtros das tarefas - caso as tarefas não sejam alteradas, ele não recalcula o filtro, apenas utiliza o estado memoizado do array de tarefas.

  

• Interface para serviço: Optei por utilizar uma interface para o serviço por ser uma boa prática de desacoplamento. Assim caso seja necessário trocar o tipo do serviço, seja passando a usar REST, Firebase ou qualquer outro tipo de serviço, bastaria implementar a interface e alterar o caller da função sem necessidade de conhecer o serviço atual para desenvolver um novo.

• ContextApi: Evitar propdrilling na aplicação e poder disponibilizar os estados de forma global

• customHook: Hook nomeado de useTodos que abstrai a implementação do context, dessa forma facilito a utilização do meu Provider e desacoplo a logica da tarefas dos meus componentes.

• TypeScript: Mantém uma tipagem consistente e segura da aplicação e um melhor uso do IntelliSense do VSCode.

• Expo: Facilita a criação de aplicativos React Native, abstraindo algumas questões de desenvolvimento em React Native puro e facilitando o build e deploy. Atualmente recomendado pela própria equipe do React Native para criação de novas aplicações.

• React Native Elements: Um Design System para React Native, usado para manter a estilização dos componentes consistente.

Decidi utilizar do meu conhecimento técnico para demonstrar até onde vai minhas habilidades de tal forma que o app fosse escalavel caso necessário. Reconheço porem que para solucionar o problema proposto, a aplicação poderia ter uma arquitetura mais simples

🚧 Melhorias

Durante o desenvolvimento, identifiquei algumas áreas com espaço para melhorias:

• Tags de prioridade nas tarefas
• Possibilidade de agrupar tarefas em categorias ou pastas
• Internacionalização da aplicação
• Testes unitários e de integração
• Versão iOS

👏 Créditos

Para desenvolver, usei um layout da comunidade como inspiração:

Figma