Coder Social home page Coder Social logo

annaluizacamargo / baymaxvital Goto Github PK

View Code? Open in Web Editor NEW
9.0 2.0 0.0 551 KB

Projeto desenvolvido em React para facilitar a mensuração da dor na pediatria, utilizando como base a Wong–Baker Faces Pain Rating Scale (escala de mensuração da dor) e o personagem da Disney Baymax.

Home Page: https://baymax-vital.vercel.app

HTML 1.42% CSS 43.11% JavaScript 55.48%
baymax css3 disney hospital html5 javascript nursing pain pediatric react-components

baymaxvital's Introduction

🚀 Proposta do Desafio

Bem-vindo(a) ao "BaymaxVital", um projeto que havia pensado muito antes de virar desenvolvedora / enfermeira, e que criou vida a partir do ReactJS, surgindo desta forma o 💻https://baymax-vital.vercel.app/.



🎯 Objetivos

Elaborar um site web responsivo para facilitar a mensuração da dor na pediatria, utilizando como base a Wong–Baker Faces Pain Rating Scale (escala de mensuração da dor) e o personagem da Disney Baymax.

🏩 Motivação

  • Aproximadamente em 2015 quando assisti a animação “Operação Big Hero” da Disney me encantei pelo Baymax, principalmente por ser um personagem cativante e acolhedor, que une a saúde com tecnologia de forma humanizada.
  • Durante a graduação em enfermagem, tive a oportunidade de conhecer e ver a aplicabilidade da Robô Laura, bem como de trabalhar no Hospital Pequeno Príncipe, o que me fizeram despertar meu amor pela pediatria, e, principalmente, pela valorização de um sinal vital tão importante, mas muitas vezes negligenciado, que é a dor.
  • Sendo assim, resolvi unir meu amor pelo cuidado e pela tecnologia, e desenvolvi o BaymaxVital, uma forma visual de avaliar a dor na pediatria de forma lúdica, utilizando a “Wong–Baker Faces Pain Rating Scale".

🎨 Design

Todos os desenhos do Baymax, bem como o design, foram feitos por mim utilizando o Figma, e caso queira saber um pouquinho mais do processo de elaboração e criação, fiz um breve benchmarking, elenquei possíveis referências e ideias de layout, escolhi as cores que possuíssem acessibilidade visual, e todo esse trajeto até chegar neste resultado final é possível visualizar no meu repositório do Figma.

🩺 Aplicabilidade

  • Dentro do ambiente hospitalar a aferição dos Sinais Vitais dos Pacientes sempre está presente, sendo eles = pressão arterial, frequência cardíaca, frequência respiratória, temperatura e a dor. Entretanto, este último é um sinal pessoal e subjetivo, de difícil mensuração, sendo afetado por diversos fatores levando em consideração a complexidade das dimensões humanas.
  • Sendo assim, a ideia deste projeto é facilitar a interpretação da dor tendo como público alvo crianças com idade de 3 anos ou mais.
  • Nele, além de avaliar a dor de 0 (ausência de dor) até 10 (pior dor possível), o profissional (seja médico ou da equipe de enfermagem) que esteja aplicando a escala poderá deixar um áudio registrado do motivo que ocasionou determinado score na criança (podendo ser gravado pela própria criança ou pela fala do profissional), bem como o que pode ser melhorado para a mesma se sentir melhor, tornando este momento algo lúdico e humanizado.
  • E, bom, falar de saúde é também falar de inclusão, sendo assim o projeto teve como base alternância de cores no Slider, bem como representação visual de face por Emojis, com um personagem fofo e acolhedor e cores claras e coloridas.
  • É válido destacar que, para um melhor uso nos casos de restrições, o profissional que esteja aplicando a escala pode promover outros meios de avaliação, como pedindo para a criança demonstrar com expressões faciais a dor; pedir para apontar o que está incomodando; dentre outras ações, sempre envolvendo o familiar no cuidado.

🧠 Dificuldades e o que aprendi

Tive a oportunidade de consolidar alguns conceitos de =

  • JavaScript (arrow function, return e LocalStorage).
  • CSS (referenciar classes e passar estilos como props de pai para filho).
  • ReactJS (routes; utilização dos Hook’s; criação de componentes; referenciar função, definindo a função no componente pai para ser executada no componente filho).

Meu maior aprendizado neste projeto foi referente a utilização do Router, bem como adaptar componentes prontos para a minha necessidade, lendo bastante a documentação e navegando dentro dos arquivos utilizando a tecla de atalho "Ctrl + clique".

🔮 Alterações futuras

  • Atualmente estou estudando MySQL e, futuramente, Python, sendo assim em breve a primeira tela (formulário para acesso a escala de avaliação da dor) estará vinculada ao banco de dados hospitalar, realizando preenchimento automático de certos dados.
  • O BaymaxVital é uma ramificação de um projeto em desenvolvimento de um sistema hospitalar.

🔧 Tecnologias utilizadas

ReactJS • JavaScript • HTML • CSS • Figma • Git


💻 Rodando o projeto

Observação: os testes referente ao layout e responsividade foram realizadas somente utilizando o Google Chrome, Android e Iphone.

2023-02-15.13-57-55_Trim.mp4



🌺 Forma de contato




baymaxvital's People

Contributors

annaluizacamargo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.