O Garcia Exercises é uma plataforma que visa facilitar o gerenciamento de exercícios e locais para atividades físicas. Com o objetivo de criar uma versão inicial funcional da aplicação, foi desenvolvido o MVP do Front-End utilizando a biblioteca React.
-
React: Biblioteca JavaScript de código aberto para construir interfaces de usuário, utilizada para desenvolver a aplicação Front-End do Garcia Exercises.
-
JSON Server: Ferramenta para criar uma API REST fake a partir de um arquivo JSON, utilizada para simular um servidor e fornecer os dados necessários para a aplicação durante o desenvolvimento.
-
ViaCep API: API pública para consulta de CEP, utilizada para obter informações de endereço a partir do CEP fornecido pelos usuários durante o cadastro de locais de exercícios.
-
Nominatim API: API de geocodificação gratuita e aberta, utilizada para converter endereços em coordenadas geográficas (latitude e longitude) para exibição no mapa interativo da aplicação.
-
Cadastro de Locais de Exercícios: Os usuários podem cadastrar novos locais de exercícios, fornecendo informações como nome do local, endereço, descrição e tipo de exercício disponível.
-
Visualização de Locais Próximos: Os usuários podem visualizar os locais de exercícios próximos em um mapa interativo ou em uma lista, facilitando a busca por opções de atividades físicas na região.
-
Detalhes do Local de Exercício: Ao selecionar um local na lista ou no mapa, os usuários podem visualizar informações detalhadas sobre os exercícios disponíveis, como horários de funcionamento, avaliações de outros usuários e fotos do local.
-
Registro de Atividades: Os usuários podem registrar suas próprias contribuições para o sistema, como adicionar novos locais de exercícios, avaliar locais existentes e adicionar comentários e fotos.
O aplicativo utiliza a API de Contexto do React para gerenciar o estado global da aplicação. Os principais provedores de contexto são:
- ThemeProvider: Fornece o tema global para a aplicação.
- AuthContextProvider: Gerencia a autenticação do usuário.
- LocationContextProvider: Gerencia o estado das localizações na aplicação.
- LoginContextProvider: Gerencia o estado do login do usuário.
- ToastContainer: Componente para exibir mensagens de toast na aplicação.
O roteamento é gerenciado pela biblioteca createBrowserRouter
, que oferece uma maneira fácil de definir rotas e renderizar componentes correspondentes. As rotas principais são:
- /login: Rota para a página de login.
- /: Rota padrão para a página inicial.
- /location-list: Rota para exibir a lista de localizações.
- /location-list/:id: Rota para exibir detalhes de uma localização específica (necessita autenticação).
- /register-locations: Rota para registrar novas localizações (necessita autenticação).
- /register-locations/:id: Rota para editar uma localização existente (necessita autenticação).
- /config-user/:id: Rota para configurar o perfil do usuário (necessita autenticação).
- Autenticação de Usuário: Os usuários podem fazer login para acessar funcionalidades restritas.
- Registro e Edição de Localizações: Os usuários autenticados podem registrar e editar informações de localizações.
- Configuração de Perfil: Os usuários autenticados podem configurar seu perfil, como nome, e-mail, senha, etc.
- Gerenciamento de Estado: O estado global da aplicação é gerenciado de forma eficiente usando a API de Contexto do React.
- Roteamento Protegido: Algumas rotas só estão acessíveis para usuários autenticados.
- node_modules/...
- public/...
- src/
- /assets/...
- /components/...
- /contexts/...
- /helpers/...
- /hooks/...
- /layout/...
- /pages/...
- /routes/...
- /server/...
- /services/...
- AllProvider.jsx
- GlobalStyles.js
- main.jsx
- Themes.js
- .eslintrc.cjs
- .gitignore
- index.html
- package-lock.json
- package.json
- README.md
- vite.config.js
Clone o projeto
git clone https://github.com/glautonOsorio/Garcia-Exercises.git
Entre no diretório do projeto
cd Garcia-Exercises
Instale as dependências
npm install ou npm i
Inicie a aplicação
npm run start
Inicie o json-server
npm run json
-
Melhoria da Responsividade: Reforçar a adaptação da aplicação a diferentes tamanhos de tela, aprimorando as media queries e garantindo uma experiência consistente em dispositivos móveis e desktops.
-
Aprimoramento do Design da Página Principal: Investir em um design mais atraente e intuitivo para a página inicial, utilizando técnicas de design visual, como paletas de cores harmoniosas, tipografia adequada e layout bem estruturado.
-
Componentização Avançada: Componentizar ainda mais partes do código para promover a reutilização e a manutenção, reduzindo a duplicação de código e facilitando a escalabilidade do projeto.
-
Integração com API e Banco de Dados: Substituir o uso do JSON Server por uma API e banco de dados reais, proporcionando uma experiência mais próxima do ambiente de produção e permitindo a persistência de dados de forma mais robusta e escalável.
-Autor Glauton Osório -Gato do Autor Uni
-Professor Bruno Costa