desafio-always-fit

Este projeto utiliza Vue 3 + Vite para um sistema de gestão fitness.

Principais Bibliotecas Utilizadas

• Vue 3 — Framework principal
• Vite — Bundler e dev server
• Pinia — State management
• Vue Router — Roteamento SPA
• Heroicons — Ícones SVG
• @heroicons/vue — Ícones para Vue
• Vue Toastification — Toasts de feedback
• Vitest — Testes unitários
• @vue/test-utils — Utilitários para testes de componentes Vue
• Tailwind CSS — Utilitário de CSS
• Axios — Requisições HTTP
• ESLint — Linter de código
• TypeScript — Tipagem estática

Fluxo de Uso do Sistema

1. Acesso Inicial

   • Ao acessar o sistema, o usuário é direcionado para a tela de login.
   • Caso não possua uma conta, pode clicar em "Registre-se" para criar um novo cadastro.

   

2. Cadastro

   • O usuário preenche nome, e-mail, senha e confirmação de senha.
   • Após o cadastro, uma mensagem de sucesso é exibida e o usuário pode realizar o login normalmente.

3. Login

   • O usuário informa e-mail e senha cadastrados.
   • Em caso de sucesso, é redirecionado para o dashboard principal.
   • Em caso de erro, um toast de erro é exibido.

4. Dashboard

   • Exibe um resumo dos principais dados: quantidade de treinos, planos nutricionais e logs de progresso.
   • O usuário pode navegar para as áreas de Treinos, Nutrição ou Progresso clicando nos respectivos cards.

   

5. Treinos

   • Visualização dos treinos do dia, separados por categoria.
   • Permite criar, editar, visualizar detalhes e deletar treinos.
   • É possível marcar progresso em cada treino.

   

   • Exemplo de exclusão de treino:

   

6. Nutrição

   • Visualização dos planos nutricionais do dia, separados por tipo de refeição.

   • Permite criar, editar, visualizar detalhes e deletar planos nutricionais.

   • Exemplo de criação de plano nutricional:

   

7. Progresso

   • Exibe o histórico de progresso dos treinos.
   • Permite deletar logs de progresso.

   

8. Autenticação e Segurança

   • O sistema utiliza tokens JWT e refresh token para manter o usuário autenticado.
   • O token é renovado automaticamente a cada mudança de rota, garantindo segurança e persistência da sessão.
   • Ao deslogar, todos os dados sensíveis são removidos do navegador.

9. Feedback ao Usuário

   • Toasts de sucesso e erro são exibidos para todas as principais ações (login, cadastro, criação/edição/deleção de itens).

10. Logout

    • O usuário pode sair do sistema a qualquer momento pelo botão "Sair" no topo da tela.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint