Registro de presión sanguínea

---

👩🏻‍💻 Tecnologías usadas

• React, Vite, TypeScript, CSS Modules

---

💅🏻 Funcionalidad

---

🚀 Sitio Web

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

---

Ejecutar localmente

Clonar el proyecto

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

Ir al directorio del proyecto

  cd MiPresion

Instalar dependencias

  pnpm install

Iniciar el servidor

  pnpm run dev

Visitar:

• http://localhost:5173

---

Generación de versión productiva para Github Pages

  npm run build

O bien build-dev (Establece VITE_ANALYTICS_ENABLED=false), para verificar el build:

  npm run build-dev

---

🧭 Roadmap

🏁 Posibles agregados:

• Agregar opción para cambiar de idioma entre inglés y español

• Agregar calendario

• Agregar tablero con estadísticas

• Agregar posibilidad de modificar valores de los niveles

• Que desde Ajustes se pueda especificar el país de origen y la tabla de niveles se muestre de acuerdo a dicho país, también los niveles mostrados en los registros.

📝 Pendientes:

• Errores:

  • 🐛 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)

• Refactors:

  • Corregir/agregar tabindex para navegación por teclado
  • Crear un contexto para guardar todos los ajustes (dark mode, idioma, país, formato de fecha, valores de la tabla de niveles, etc)

• Ajustes:

  • Agregar opción de "Modo Daltónico"
  • Reemplazar "Activar Tema Oscuro" que cambia a "Activar Tema Claro" con un switch
  • Agregar "Medicina Tomada" con un switch
  • Agregar "Niveles de presión" con un switch
  • Agregar "Notas" con un switch
  • Exportar a PDF:
    • Agregar opción de exportar por rango de fechas
    • Agregar al reporte el promedio de presión máxima, mínima y pulsaciones por minuto
  • Agregar opción "Exportar/Importar todos los datos" (En formato json), para descargar e importar desde otro navegador (Ideal que los ajustes estén en un contexto)

• Home:

  • Agregar opción de filtrado por rango de fechas
  • Posibilidad de registar:
    • Arritmia (Latido irregular) 🖤/❤ (Checkbox)
    • Posición del cuerpo (Menú desplegable: Sentado, Parado, Acostado)
    • Ubicación del medidor (Menú desplegable: brazo izquierdo, brazo derecho, muñeca izquierda, muñeca derecha)
  • Agregar debajo de "Agregar una medición", botones de "Ayuda y Preguntas frecuentes", "¿Cómo me tomo la presión?", "¿Errores? ¿Sugerencias?" (y otras opciones útiles)

• Agregar medición:

  • 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 el modal de "Ayuda y Preguntas frecuentes" (e incluye la sección "¿Que significa "Valores fuera de rango"?")

• Contacto:

  • Agregar sección “Otros de mis proyectos”, con 🔑LoginsAdmin y 💸MisDeudas (próximamente), clickeables (con su propia URL), con info de los proyectos.

👷🏻‍♂️ Trabajando:

• Agregar opción "Ayuda y Preguntas frecuentes"
  • Ítems: "¿Cómo me tomo la presión?", "¿Que significa "Niveles fuera de rango"?", "¿Dónde se guardan mis datos?" -> Navegador (Actualizar al agregar funcionalidad exportar/importar)

✅ Completado:

• 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

• Reemplazar px por rem 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:

• EmailJS
• Conversor de PX a REM
• Photopea
• Flaticon

---

Autor

• Jonatandb - @jonatandb