README.pt-br.md

Translate English

Ignite Gim

O projeto Ignite Gim foi desenvolvido em React Native e é um aplicativo voltado para fitness que oferece recursos de registro de usuários, rastreamento de exercícios e histórico de execução.

Abaixo, descreverei cada uma das principais telas do aplicativo:

• Tela de Login:

  • Nesta tela, os usuários podem inserir suas credenciais de login, como nome de usuário e senha, para acessar o aplicativo.
  • Se eles ainda não possuem uma conta, há uma opção para se registrar dentro do próprio aplicativo.

• Tela de Registro:

  • Na tela de registro, os usuários podem preencher um formulário com suas informações, como nome, e-mail e senha.
  • Após preencher o formulário, eles podem confirmar o registro e criar uma conta dentro do aplicativo.

• Tela Principal:

  • Após fazer o login com sucesso, os usuários serão direcionados para a tela principal.
  • Nessa tela, eles encontrarão uma lista de exercícios disponíveis para realizar.
  • Cada exercício pode ser selecionado para visualizar as instruções de execução, que podem incluir um vídeo demonstrativo.

• Tela de Histórico de Treino:

  • Nesta tela, os usuários podem acessar o histórico de suas sessões de treino anteriores.
  • Os usuários podem revisitar suas sessões anteriores para acompanhar seu progresso ao longo do tempo.

• Tela de Perfil:

  • A tela de perfil permite que os usuários visualizem e atualizem suas informações pessoais, como nome, foto de perfil e alteração de senha.

Essas telas proporcionam uma experiência abrangente para os usuários do aplicativo Ignite Gim, permitindo que eles façam login, se registrem, realizem exercícios, acompanhem seu progresso e gerenciem suas informações pessoais.

🧭 Índice

• 🧭 Índice
• 🎥 Vídeo de Implementação
• 🎨 Layout
• 👏 Aprendizado e Mais Implementações
• 💡 Tecnologias Utilizadas
  • Mobile
• 📂 Estrutura de Pastas
• 🚀 Executando o Projeto
  • Back-end
  • Mobile
• 🌎 Licença
• ✒ Autor

🎥 Vídeo de Implementação

Project.Ignite.Gym.mp4

🎨 Layout

Layout desenvolvido por: Rodrigo Gonçalves e Millena Kupsinskü Martins

👏 Aprendizado e Mais Implementações

• Aprendi a usar o NativeBase para construir a interface.
• Aprendi a usar o Bottom Navigator.
• Aprendi a buscar imagens da galeria de fotos usando o Expo ImagePicker.
• Aprendi a usar o React Hook Form para controle e validação de formulários usando o Yup.
• Aprendi a criar Contextos e hooks para passar dados para outras telas.
• Aprendi sobre o consumo de APIs com Fetch API e Axios.
• Aprendi sobre Autenticação JWT e como usá-la para recuperar dados.
• Aprendi a fazer upload de imagens para o banco de dados.
• Aprendi sobre tokens de atualização para obter automaticamente um novo token quando ele expira.

💡 Tecnologias Utilizadas

Mobile

• React Native
• Expo
• TypeScript
• NativeBase
• React Navigation - Native Stack and Bottom Tabs
• Axios
• Expo ImagePicker
• Expo FileSystem
• React Hook Form
• Yup
• AsyncStorage

📂 Estrutura de Pastas

mobile
.
├── assets                      # Imagens para o Expo
├── src                         # Arquivos de código-fonte
│   ├── @types                  # Contém todas as definições globais de tipos e interfaces
│   ├── assets                  # Contém os recursos de pacotes JS, como ícones, splash, imagens, etc.
│   ├── components              # Contém todos os componentes React globais
│   ├── contexts                # Contexto da aplicação
│   ├── dtos                    # Modelos de banco de dados
│   ├── hooks                   # Hooks da aplicação
│   ├── routes                  # Contém as rotas da aplicação
│   ├── screens                 # Contém as telas da aplicação
│   ├── services                # Configurações do serviço de API
│   ├── storage                 # Contém a persistência de dados em locais específicos
│   ├── theme                   # Contém o tema da aplicação
│   ├── utils                   # Classes utilitárias para o sistema
.
.
├── App                         # Ponto de entrada do pacote
.

🚀 Executando o Projeto

Back-end

Clone o projeto

  git clone https://github.com/VagnerNerves/ignitegym-rn.git

Acesse o diretório do projeto

  cd ignitegym-rn\server

Instale as dependências

  npm install

Inicie o servidor

  npm run dev

Acesse o arquivo README.md na pasta do servidor para ver outros comandos.

Mobile

Clone o projeto

  git clone https://github.com/VagnerNerves/ignitegym-rn.git

Acesse o diretório do projeto

  cd ignitegym-rn\mobile

Instale as dependências

  npm install

Inicie o servidor

  npx run start

🌎 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

✒ Autor

Vagner Nerves

Feito com amor e ódio 😅, entre em contato!