Publicado el

Creación de Dashfolio - Una plataforma escalable de visualización de datos con React, Next.js, NestJS y AWS

Autores

    Creación de Dashfolio: Un panel de datos escalable de principio a fin

    Dashfolio es una aplicación web moderna diseñada para explorar datos de producción agrícola mundial. Ofrece paneles interactivos que ayudan a los usuarios a visualizar información obtenida de conjuntos de datos de la FAO, incluida la producción regional y los principales productores por tipo de cultivo.

    En este artículo, te guiaré por la arquitectura técnica de Dashfolio y explicaré cómo creé una aplicación full-stack escalable, de alto rendimiento y fácil de mantener con las siguientes tecnologías:

    • Frontend: React.js (Next.js), Tailwind CSS, Recharts
    • Backend: Node.js (NestJS), Prisma ORM, Redis
    • Base de datos: PostgreSQL (AWS RDS)
    • Nube y despliegue: AWS + Vercel
    • CI/CD y control de versiones: GitLab Pipelines
    • Pruebas: Jest (pruebas unitarias), Cypress (pruebas de extremo a extremo)
    • Lenguajes y herramientas: TypeScript, JavaScript, SQL, TurboPack, ESLint, Prettier

    Objetivos del proyecto

    • Ofrecer un panel interactivo y de alto rendimiento
    • Garantizar la escalabilidad y la facilidad de mantenimiento con código limpio y principios de artesanía del software
    • Seguir las buenas prácticas del sector: arquitectura limpia, calidad del código, pruebas automatizadas, CI/CD
    • Proporcionar obtención rápida de datos y almacenamiento en caché para una experiencia de usuario óptima

    Frontend - Next.js + Recharts + Tailwind CSS

    • Next.js impulsa el frontend de React.js para páginas SSG/SSR y rutas de API.
    • Utilizo Tailwind CSS para estilos basados en utilidades y un sistema de diseño coherente.
    • Recharts ofrece gráficos personalizables y de alto rendimiento para visualizar datos.
    • TurboPack acelera el proceso de desarrollo y compilación, optimizado para proyectos Next.js.

    Backend - NestJS + Prisma ORM + Redis

    • NestJS proporciona una arquitectura modular y escalable para crear API.
    • Prisma ORM simplifica la interacción con la base de datos con seguridad de tipos y consultas generadas automáticamente.
    • Redis almacena en caché las consultas frecuentes, lo que reduce la carga de la base de datos y mejora los tiempos de respuesta de la API.
    • El backend expone API RESTful que consume el frontend de Next.js.

    Base de datos - AWS RDS (PostgreSQL)

    • PostgreSQL se ejecuta en AWS RDS para proporcionar almacenamiento relacional de datos administrado y fiable.
    • Prisma administra el esquema y las migraciones, garantizando un acceso a datos limpio y coherente.

    Estrategia de nube y despliegue

    • AWS Cloud: Alojamiento de PostgreSQL (RDS) y Redis.
    • Vercel: Despliegue del frontend Next.js para una distribución rápida mediante CDN.
    • CI/CD con GitLab Pipelines: Flujos automatizados de pruebas, análisis de código (ESLint), formato (Prettier) y despliegue.
    • Control de versiones mediante GitLab, con ramas de funcionalidades y solicitudes de fusión para mantener la calidad del código.
    • Canalizaciones de pruebas automatizadas integradas con Jest para pruebas unitarias y Cypress para pruebas de extremo a extremo, garantizando la estabilidad en cada versión.

    Estrategia de pruebas automatizadas

    Las pruebas son una parte fundamental del ciclo de desarrollo de Dashfolio para garantizar la fiabilidad del código, evitar regresiones y mantener una alta calidad. Implementé dos niveles de pruebas:

    Jest - Pruebas unitarias y de integración

    • Utilizo Jest para las pruebas unitarias y de integración tanto en el frontend como en el backend.
    • Garantiza que los componentes, servicios y utilidades funcionen como se espera.
    • Jest + Testing Library me ayuda a escribir pruebas de componentes accesibles con interacciones realistas.
    • Las pruebas se ejecutan automáticamente en las canalizaciones de GitLab con informes de cobertura, lo que aumenta la confianza con cada envío.

    Cypress - Pruebas de extremo a extremo (E2E)

    • Cypress se encarga de las pruebas de extremo a extremo para validar flujos completos de usuario en el navegador.
    • Pruebo flujos esenciales como filtrar conjuntos de datos, navegar por paneles y visualizar gráficos adaptables en distintos dispositivos.
    • Las pruebas de Cypress se ejecutan sin interfaz gráfica durante las canalizaciones de GitLab CI y generan informes para depuración.

    Funciones principales

    1. Paneles interactivos

    • Gráficos circulares que muestran la cuota de producción por región.
    • Gráficos de barras que destacan los principales productores por cultivo.
    • Diseño adaptable y compatibilidad con el modo oscuro.

    2. Caché de API con Redis

    Los resultados en caché de consultas frecuentes garantizan tiempos de carga rápidos y reducen las llamadas a la base de datos.

    Para optimizar el rendimiento y reducir la carga de la base de datos, Dashfolio implementa almacenamiento en caché de la API mediante Redis. Al guardar en Redis los resultados de solicitudes frecuentes a la API, minimizamos la necesidad de consultar repetidamente la base de datos PostgreSQL. Esto garantiza que los usuarios obtengan tiempos de respuesta más rápidos, especialmente al acceder a conjuntos de datos populares o a filtros de uso frecuente.

    3. Buenas prácticas de ingeniería de software

    • Principios de código limpio: DRY, diseño SOLID.
    • Herramientas de calidad del código: ESLint, Prettier y TypeScript estricto.
    • Pruebas automatizadas con Jest (pruebas unitarias) y Cypress (pruebas de extremo a extremo) integradas en las canalizaciones de GitLab.
    • Estructura de carpetas escalable y fácil de mantener tanto en el frontend como en el backend.
    • API seguras con validación de entradas y filtros de excepciones en NestJS.

    Aprendizajes y conclusiones

    • TurboPack mejoró drásticamente los tiempos de compilación del frontend Next.js.
    • La caché de Redis redujo la latencia de la API del backend en aproximadamente un 70%.
    • La combinación de NestJS + Prisma + PostgreSQL ofreció un backend de datos fluido y escalable.
    • La automatización CI/CD con canalizaciones de GitLab garantiza despliegues y controles de calidad coherentes.
    • Las pruebas con Jest y Cypress ayudaron a detectar errores pronto, redujeron las regresiones y mejoraron la estabilidad general de la plataforma.
    • Los servicios de AWS proporcionan flexibilidad, escalabilidad y fiabilidad a la infraestructura del backend.

    Conclusión

    Dashfolio demuestra cómo tecnologías modernas como React (Next.js), Node.js (NestJS), AWS y estrategias sólidas de pruebas con Jest y Cypress pueden combinarse para ofrecer plataformas robustas de visualización de datos.

    Pruébalo en línea: https://www.dashfoliodata.com/

    Si tienes un proyecto en mente o necesitas ayuda para crear aplicaciones web modernas y escalables, no dudes en contactar conmigo:
    🔗 LinkedIn - Steward OUADI