Dog Breed é um app desenvolvido em React Native com Expo utilizando TypeScript, para authenticação e visualização de fotos de cães de diferentes raças via API externa.

Telas

Funcionalidades

• Autenticação

O usuário informa um e-mail e se registra. Uma requisição é feita à API. Caso a requisição retorne sucesso, é retornado um objeto com informações do usuário autenticado, incluindo o token que é armazenado no estado da aplicação via Redux.

• Galeria de Fotos

Depois de autenticado, o usuário é redirecionado para uma galeria de fotos com um menu superior em forma de tabs, com a possibilidade de seleção da breed desejada. Tomei a liberdade de criar uma interface que proporcionasse uma melhor experiência de usuário, sendo possível alterar a breed arrastando para o lado ou selecionando a raça desejada no menu superior.

Para a exibição das fotos utilizei um pouco de CSS Grid Layout para melhor disposição das miniaturas na tela. No scroll, para não afetar o desempenho do app, apenas uma quantidade de miniaturas é carregada inicialmente, sendo as demais exibidas à medida que o usuário rolar a listagem para baixo. Na galeria também é possível ampliar qualquer foto listada com um efeito overlay.

• Logout

Optei por utilizar uma forma simples de logout também para uma melhor experiência de usuário na visualização da galeria. Com apenas um botão no canto superior direito é possível acessar a funcionalidade. Sendo acionado, o token é removido do estado da aplicação e o usuário é redirecionado imediatamente para a tela de autenticação novamente.

Tecnologias e impressões

• Redux, Redux Saga e Estado Global

Para este projeto, como um extra, também achei interessante aplicar os conceitos de estado global e Arquitetura Flux com Redux, pois penso que é uma prática que vale muito a pena em projetos escaláveis, permitindo uma visão muito mais ampla da aplicação.

• TypeScript, Tipos e Estruturas

TypeScript também foi uma escolha que fiz por pensar que a prática permite aperfeiçoar cada vez mais. E neste caso, tipos e estruturas de dados de toda a aplicação bem definidos evitou que eu tivesse que lidar com demasiada depuração de código na parte de implementação das funcionalidades.

• React Hooks

Adotei React Hooks nesse projeto, como nos projetos recentes, por acreditar que o código fica muito mais legível com Functional Componentes e porque o próprio Redux possui hooks que podem ser utilizados em sua implementação.

• Jest, Unit e Validação

Utilizei Jest para testes unitários em algumas actions do Redux, além de testes de requisição à API.