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.
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.
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:
Principais tecnologias
Bibliotecas de React.js:
- 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.
- @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.
É 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/
├───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
- 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!
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
Feito por 🔥Furious Five🔥 (Squad 1), composto por Beatriz Christie, Daniel Simoni, Gabriel Pacheco, Reinaldo Porto e Rodrigo Pieritz (P.O)🖐🏻
Se você tiver algum feedback ou algo não estiver funcionando, por favor nos deixe saber por meio de rodrigo_o_pieritz@estudante.sesisenai.org.br
Este código está sob a Licença MIT, cujo texto pode ser lido em MIT License.