Vamos construir um aplicativo ao qual a principal feature é proteger dados em tela com refresh token assim mantendo a camada de segurança mais estável na aplicação, contudo também teremos formulário para login, cadastro e alteração de senha assim como foto de perfil também, e por fim utilizaremos bastante don context api.
Desenvolvi esse projeto para reforçar meu conhecimento principalmente com login e registro autenticado e rotas protegidas por token de sessão e refresh token e também context api
Aplicativo: O app irá registrar os treinos feitos em um ambiente de academia.
Principais tecnologias que utilizei para desenvolver esta aplicação
- Typescript
- Async-Storage
- React-Navigation
- Expo-File-System
- Expo-Font
- Expo-Image-Picker
- Native-Base
- React-Hook-Form
- React-Native-Safe-Area-Context
- React-Native-Toast-Message
- React-Native-SVG
- Yup
Para instalar e configurar uma cópia local, siga estas etapas simples:
Para garantir o funcionamento adequado da nossa aplicação, verifique abaixo:
-
Clone o repositório de terceiros que contém a api pronta para poder testar o app: Neste link: API-Terceiros
-
Clone o repositório:
git clone https://github.com/williamjayjay/appTrainerGym
-
Navegue na raiz do projeto appTrainerGym:
-
Instale os módulos:
bun i
-
Copie o .env de exemplo:
-
Rode o aplicativo:
bun android
-
Iniciar o aplicativo, conseguir fazer cadastro e login
-
No cadastro seguir as regras de email e senha(6 digitos) e senhas iguais.
-
No login fazer validação
-
Conseguir visualizar os treinos a serem marcados
-
Conseguir finalizar um treino
-
Conseguir ver treino finalizado na aba de histórico
-
Conseguir alterar foto de perfil
-
Conseguir alterar senha
-
Ser feita a validação do refresh token baseado no tempo de expiração da api a seguir
UI e UX feita pelo time de design do treinamento do curso da rocketseat.
-Link para vídeo da aplicação Video-React-Native
Tela de login | Tela de cadastro |
---|---|
Tela de home | Tela de treinos |
---|---|
Tela de histórico | Tela de perfil |
---|---|