- portfolio
- public
- src
- my_projects
- longLife
- aiudo-formacion
- barbertime
- habitcore
HabitCore
Aplicación web progresiva (PWA) para crear y seguir hábitos diarios. Permite definir hábitos personalizados, registrar su cumplimiento cada día, organizarlos por categorías y consultar estadísticas de progreso. Instalable en móvil y escritorio, con recordatorios mediante notificaciones push.
Funcionalidades Principales
Seguimiento Diario
Registra el cumplimiento de cada hábito día a día con un simple toque.
Categorías Personalizadas
Organiza tus hábitos en categorías para mantenerlos ordenados y localizables.
Estadísticas de Progreso
Visualiza rachas, porcentajes de cumplimiento y evolución a lo largo del tiempo.
Recordatorios Push
Notificaciones push para recordarte cuándo completar tus hábitos, incluso con la app cerrada.
PWA Instalable
Instálala como app nativa en tu móvil o escritorio sin pasar por ninguna tienda de aplicaciones.
Configuración Flexible
Personaliza frecuencias, horarios de recordatorio y preferencias de cada hábito.
Stack Tecnológico
Tecnologías utilizadas en el desarrollo de HabitCore
Frontend
Vue 3
UI FrameworkFramework progresivo de JavaScript con Composition API para construir interfaces reactivas, fluidas y orientadas a componentes reutilizables.
TypeScript
Lenguaje BaseTipado estático para mayor robustez del código, mejor autocompletado y detección temprana de errores en tiempo de desarrollo.
Tailwind CSS
EstilosFramework de utilidades CSS para crear interfaces modernas y totalmente responsive de forma rápida y consistente.
Backend
Laravel
Framework PHPFramework PHP robusto para la API REST. Gestiona autenticación, lógica de negocio, envío de notificaciones push y suscripciones Web Push.
PHP 8+
Lenguaje BackendLenguaje de servidor aprovechando las últimas características: typed properties, match expressions y constructor promotion para un código más limpio.
Base de Datos
MySQL
Base de Datos RelacionalSistema de gestión de bases de datos relacionales para almacenar hábitos, registros diarios, categorías, usuarios y suscripciones push.
Control de Versiones
Git
Control de VersionesGestión del historial de cambios, ramas de desarrollo y flujo de trabajo colaborativo durante todo el proyecto.
GitHub
Repositorio RemotoPlataforma de alojamiento del código con revisión de pull requests, issues y gestión del proyecto.
El Desafío
Retos técnicos y problemáticas resueltas en el desarrollo
Notificaciones Push como PWA
Implementar notificaciones push nativas en una PWA requirió integrar la Web Push API en el frontend y el backend. Los principales retos incluyeron:
- Generación y gestión de claves VAPID en Laravel
- Registro del Service Worker y suscripción al push en Vue
- Persistencia de suscripciones por usuario en base de datos
- Envío de notificaciones programadas según el horario de cada hábito
Experiencia PWA Instalable
Lograr que la aplicación funcionase como una app nativa instalable en cualquier dispositivo supuso configurar correctamente el manifest y el Service Worker:
- Configuración del Web App Manifest con iconos y tema de color
- Estrategia de caché offline con el Service Worker
- Cumplimiento de los criterios de instalabilidad de Chrome y Safari
- Experiencia fluida tanto en móvil como en escritorio
Seguimiento y Estadísticas de Hábitos
Diseñar un modelo de datos eficiente para calcular rachas, porcentajes y evolución histórica sin comprometer el rendimiento:
- Modelo relacional optimizado para consultas de registros diarios
- Cálculo de rachas consecutivas en el backend
- Visualización de progreso con gráficos interactivos en Vue
- Filtrado por categoría y rango de fechas
API RESTful con Laravel
Se desarrolló una API robusta que conecta el frontend Vue con el backend Laravel, implementando autenticación con Laravel Sanctum, validación de requests, manejo de errores consistente y endpoints dedicados para la gestión de hábitos, registros diarios, categorías y suscripciones push.