WeFlori

For this project, we have developed a powerful platform with NextJS, Stripe, Cloudinary and relying on AWS infrastructure.

This web application provide visitors and users with tools to create a campaign, which will be used for funding an experience. The experience workflow is a simple and easy way to create and share meaningful experiences with loved ones. It starts with creating your own campaign, whether it's for yourself or someone else. Then, you can share your campaign with your friends and family to chip in and help make the experience a reality. Once the campaign is fully funded, you can enjoy the experience by gifting it to someone or experiencing it for yourself. This workflow allows for a personalized and thoughtful gift-giving experience, and can be used for a variety of occasions such as birthdays, holidays, or just because.

Development phase

We received a simple website application integrated to Firebase with limited features, which were used as a proof of concept for our client. Thus, the first thing we have to plan was to create a strong architecture to support real traffic and customers.

As we worked together to define a technical approach that serves as a foundation for all features. Our goal was to enhance current platform in order to accommodate new experiences, integrate with additional providers, and manage funds effectively. To handle payment processing, we integrated Stripe into the platform, utilizing the integration of Checkout to enable seamless transactions. We also used Stripe Connect to group all the funds in the client's account and then transfer them to associated accounts (suppliers) as needed. The integration of Stripe includes Express accounts, which enable each user to have an account associated with the system.

The web application was implemented using the NextJS framework (based on ReactJS + Node), which provided a powerful toolset for building scalable and performant applications. We also followed PWA (Progressive Web Application) in order to manage and cache resources based on business rules and enabling the application to be installed on mobile devices. We utilized Theme-UI to create a sleek and modern theme for the app, ensuring that the user interface is visually appealing and easy to use. Our client provided basic UI/UX design using Figma and we created every section based on given Styleguide. 

Main features includes the ability to sign up and manage your account. Inside your dashboard, you can create and manage existing campaigns, add funds or check collected money for each experience based on the provider you choose. In addition to the main features, the website offers users the ability to log in using their Google and Facebook accounts, making it easier for them to access the platform without the need to create a separate login. This feature improves the user experience by eliminating the need for users to remember multiple sets of login credentials. Additionally, this feature provides an added layer of security by utilizing the authentication mechanisms of these popular social media platforms.

Besides main technologies mentioned above, we have also integrated more tools and services in order to complete the platform architecture. Below you can read about them:

• Cloudinary: To store and distribute images and videos, we used Cloudinary, a powerful service that provides seamless integration with our platform.
• AWS Amplify: All the infrastructure is hosted on AWS, with Amplify used to manage the services and backend application integrated with AWS Cognito. 
• RDS Aurora: For the database, we utilized RDS Aurora, which provides auto-scaling read instances based on defined rules, ensuring that the database can handle high volumes of traffic without any issues.
• ChatCamp: We integrated an internal chat using ChatCamp, a messaging tool that enables session differentiation and maintains privacy.
• npm Yup: To validate the various forms used in the platform, we used npm Yup, which provides a powerful validation library.
• Eslint: it is a static code analysis tool for identifying problematic patterns found in JavaScript code. We have integrated this code review for every pull request (or merge request) and also this is used into "Test" node under Amplify Pipeline
• Sequelize: We used Sequelize for the database management, providing an ORM that simplifies the process of working with the database.
• Prismic: Finally, we integrated the Prismic service to obtain blogs managed by the end-user and display them in the app as static content generated at build time.

By leveraging these tools and technologies, we were able to create a platform that delivers optimal performance, reliability, and ease of use.