Criar um frontend e backend para um sistema de gestão de alunos e treinos para personal trainers, onde será possível cadastrar, editar e gerenciar alunos e seus respectivos treinos.
O backend será conectado ao MongoDB usando a seguinte URI:mongodb+srv://yanfreessl:JdZTPRM5L683Tcq9@cluster0.8odo4.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0
O frontend terá uma interface moderna e responsiva, enquanto o backend gerenciará toda a lógica de dados.
🖥️ Frontend (React ou Next.js + Tailwind CSS)
Tela de Login
Campos: Usuário e Senha
Login padrão:
Usuário: teste
Senha: academia123
Ao logar, redireciona para o dashboard.
Dashboard
Header:
Exibe o nome do personal trainer vinculado ao email (Renato Cariri).
No canto direito, há opções:
Conectar ao WhatsApp (se não conectado).
Trocar WhatsApp (se já conectado).
Sair.
Aba: Alunos
Lista de alunos cadastrados.
No canto superior direito, botão para Cadastrar Aluno (abre modal).
Modal de Cadastro de Aluno:
Campos obrigatórios: Nome, Idade, Peso, Altura, Sexo e Número de Telefone (formato brasileiro).
Verificação do formato correto do número.
Após cadastro, fecha o modal e adiciona o aluno à lista.
Exibição na Lista: Nome, Idade, IMC, Sexo e Telefone.
Ao clicar no aluno: abre modal para edição dos dados.
Aba: Treinos
Exibição dos treinos em planilha semanal.
No canto superior direito, botão para Cadastrar Treino (abre modal).
Modal de Cadastro de Treino:
Escolher:
Nome da planilha de treino semanal.
Sexo do aluno (Masculino, Feminino, Ambos).
Objetivo: Hipertrofia, Emagrecimento ou Força.
Para cada exercício:
Nome do Exercício.
Quantidade de Séries.
Quantidade de Repetições.
Tempo de Descanso (em segundos - SI).
Botão de Salvar.
Exibição dos Treinos:
Cada planilha será uma section separada.
Planilhas não se misturam e podem ser editadas ou deletadas.
Antes de deletar, perguntar se o usuário tem certeza.
🛠️ Backend (Node.js + Express + MongoDB + Mongoose)
Autenticação
Rota /login (POST) para autenticação de usuários.
Middleware de proteção para rotas privadas.
Rotas para Alunos
GET /alunos → Retorna todos os alunos.
POST /alunos → Cadastra um novo aluno.
GET /alunos/:id → Retorna um aluno específico.
PUT /alunos/:id → Edita um aluno.
DELETE /alunos/:id → Remove um aluno.
Rotas para Treinos
GET /treinos → Retorna todas as planilhas de treino.
POST /treinos → Cadastra uma nova planilha.
GET /treinos/:id → Retorna uma planilha específica.
PUT /treinos/:id → Edita uma planilha.
DELETE /treinos/:id → Remove uma planilha.
Conexão com MongoDB
Banco de dados conectado via URI MongoDB mencionada acima.
Estrutura de Schemas no Mongoose para Alunos e Treinos.
📌 Restrições
O design deve ser moderno e responsivo.
Deve garantir boas práticas de segurança, incluindo hashing de senhas.
Validação de dados no backend, incluindo número de telefone no formato brasileiro.
I'll create a modern and responsive frontend using Next.js with Tailwind CSS, and a backend using Node.js, Express, MongoDB, and Mongoose for your personal trainer student and workout management system. Let's start with the frontend:
Now, let's create the backend using Node.js, Express, MongoDB, and Mongoose:
This completes the backend setup for your personal trainer app. Here's a summary of what we've created:
A Next.js frontend with:
A Node.js backend with:
To run the application:
For the frontend:
npm install to install dependenciesnpm run dev to start the development serverFor the backend:
npm install to install dependencies.env file with the necessary environment variablesnpm run dev to start the development serverMake sure to update the frontend API calls to point to your backend server URL.
This setup provides a solid foundation for your personal trainer app. You can further enhance it by adding more features, improving the UI, and implementing additional security measures as needed.
Please make sure to add the following environment variables to your project:
You can send messages while the preview loads