Expo Node React Native TypeScript

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

• 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

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): QR Code

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

• Criar Tarefas

  Criar

• Deletar Tarefas

  Deletar

• Editar Tarefas

  Editar

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

  Marcar

• Tema Claro/Escuro

  Tema

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

  code

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

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

• 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

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

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

Figma