rodrigopieritz / M3P-FrontEnd-Squad1

Projeto Avaliativo Módulo 3 - FloripaMaisTec

SYSTEM CARE

Este é um projeto Express para uma aplicação do sistema hospitalar SYSTEM CARE, que gerencia o cadastro de pacientes, médicos, enfermeiros e o registro de consultas, exames, dietas, exercícios e medicamentos.

🎯 Contexto

A SYSTEM CARE, líder no setor de tecnologia para gestão hospitalar, recebeu um aporte financeiro para aprimorar seu principal produto, tornando-o disponível em postos de saúde e clínicas particulares em todo o país.

O objetivo desta aplicação é criação do frontend para:

• Registrar e gerenciar médicos, enfermeiros e pacientes.
• Registrar atendimentos médicos, incluindo consultas e exames.
• Registrar atendimentos de enfermeiros, incluindo dietas, exercícios e medicamentos.
• White-label para adequar-se a identidade visual de cada cliente.

Este projeto também possui um repositório Backend, criando um sistema completo.

A aplicação foi desenvolvida como projeto de conclusão do Módulo 3 do Curso de Capacitação Dev FullStack oferecido pelo Lab365 / Senai - SC.

⚙️ Funcionalidades

A interface WEB disponibilizada, compreende as funcionalidade relativa a:

• Login e autenticação.
• Estatísticas e cartões informativos
• Usuário: Leitura edição e cadastros via formulário.
• Pacientes: Leitura edição e cadastros via formulário.
• Consultas: Leitura edição e cadastros via formulário.
• Exames: Leitura edição e cadastros via formulário.
• Prontuários: Leitura edição e cadastros via formulário.
• Exercícios: Leitura edição e cadastros via formulário.
• Dietas: Leitura edição e cadastros via formulário.
• Medicamentos: Leitura edição e cadastros via formulário.
• Personalização do ambiente

Abaixo algumas imagens do sistema:

🛠️ Tecnologias Utilizadas

Principais tecnologias

• Ecma Script/ Java Script
• React v18.x
• Vite

Bibliotecas de React.js:

Dependências:

• Ant Design: Biblioteca de componentes de interface de usuário para React.
• node-fetch: Uma implementação do navegador da API Fetch para Node.js.
• prop-types: Pacote para documentar e validar tipos de propriedades em componentes React.
• React: Biblioteca principal do React.
• React DOM: Biblioteca para manipulação do DOM em aplicações React.
• React Hook Form: Biblioteca para gerenciamento e validação de formulários em React.
• React Icons: Biblioteca com uma coleção de ícones para uso em aplicações React.
• React Router DOM: Pacote para gerenciamento de rotas em aplicações React.
• Styled Components: Biblioteca para estilização de componentes React com CSS-in-JS.
• Yup: Biblioteca para criação de esquemas de validação em JavaScript.

Dependências de Desenvolvimento:

• @types/react: Tipos TypeScript para o React.
• @types/react-dom: Tipos TypeScript para o React DOM.
• @vitejs/plugin-react: Plugin Vite para suporte ao React.
• Concurrently: Ferramenta para executar comandos em paralelo.
• ESLint: Linter de código JavaScript.
• ESLint Plugin React: Plugin do ESLint para regras relacionadas ao React.
• ESLint Plugin React Hooks: Plugin do ESLint para regras de hooks do React.
• ESLint Plugin React Refresh: Plugin do ESLint para suporte ao React Refresh.
• Vite: Servidor de desenvolvimento Vite.

Variáveis de Ambiente:

Para executar o projeto, renomeie o arquivo .env.local.example para .env.local e configure as variáveis conforme necessário.

💻 Rodando localmente

É interessante que tenha Git ou outro software de controle de versionamento instalado em seu equipamento, assim como um editor de código como o VSCode.

Antes de iniciar a aplicação, execute a parte do projeto correspondente ao back-end. Esse é um passo importante para o bom funcionamento da aplicação.

Siga os passos abaixo para iniciar o projeto em modo de desenvolvimento:

Clone o projeto

  git clone https://github.com/FullStack-Trindade/M3P-FrontEnd-Squad1.git

Entre no diretório do projeto

  cd my-project

Instale as dependências

  npm i

Inicie o servidor

  npm run dev

As mensagens seguintes devem aparecer após npm run dev :

    VITE v4.4.3

    Local:   http://localhost:5173/

🌲 Estrutura

├───public
│   └───images
└───src
    ├───Assets
    ├───Components
    │   ├───AreaEstatísticas
    │   ├───CardConsulta
    │   ├───CardDieta
    │   ├───CardEstatistica
    │   ├───CardEstatisticaADM
    │   ├───CardExame
    │   ├───CardExercicio
    │   ├───CardMedicalRecord
    │   ├───CardMedicamento
    │   ├───CardPaciente
    │   ├───CardUser
    │   ├───ForgotModal
    │   ├───Form
    │   │   ├───InputComponent
    │   │   └───SelectComponent
    │   ├───FormAppointment
    │   ├───FormDiet
    │   ├───FormExam
    │   ├───FormMedication
    │   ├───FormPaciente
    │   │   └───InputComponent
    │   ├───FormUsuario
    │   │   └───InputComponent
    │   ├───FromExercise
    │   ├───InputPatientSearchAtHome
    │   ├───InputSearch
    │   ├───InputSearchAppointment
    │   ├───InputSearchDiet
    │   ├───InputSearchExam
    │   ├───InputSearchExercise
    │   ├───InputSearchMedicalRecord
    │   ├───InputSearchMedication
    │   ├───InputSearchPaciente
    │   ├───InputSearchProntuario
    │   ├───InputSearchUser
    │   ├───InputUserSearchAtHome
    │   ├───LoginForm
    │   ├───Menu
    │   │   ├───MenuComponent
    │   │   ├───MenuItem
    │   │   └───MenuItemFechado
    │   ├───ResetPasswordForm
    │   ├───SelectComponent
    │   ├───ToolBar
    │   └───UserAddBtn
    ├───Context
    ├───Layout
    ├───Pages
    │   ├───AppointmentRegister
    │   ├───CadastroExame
    │   ├───CadastroExercise
    │   ├───CadastroPaciente
    │   ├───CadastroUsuario
    │   ├───ConfigPage
    │   ├───DietRegister
    │   ├───HomePage
    │   ├───ListaProntuarioPage
    │   ├───LoginPage
    │   ├───MedicalRecords
    │   ├───MedicationPage
    │   ├───Password
    │   └───ProntuarioPacientePage
    ├───Server
    └───Service

✏️ Aprendizados da Equipe

• Criação de Aplicação utilizando RactJs/ Vite
• Validação de formulários e integração a endpoints (backend)
• Lidar com regras de negócios complexas
• Trabalho em equipe
• Gitflow
• Metodologia Ágil de Desenvolvimento na prática!

🚀 Melhorias Futuras

1- Página "Erro 404- Página não encontrada" personalizada.

2- Página de listagem de atendimentos por Médico/ Enfermeiro

3- Pronutário Online

✍🏻 Autores

Feito por 🔥Furious Five🔥 (Squad 1), composto por Beatriz Christie, Daniel Simoni, Gabriel Pacheco, Reinaldo Porto e Rodrigo Pieritz (P.O)🖐🏻

🛠️ Feedback e Suporte

Se você tiver algum feedback ou algo não estiver funcionando, por favor nos deixe saber por meio de [e-mail]

📌 Licença

Este código está sob a Licença MIT, cujo texto pode ser lido em MIT License.