• Tecnologias
• Layout
• Funcionalidades
• Estrutura de pastas
• Estrutura do banco de dados
• Como executar
• Como contribuir
• Autor
• Licença
O FITLife é um software para gerenciamento de treinos de musculação para professores e instrutores!
Nele, o professor pode cadastrar seus alunos, montar o treino para o aluno de acordo com as suas necessidades, conferir as cargas e repetições anotadas pelo aluno no app mobile e realizar as modificações.
O projeto foi desenvolvido inteiramente em TypeScript, com o objetivo de reforçar os conceitos aprendidos sobre NodeJs e ReactJS, e além disso, desenvolver habilidades utilizando React Native e ainda melhorar a integração entre o front/back.
Tecnologias e ferramentas utilizadas no desenvolvimento do projeto:
Website ( ReactJS + TypeScript )
Mobile ( React Native + TypeScript )
API ( NodeJS + TypeScript )
- Banco de dados: MongoDb
- Protótipo: Figma → Protótipo (FitLife)
- Editor: Visual Studio Code → Extensions: Prettier + EditorConfig
- Fontes: OpenSans
- Versionamento: Git
- Padronização de código: ESLint
O layout da aplicação está disponível no Figma:
Features que estão sendo adicionadas na aplicação
Front-end Web
- Adicionar Modal para criação de treino
- Adicionar Modal para visualizar os dados de treino
- Adicionar busca pelo nome dos alunos no input da home
Front-end Mobile
- Retirar o imagePath dos exercícios
- Modificar o type dos exercises
Back-end
- Estruturar uma forma de linkar o data com o workout
- Definir um retorno por ordem alfabética dos elementos
- Passar propriedade populate para todos os useCases que são necessários
- Excluir o data relacionado ao treino quando excluir o Workout
- Como vou retornar o data com um limite
- Editar resposta de erro quando é solicitado os Exercises de um Muscle, mas ele não possui Exercises
Afim de facilitar a organização e manutenção do código, foi definido um padrão para organização das pastas neste projeto.
Front-end Web
→ _assets: Contém a estilização global, icones, fontes, tema da aplicação, itens de estilo que são reutilizáveis e imagens;
→ components: Todos os componentes globais do projeto;
→ context: Armazena os contextos da aplicação;
→ services: Todos os acessos externos;
→ utils: Funcionalides que são utilizadas em diversos locais da aplicação;
→ types: Todos as interfaces que são utilizadas em diversos locais da aplicação;
→ hooks: Custom hooks;
Todos os componentes criados vão seguir uma mesma estrutura de organização:
→ index.tsx: Responsável por exportar o componente;
→ interface.ts: Responsável por exportar as interfaces;
→ styles.ts: Responsável por toda estilização do componente;
Front-end Mobile
→ _assets: Contém a estilização global, icones, fontes, tema da aplicação, itens de estilo que são reutilizáveis e imagens;
→ components: Todos os componentes globais do projeto;
→ context: Armazena os contextos da aplicação;
→ services: Todos os acessos externos;
→ utils: Funcionalides que são utilizadas em diversos locais da aplicação;
→ hooks: Custom hooks;
→ routes: Armazena as rotas da aplicação;
→ screens: Armazena as páginas da aplicação;
Todos os componentes criados vão seguir uma mesma estrutura de organização:
→ index.tsx: Responsável por exportar o componente;
→ interface.ts: Responsável por exportar as interfaces;
→ styles.ts: Responsável por toda estilização do componente;
Back-end
→ models: Todos os models de Schema para adicionar ao banco de dados;
→ useCases: Armazena todos os casos que são úteis a aplicação. A pasta useCases possui a mesma separação dos models do Schema ;
Este projeto é divido em três partes:
- Backend (pasta api)
- Frontend Web (pasta client)
- Frontend Mobile (pasta app)
💡 O Frontend precisa que o Backend esteja sendo executado para funcionar.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
→ Git;
→ Node.js;
Além disto é bom ter um editor para trabalhar com o código como VSCode;
Para executar o banco de dados MongoDb, foi utilizado a aplicação do MongoDB Community, mas existem outras alternativas como o Docker container
# Clone este repositório
$ git clone https://github.com/vitorrsousaa/FitLife.git
# Vá para a pasta da aplicação Front End
$ cd api
# Instale as dependências
yarn install
# Rode a aplicação
yarn start
# A aplicação será aberta na porta:3001 - acesse http://localhost:3001# Clone este repositório
$ git clone https://github.com/vitorrsousaa/FitLife.git
# Vá para a pasta da aplicação Front End
$ cd client
# Instale as dependências
yarn install
# Rode a aplicação
yarn start
# A aplicação será aberta na porta:5173 - acesse http://localhost:5173# Clone este repositório
$ git clone https://github.com/vitorrsousaa/FitLife.git
# Vá para a pasta da aplicação Front End
$ cd app
# Instale as dependências
yarn install
# Rode a aplicação
yarn start
# A aplicação será visualizado através do [Expo](https://expo.dev/) em um dispositivo físico ou emulador (Android ou iOS)Caso queira contribuir, seja corrigindo bugs, adicionando comentários ou novas features, você pode seguir o seguinte tutorial:
- Faça um fork desse repositório
- Clone o repositório que você fez o fork em seu computador
- Crie uma branch com a sua feature:
git checkout -b minha-alteracao - Envie suas alterações para a staging area:
git add . - Faça um commit contando o que você fez:
git commit -m "feat: minha nova alteracao!" - Faça um push para a sua branch:
git push origin minha-alteracao - Agora é só abrir uma pull request!
Caso tenha alguma dúvida, confira este guia de como contribuir no GitHub :)
Esse projeto está sob a licença MIT. Consulte LICENSE para mais informações.
Linkedin: https://www.linkedin.com/in/vitorr-sousaa/
Desenvolvido por Vitor Sousa 👋🏻🧑