williamjayjay/innovatec-mobile-rework

Este aplicativo tem como principais funcionalidades a busca de dados de estudantes a partir de uma API externa, o armazenamento dessas informações no storage, a exibição em uma lista com scroll infinito, a apresentação dos detalhes de cada aluno em um modal dinâmico, e a possibilidade de alterar o gênero do estudante em um modal separado.

Projeto - Lista de estudantes

Este aplicativo tem como principais funcionalidades a busca de dados de estudantes a partir de uma API externa, o armazenamento dessas informações no storage, a exibição em uma lista com scroll infinito, a apresentação dos detalhes de cada aluno em um modal dinâmico, e a possibilidade de alterar o gênero do estudante em um modal separado.

🥶 Sobre o projeto

Desenvolvi esse projeto para uma das etapas do teste para a C2S.

Mobile React Native:

Aplicativo: O app irá buscar e exibir dados de pessoas ao redor do mundo, mas classificaremos como alunos.

🚀 Tecnologias

Principais tecnologias que utilizei para desenvolver esta aplicação

• Typescript
• Async-Storage
• React-Navigation
• Expo-Font
• NativeWind
• TailwindCSS
• Zod
• Axios
• React-Native-Toast-Message
• React-Native-SVG
• Tanstack Query
• Classnames
• Date FNS
• React-Native-Reanimated
• React Content Loader
• React-Native-Safe-Area-Context
• FakerJS
• Testing Library React Hooks
• Jest Native
• Jest Expo
• Jest
• Jest Fech Mock
• Testing Library Jest Native

Detalhe CI CD

No arquivo ci_cd.yml observe o alias para a criar a secret no github que irá conter o token expo para assim podermos criar um fluxo de automação CI CD que irá executar o build da aplicação, rodar os testes unitários e por fim gerar o apk do aplicativo android no caso.

Testes unitários

Para rodar os testes basta iniciar o comando:

bun run test

Guia de inicialização

Para instalar e configurar uma cópia local, siga estas etapas simples:

Prerequisitos

Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:

1. Clone o repositório:

git clone https://github.com/williamjayjay/innovatec-mobile-rework

2. Navegue na raiz do projeto innovatec-mobile-rework:

3. Instale os módulos:

bun i

4. Copie o .env de exemplo:

5. Rode o aplicativo:

bun android

Roadmap

• Iniciar o aplicativo, entrar na tela de login

• Na tela de login conseguir navegar para a tela home via tela de login

• Caso não haja alunos no storage, deve buscar dados da API.

• Caso haja alunos no storage, deve exibir esses últimos 10 dados e não buscar nada na API ainda.

• Conseguir fazer "push refresh" ao puxar para baixo a lista e assim conseguir atualizar os alunos que estão sendo buscados da API.

• Conseguir buscar mais alunos atráves do "scroll infinity" na flatlist.

• Conseguir visualizar mais informações do aluno ao clicar no componente do mesmo.

• Conseguir alterar o filtro de alunos por gênero.

• Conseguir buscar alunos pelo filtro de pesquisa.

UI UX

UI e UX feita pelo time C2S.

Tela de login	Tela Home

Modal de filtros	Barra de Pesquisa

Shimmer Effect	Modal de perfil

Scroll Infinity