RelayResponse

En este proyecto recibimos un sistema multi-tenant implementado con NextJS y React, que fue un MVP desarrollado por la empresa como prueba de concepto. Nuestro enfoque fue tomar la aplicación web existente y comenzar a trabajar para garantizar una escalabilidad y seguridad adecuadas de esta aplicación pensando en su publicación final, que permite a los usuarios acceder y administrar cada set de datos individualmente y sin problemas. Aprovechando tecnologías poderosas como Firebase, Tailwind, Recharts, React-Redux y Vercel, hemos creado con éxito un sistema flexible y rico en funciones que satisface las necesidades únicas de nuestro cliente.

NextJS y React

Nuestro proceso de desarrollo comenzó comprobando el desarrollo existente además de NextJS y React. Con NextJS como base, tuvimos que configurar correctamente la representación del lado del servidor y luego trabajar en la optimización del rendimiento, asegurando una experiencia de usuario fluida. La arquitectura basada en componentes de React facilitó la creación de interfaces dinámicas e interactivas, lo que permitió a los usuarios interactuar sin esfuerzo con el sistema. Reemplazamos varios componentes y actualizamos la versión de las dependencias mas relevantes del sistema.

Multiusuario con Firebase

Uno de los aspectos más destacados del sistema es la integración del concepto multi-tenant con Firebase. Establecimos una base de datos central que mantiene las relaciones entre las cuentas corporativas, sus usuarios, sus respectivas bases de datos y la aplicación frontend. A través de esta integración, nuestra aplicación se conecta sin problemas a diferentes bases de datos de Firebase, lo que proporciona un entorno seguro y aislado para cada inquilino. Al aprovechar las sólidas reglas de seguridad de Firebase, nos aseguramos de que los usuarios tengan acceso basado en permisos a sus datos designados, evitando el acceso no autorizado a información confidencial.

La aplicación también integra una variedad de características que describimos brevemente a continuación:

Visualización de datos con Recharts: en ciertas secciones del sistema, incorporamos Recharts, una poderosa biblioteca de gráficos, para visualizar y presentar datos de manera significativa. Al aprovechar el API de Recharts, personalizamos y ajustamos varios gráficos para brindar visualizaciones precisas que ayuden a los usuarios a comprender y analizar sus datos de manera efectiva durante el diagnóstico y tambien en tiempo real con la recolección de datos dentro del quirófano.

Reglas de seguridad y personalización de endpoints: para brindar una experiencia personalizada, creamos y modificamos puntos finales en NextJS para acceder a diferentes funcionalidades del sistema. Además, configuramos reglas de seguridad dentro de la base de datos NoSQL de Firebase para hacer cumplir el acceso basado en permisos. Al implementar reglas de seguridad detalladas, nos aseguramos de que los usuarios solo puedan leer y escribir datos dentro de sus nodos autorizados, manteniendo la privacidad e integridad de los datos.

Integración y mantenimiento de las funciones en la nube en Firebase: integramos y mantuvimos a la perfección las funciones de la nube de Firebase dentro de nuestro sistema (enfoque de DevOps sin servidor). Estas funciones en la nube nos permitieron ejecutar la lógica del lado del servidor y realizar varias tareas en segundo plano, mejorando aún más las capacidades del sistema. A través de un cuidadoso monitoreo y actualizaciones, aseguramos el buen funcionamiento de las funciones de la nube, manteniendo la confiabilidad del sistema.

Gestión de estados con React-Redux/Sagas: para gestionar los datos de la aplicación, implementando React y Redux/Sagas. Esta combinación nos permitió crear una tienda centralizada que maneja de manera eficiente el estado de la aplicación. Al utilizar sagas, gestionamos acciones asincrónicas y efectos secundarios, lo que garantiza un flujo de datos fluido y una experiencia de usuario uniforme.

Tailwind para diseños personalizados: para mejorar la estética y proporcionar una interfaz de usuario coherente, utilizamos Tailwind CSS. Este marco de CSS que prioriza la utilidad nos permitió crear diseños hermosos y receptivos aprovechando las clases predefinidas. Con Tailwind, logramos una interfaz visualmente atractiva y fácil de usar, mejorando la experiencia general del usuario.

Despliegue con Vercel

Para agilizar el proceso de implementación, utilizamos Vercel como nuestra plataforma de alojamiento. La perfecta integración de Vercel con NextJS nos permitió implementar el sistema sin esfuerzo con un simple impulso al repositorio. Con Vercel, aseguramos la integración y el despliegue continuos, lo que permitió actualizaciones y mantenimiento de la aplicación sin inconvenientes.

Integración de webhook con Stripe

Para facilitar el procesamiento de pagos, integramos un webhook con una función de nube de Firebase para conectarse con Stripe. Cuando se realiza un pago, nuestro sistema crea un usuario dentro del inquilino especificado en los metadatos del enlace de pago. Además, activamos un correo electrónico de bienvenida a la dirección de correo electrónico proporcionada en el formulario de Stripe, utilizando la API de Stripe para recuperar la información necesaria. Esta integración simplificó el proceso de incorporación y aseguró una experiencia de usuario perfecta.

Tecnologías

Por razones de confidencialidad no podemos revelar mayor información del sistema y su propósito, pero a continuación dejamos un resumen de las tecnologías mas importantes que integramos:

• NextJS: confirmamos NextJS como la base de nuestra aplicación debido a sus excelentes capacidades de representación del lado del servidor y su rendimiento optimizado. NextJS nos permitió ofrecer experiencias de usuario rápidas y eficientes.
• React: Con React, construimos un front-end dinámico e interactivo, aprovechando su arquitectura basada en componentes para el desarrollo de IU modular y reutilizable. React aseguró un renderizado eficiente y actualizaciones fluidas.
• Tailwind CSS: para lograr diseños personalizados y diseños receptivos, utilizamos Tailwind CSS. Este marco CSS de primera utilidad nos permitió crear interfaces visualmente atractivas aprovechando las clases predefinidas.
• Recharts: en ciertas secciones del sistema, incorporamos Recharts, una poderosa biblioteca de gráficos, para visualizar datos de una manera intuitiva y atractiva. Recharts nos proporcionó una amplia gama de componentes de gráficos personalizables e interactivos.
• Firebase: aprovechamos Firebase como nuestra plataforma de back-end, utilizando su base de datos NoSQL en tiempo real y sus servicios de autenticación. Firebase nos permitió crear una infraestructura escalable y segura para administrar los datos y la autenticación de los usuarios.
• Firebase Cloud Functions: al utilizar Firebase Cloud Functions, implementamos la lógica del lado del servidor y realizamos tareas en segundo plano para mejorar las capacidades del sistema. Cloud Functions nos permitió ejecutar código personalizado y automatizar procesos de manera eficiente.
• Stripe: para manejar el procesamiento de pagos, integramos la pasarela de pago de Stripe. Esto permitió a los usuarios realizar pagos seguros y convenientes por el servicio de traducción de currículums. Utilizamos la API de Stripe para recuperar detalles de pago y activar acciones relevantes.
• Vercel: plataforma elegida por el cliente inicialmente, que se integró a la perfección con NextJS y nuestro enfoque DevOps.