WeFlori

Para este proyecto hemos desarrollado una potente plataforma con NextJS, Stripe, Cloudinary y apoyándonos en la infraestructura de AWS.

Esta aplicación web brinda a los visitantes y usuarios herramientas para crear una campaña, que se utilizará para financiar una experiencia. El flujo de trabajo de la experiencia es una manera simple y fácil de crear y compartir experiencias significativas con sus seres queridos. Comienza con la creación de su propia campaña, ya sea para usted o para otra persona. Luego, puede compartir su campaña con sus amigos y familiares para contribuir y ayudar a que la experiencia sea una realidad. Una vez que la campaña esté completamente financiada, puede disfrutar de la experiencia regalándo a alguien o creandola para usted mismo. Este flujo de trabajo permite una experiencia de entrega de obsequios personalizada y reflexiva, y puede usarse para una variedad de ocasiones, como cumpleaños, días festivos o simplemente porque sí.

Fase de desarrollo

Recibimos este sitio web como una aplicación MVP, usando Firebase y funciones limitadas que se usaron como una prueba de concepto para nuestro cliente. Por lo tanto, lo primero que teníamos que planificar era crear una arquitectura sólida para soportar el tráfico y los clientes reales.

A medida que trabajamos juntos para definir un enfoque técnico que sirva como base para todas las características. Nuestro objetivo era mejorar la plataforma actual para adaptarse a nuevas experiencias, integrarse con proveedores adicionales y administrar fondos de manera efectiva. Para manejar el procesamiento de pagos, integramos Stripe en la plataforma, utilizando la integración de Checkout para permitir transacciones sin problemas. También usamos Stripe Connect para agrupar todos los fondos en la cuenta del cliente y luego transferirlos a cuentas asociadas (proveedores) según sea necesario. La integración de Stripe incluye cuentas Express, que permiten a cada usuario tener una cuenta asociada al sistema.

La aplicación web se implementó utilizando el framework NextJS (basado en ReactJS + Node), que proporcionó un poderoso conjunto de herramientas para crear aplicaciones escalables y de alto rendimiento. También seguimos PWA (Aplicación web progresiva) para administrar y almacenar en caché los recursos en función de las reglas comerciales y permitir que la aplicación se instale en dispositivos móviles. Utilizamos Theme-UI para crear un tema elegante y moderno para la aplicación, asegurando que la interfaz de usuario sea visualmente atractiva y fácil de usar. Nuestro cliente nos envió el diseño UI/UX basico en Figma, luego nosotros creamos todas las interfaces siguiendo estos lineamientos.

Las funcionalidades principales incluyen la capacidad de registrarse y administrar su cuenta. Dentro del panel principal, se puede crear y administrar campañas existentes, agregar fondos o verificar el dinero recaudado para cada experiencia según el proveedor que elija. Además de las características principales, el sitio web ofrece a los usuarios la posibilidad de iniciar sesión con sus cuentas de Google y Facebook, lo que les facilita el acceso a la plataforma sin la necesidad de crear un inicio de sesión por separado. Esta función mejora la experiencia del usuario al eliminar la necesidad de que los usuarios recuerden varios conjuntos de credenciales de inicio de sesión. Además, esta función proporciona una capa adicional de seguridad al utilizar los mecanismos de autenticación de estas populares plataformas de redes sociales.

Además de las principales tecnologías mencionadas anteriormente, también hemos integrado más herramientas y servicios para completar la arquitectura de la plataforma. A continuación puedes leer sobre ellos:

• Cloudinary: para almacenar y distribuir imágenes y videos, usamos Cloudinary, un servicio poderoso que brinda una integración perfecta con nuestra plataforma.
• AWS Amplify: toda la infraestructura está alojada en AWS, y Amplify se utiliza para administrar los servicios y la aplicación de back-end integrada con AWS Cognito.
• RDS Aurora: para la base de datos, utilizamos RDS Aurora, que proporciona instancias de lectura de escalado automático basadas en reglas definidas, lo que garantiza que la base de datos pueda manejar grandes volúmenes de tráfico sin ningún problema. En este proyecto integramos la opción con PostgreSQL version 14
• ChatCamp: Integramos un chat interno usando ChatCamp, una herramienta de mensajería que permite la diferenciación de sesiones y mantiene la privacidad.
• npm Yup: para validar los diversos formularios utilizados en la plataforma, usamos npm Yup, que proporciona una potente biblioteca de validación.
• Eslint: es una herramienta de análisis de código estático para identificar patrones problemáticos que se encuentran en el código JavaScript. Hemos integrado esta revisión de código para cada Pull Request (o merge request) y también se usa en el nodo "Test" en Amplify Pipeline
• Sequelize: Utilizamos Sequelize para la gestión de la base de datos, proporcionando un ORM que simplifica el proceso de trabajo con la base de datos.
• Prismic: finalmente, integramos el servicio Prismic para obtener blogs administrados por el usuario final y mostrarlos en la aplicación como contenido estático generado en el momento de la compilación.

Al aprovechar estas herramientas y tecnologías, pudimos crear una plataforma que ofrece un optimo rendimiento, confiabilidad y facilidad de uso al cliente. Por ultimo, completamos toda la implementación y tareas DevOps integrando AWS Amplify con nuestro testing automatizado.