[React x Supabase] Renovando una app de registro de aprendizaje con TypeScript y ChakraUI

Introducción: En este artículo relato la reconstrucción de una aplicación de registro de aprendizaje que desarrollé previamente en React, ahora modernizada con TypeScript y Chakra UI. Además implementé despliegue en Firebase, integración con Supabase para almacenamiento y datos, CI/CD automatizado con GitHub Actions y pruebas automatizadas con Jest y React Testing Library. A lo largo del texto explico la estructura de la app, los retos de desarrollo y las soluciones aplicadas, así como los aprendizajes y mejoras identificadas.

Descripción general de la aplicación: La app permite registrar contenidos de estudio diarios y el tiempo dedicado, calcula automáticamente el total acumulado y ofrece funcionalidades clave como almacenamiento en Supabase, eliminación sincronizada de registros en la nube, indicadores de carga con spinner mientras se recuperan los datos y despliegue continuo en Firebase para disponer de un entorno de producción real donde ejecutar pruebas end to end.

Características principales: registros diarios de aprendizaje con tiempo por sesión, listado y edición de registros, eliminación que sincroniza con Supabase para mantener la consistencia, mostradores de carga y manejo de errores, y despliegue automatizado para facilitar pruebas en entorno productivo. La aplicación fue reescrita en TypeScript, utilizando React Hook Form para la gestión de formularios y Chakra UI para componentes accesibles y consistentes.

Decisiones técnicas relevantes: elegir TypeScript aumentó la seguridad en tiempo de compilación y facilitó el mantenimiento del código. React Hook Form redujo la complejidad de los formularios y mejoró el rendimiento al minimizar renders innecesarios. Chakra UI permitió acelerar el diseño con componentes listos y control del tema global mediante ChakraProvider aplicado a la raíz de la app.

Integración con Supabase y Firebase: Supabase se usó como backend gestionado para la base de datos y el almacenamiento de archivos. Gracias a su consola GUI fue sencillo crear tablas, reglas y conexiones. Firebase se empleó para el hosting y la distribución de la web, permitiendo un rollback rápido y entornos de prueba en producción. El flujo de trabajo incluyó la eliminación de registros en la UI que lanzaba peticiones a Supabase y actualizaba el estado local solo cuando la operación en la nube finalizaba con éxito.

CI/CD y pruebas: configuré GitHub Actions para ejecutar pruebas con Jest y React Testing Library, construir la app y desplegar en Firebase de forma automática ante cada push a ramas seleccionadas. En local añadí make test en un Makefile para homogeneizar la ejecución de pruebas. Este pipeline automatizado asegura que cada cambio pase por pruebas unitarias e integración antes de llegar al entorno público.

Retos encontrados y soluciones:

1. Inconsistencia entre tests y UI Problema: pequeñas diferencias en el texto usado por la UI y el texto buscado en las pruebas provocaban fallos. Solución: usar selectores más flexibles en tests, por ejemplo expresiones regulares insensibles a mayúsculas, y revisar conjuntamente la redacción de la interfaz y los tests para evitar discrepancias.

2. Gestión del estado Problema: decidir qué información debía vivir en useState resultó complejo al principio. Solución: considerar estado únicamente aquello que afecta directamente a la UI: lista de registros, flag de carga, mensajes de error, registro en edición. Organizar el estado por responsabilidad mejora trazabilidad y evita renders innecesarios.

3. Renderizado de modales y ramas condicionales Problema: colocar un modal dentro de una condición que ocultaba la UI impidió que el modal se mostrara al abrirlo. Solución: ubicar el modal fuera de las ramas condicionales y controlarlo mediante isOpen onOpen onClose, permitiendo mostrarlo independientemente de la lógica de carga o error.

Buenas prácticas aprendidas: revisar la coherencia entre pruebas y UI, mantener el estado mínimo necesario para la representación, aislar problemas reproduciéndolos en versiones mínimas del código y utilizar herramientas cloud con GUI para acelerar la configuración inicial.

Puntos de mejora y aprendizajes técnicos: aprendí a montar un entorno Vite React TypeScript Chakra UI desde cero, incluyendo la correcta aplicación de ChakraProvider a nivel global. Mejoré mis habilidades de CI/CD creando pipelines de build test deploy en GitHub Actions. También reforcé mis técnicas de debugging aislando errores y distinguiendo entre problemas de entorno y errores de implementación.

Lecciones sobre cloud y herramientas: la curva de entrada a servicios como Supabase y Firebase es más baja de lo esperado gracias a sus interfaces gráficas. Esto facilita tareas que antes requerían mucha configuración manual, como la creación de tablas o el despliegue. La documentación y artículos en la comunidad fueron fundamentales para resolver incidencias rápidamente.

Sobre Q2BSTUDIO: en Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida que combina experiencia técnica con foco en negocio. Ofrecemos servicios de software a medida, soluciones en la nube y proyectos de inteligencia artificial y ciberseguridad. Si buscas desarrollar una solución personalizada y escalable, podemos ayudarte con el desarrollo de aplicaciones a medida o con la integración de modelos de IA en procesos empresariales mediante nuestros servicios de inteligencia artificial.

Palabras clave y servicios: este proyecto está alineado con servicios que ofrecemos como aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure inteligencia de negocio ia para empresas agentes IA y power bi. Integrar estas capacidades permite transformar una idea en un producto robusto y seguro, con despliegue automático y supervisión continua.

Conclusión: la renovación de la app fue una experiencia completa que abarcó desde el diseño y la implementación hasta las pruebas y el despliegue automatizado. El proyecto reforzó conceptos clave de front end y backend, mejoró la disciplina de testing y CI/CD y demostró el valor de las plataformas cloud. En Q2BSTUDIO queremos convertir aprendizajes como este en soluciones reales para nuestros clientes y ayudarte a llevar tus proyectos al siguiente nivel con software a medida y tecnologías emergentes.