🩸MiPresión

• Registro de presión sanguínea

---

🚀 Sitio Web

https://jonatandb.dev.ar/MiPresion/

---

👩🏻‍💻 Tecnologías usadas

• React
• Vite
• TypeScript
• CSS Modules

---

Ejecutar localmente

Clonar el proyecto

  git clone https://github.com/Jonatandb/MiPresion

Ir al directorio del proyecto

  cd MiPresion

Instalar dependencias

  pnpm install

Crear el archivo .env.development usando .env.example.

Iniciar el servidor

  pnpm run dev

Visitar:

• http://localhost:5173

---

Generación de versión productiva para Github Pages

Crear el archivo .env usando .env.example.

Ejecutar

  npm run build

O bien build-dev para verificar el build:

  npm run build-dev

• Requiere el archivo .env.development

---

🧭 Roadmap

🏁 Posibles agregados:

• Agregar calendario que indique en que fechas se registraron mediciones
• Agregar tablero con estadísticas
• Que desde Ajustes se pueda especificar el país de origen y que la tabla de niveles (y los niveles mostrados en los registros) se muestre de acuerdo a dicho país.
  • Agregar posibilidad de personalizar valores de la tabla de niveles
• Agregar opción de exportar reporte a archivo de Excel
• Agregar opción de "Modo Daltónico"
• Agregar opción para cambiar de idioma entre inglés y español (y potencialmente portugués y francés)

📝 Pendientes:

• Ajustes:

  • Agregar opción "Exportar/Importar los datos" (json), para importar todo desde otro navegador o dominio
  • Agregar sección “Otros de mis proyectos” con proyectos como 🔑LoginsAdmin y 💸MisDeudas (próximamente), clickeables (con su propia URL), con info de tales proyectos.

• Reporte PDF:

  • Agregar sección que permita elegir qué columnas tendrá el reporte (Pulso, Medicina, Postura, Ubicación del medidor, Notas), por defecto: Pulso, Medicina y Notas.

• A considerar:

  • Agregar validación que avise si hay cambios sin guardar y se está intentando cambiar de pantalla (o cerrar el modal)
  • Agregar checkbox "Promediar con segunda medición", que permita ingresar valores de una segunda medición y finalmente guarde el valor de sistólica, diastólica y pulso promediados.
  • Hacer versión responsive para que en desktop aproveche todo el ancho de la pantalla
  • Investigar alguna forma de lograr que el usuario vuelva un hábito registrar las mediciones (para que no se olvide).
    • Podría investiagr sobre ServiceWorkers para enviar una notificación/recordatorio o permitir configurar un envío de email diario de varias veces al día "recordando" tomarse la presión y registrar la medición.

• Refactors:

  • Hacer que la categoría a la que corresponde una medición sea un campo de la misma y no sea recalculada en cada renderizado sino en cada modificación
  • Crear un contexto para guardar todos los ajustes (Facilitará exportación a JSON)
  • Reemplazar formulario de agregar medición con uno de Formik (o React Hook Form) con Yup para validaciones
  • Reemplazar alerts con React-toastify
  • Agregar React-Modal o similar para reemplazar los confirm

👷🏻‍♂️ Trabajando:

✅ Completado:

• Se mejoran validaciones para detectar "valores fuera de rango"

• Se agrega validación para evitar ingresar diastólica menor a sistólica

• Agregar React-share para permitir compartir el sitio en redes sociales

• Agregado de tabindex y outline para navegación por teclado

• Solucionado: 🐛 Verificar por qué cuando clickeo los botones de cancelar y actualizar en el modal de agregar, el click parece que se "va al fondo" y se selecciona el 2do registro de la lista...(o algo similar)

• Se agrego posibibilidad de registrar postura y ubicación del medidor

• Se corrige el detalle de que "mmHg" va todo junto

• Se agrega texto "Pulso" sobre el texto "BPM"

• Agregado de React-helmet para mejorar SEO

• Agregado de columna "Arritmia" al reporte PDF

• Agregado posibilidad de generar el reporte PDF especificando rango de fechas

• Agregado de ícono para exportar a PDF en el header. Y en la pantalla de exportar a PDF agregado de un mensaje que avisa si no hay mediciones e invita a crear una.

• Agregado al componente Shortcuts sección que lleva a ayuda sobre la arritmia

• Eliminado del componente Shortcuts opción que llevaba al formulario de contacto

• Se pasaron todas las medidas en px a rem para poder hacer zoom y que todo se vea proporcionalmente más grande correctamente

• Agregada posibilidad de registar Arritmia (Latido irregular) (Checkbox)

• Reemplazar px por rem en todos los CSS

• Agregar al reporte el promedio de presión sistólica/diastólica/pulso para el rango de fechas actual.

• Agregado de 404.html y configuración de Vite para que lo copie a la carpeta build, para ver si cuando refrescan la pagina estando en una ruta simulada por React Router (ej: /MiPresion/help) en lugar de obtener un error el usuario es redirigido a la home

• Agregado de sección con changelog al final del modal de ayuda

• Agregar opción de exportar por rango de fechas

• Pasar a svg todos los íconos

• Agregado de validación que elimina valores de sistólica, diastólica y pulso cuando el ingreso es incorrecto (no númerico, menor a cero o mayor a 500)

• Agregar sección "¿Dónde se guardan mis datos?" -> Navegador

• Agregar debajo de "Agregar una medición", componente de "Accesos Directos" con "¿Cómo me tomo la presión?", "¿Sugerencias? ¿Errores?" (y otras opciones útiles)

• Cuando se quita el foco de "Sistólica" y/o "Diastólica", validar (si hay datos en ambos campos) y mostrar una leyenda con "Valores fuera de rango (¿Qué significa?)" (clickeable) que muestre la sección "¿Que significa "Valores fuera de rango"?

• Agregar ícono de advertencia junto al mensaje "Valores fuerda de rango" en las mediciones de LogsList

• Agregar ícono "Ayuda" en el header

  • Ítems: "¿Cómo me tomo la presión?", "¿"Valores fuera de rango"?", "Tabla de niveles de presión"

• Reemplazar "Datos incorrectos" por "Valores fuera de rango" y un ícono de advertencia ⚠

• Agregar confirmación visual luego de que el reporte PDF haya sido generado y esté listo para descargar

• Agregar "¿Dudas?" al texto del botón del formulario de contacto -> "¿Dudas? ¿Sugerencias? ¿Errores? 🙈"

• Hacer que cada sección (modal) tenga su propia url

• 🐛 Solucionar falta de color de texto seleccionado

• Agregar About y Donate al final del Settings

• Reemplazar subtítulo "SOBRE MÍ" por "CONTACTO"

• Reemplazar "Contacto & Errores" por "¿Errores? ¿Sugerencias?"

• Reemplazar "Agregar Registro" por "Agregar Medición"

• Reemplazar "Nuevo registro" con "Agregar una medición"

• Reemplazar "Aún no se agregaron registros" con "Aún no se agregaron mediciones"

• Ampliar area de clickeo del "buttonContainer" en NoLogsMessage para incluír el botón y el texto "Agregar una medición"

• Reemplazar el placeholder "Hola Jonatandb! te escribo para decirte..." por "Hola! me gustaría comentar que..."

• Cuando se le da el foco a un input autoseleccionar todo el contenido (si tiene alguno)

• Agrupar listado por fecha

• Usar date-fns en todo lugar que muestre una fecha

• Corregir/evitar que al abrir los modales se re-descargue el logo

• Hacer sección "Exportar a PDF"

• Quitar emojis junto al título de donaciones

• 🐛 Solucionar que al hacer click al lado del botón + flotante, en se abre el modal de Agregar registro

• Que el texto del botón Agregar/Actualizar sea negro (en dark mode: blanco)

• 🐛 Corregir ordenamiento de los logs (Causa: las fechas no tienen los segundos!!)

• Agregar el logo y nombre de la app al modal de Ajustes y agregar el número de versión

• Crear "BloodPressureLevelsModal.tsx" (y llamarlo desde Settings), meter dentro el contenido de "BloodPressureLevels" (sin el container y el header) para poder luego meter "BloodPressureLevels" debajo del textarea de notas en AddEditLog

• Hacer formulario de contacto con envío de mails utilizando EmailJS

• Optimización de imágenes y creación de archivos "fuente" PSD

• Agregar color de fondo al hover sobre los medios de contacto en About

• Agregar screenshots

• Poner nombre: MiPresión (Actualizar header)

• Agregar posibilidad de borrar todos los registros

• Hacer sección "Errores y Contacto" con opciones de donación

• Corregir estilo de íconos en Settings para que tengan el mismo ancho

• Implementar CSS Modules en Log y Header, ToggleTheme, SettingIcon, Logo

• Usar variables CSS en todos los CSS

• Corregir colores de dark mode

• Implementar CSS Modules en Log y Header, ToggleTheme, SettingIcon, Logo

• Actualizar imports relativos con imports de ruta con @ en Settings

• Hacer refactor para mejorar código en App.tsx con respecto a lógica de modales

• Hacer mensaje para cuando no se crearon registros

  • Eliminar mock data y su dependencia

• Hacer versión responsive

• Hacer sección "Ajustes"

• Corregir problema con el botón de agregar, que en cualquier otra resolución se va muy a la derecha y abajo

• Hacer sección "Niveles de presión arterial"

• Corregir problema con scroll luego de agregar o editar un registro, la lista de logs queda scrolleada

• Corregir hora por defecto al crear un log, aparece desfazada 3 horas por lo menos

• Hacer sección "Agregar"

• Hacer sección "Editar"

• Agregar configuración para importaciones absolutas "@/components/myComponent"

• Íconos de píldora y lápiz con bordes negros para el tema light

• Contexto para el tema

• Div que envuelva a los íconos de píldora y lápiz, junto con los datos del pulso, para que los íconos queden siempre pegados a la derecha

• Guardado de datos en localStorage

• Usar Vite: npm create vite

---

🛠 Herramientas y recursos utilizados:

• SVG Repo
• React-PDF
• EmailJS
• Conversor de PX a REM
• Photopea
• Flaticon
• Canva
• Free Online PNG to SVG Converter | Adobe Express

---

Autor

• Jonatandb - @jonatandb