RelayResponse

In this project, we received a multi-tenant system using NextJS and React, which was an MVP developed by the company as a proof of concept. Our focus was on take the existing web app and start working to ensure proper a scalability and security of this application, enabling users to access and manage their individual dataset seamlessly. Leveraging powerful technologies such as Firebase, Tailwind, Recharts, React-Redux, and Vercel, we have successfully shaped a flexible and feature-rich system that meets the unique needs of our client.

NextJS and ReactJS

Our development process began by check existing development on top of NextJS and React. With NextJS as the foundation, we had to properly setup server-side rendering and then working on performance optimization, ensuring a smooth user experience. React's component-based architecture facilitated the creation of dynamic and interactive interfaces, allowing users to interact effortlessly with the system. We replaced several components and upgraded version of key dependencies of the system.

Multi-Tenancy with Firebase

One of the key highlights of the system is the integration of multi-tenancy using Firebase. We established a central database that maintains the relationships between corporate account and its users, their respective databases, and the frontend application. Through this integration, our application seamlessly connects to different Firebase databases, providing a secure and isolated environment for each tenant. By leveraging Firebase's robust security rules, we ensured that users have permission-based access to their designated data, preventing unauthorized access to sensitive information.

The application also integrates a variety of features that we briefly describe below: 

Data Visualization with Recharts: in certain sections of the system, we incorporated Recharts, a powerful charting library, to visualize and present data in a meaningful way. By leveraging Recharts' intuitive API, we customized and adjusted various charts to provide insightful visualizations that assist users in understanding and analyzing their data effectively. 

Endpoint Customization and Security Rules: to provide a tailored experience, we created and modified endpoints in NextJS to access different system functionalities. Additionally, we configured security rules within Firebase's NoSQL database to enforce permission-based access. By implementing fine-grained security rules, we ensured that users can only read and write data within their authorized nodes, maintaining data privacy and integrity.

Integration and Maintenance of Firebase Cloud Functions: we seamlessly integrated and maintained Firebase cloud functions within our system (serverless DevOps approach). These cloud functions allowed us to execute server-side logic and perform various background tasks, further enhancing the system's capabilities. Through careful monitoring and updates, we ensured the smooth operation of the cloud functions, maintaining the system's reliability.

State Management with React-Redux/Sagas: to manage the application's data, we implemented React-Redux and sagas. This combination allowed us to create a centralized store that efficiently handles application state. By utilizing sagas, we managed asynchronous actions and side effects, ensuring smooth data flow and a consistent user experience.

Tailwind for Custom Designs: to enhance the aesthetics and provide a consistent user interface, we utilized Tailwind CSS. This utility-first CSS framework allowed us to create beautiful and responsive designs by leveraging pre-defined classes. With Tailwind, we achieved a visually appealing and user-friendly interface, enhancing the overall user experience.

Deployment with Vercel

In order to streamline the deployment process, we utilized Vercel as our hosting platform. Vercel's seamless integration with NextJS allowed us to deploy the system effortlessly with a simple push to the repository. With Vercel, we ensured continuous integration and deployment, enabling smooth updates and maintenance of the application.

Webhook Integration with Stripe 

To facilitate payment processing, we integrated a webhook with a Firebase cloud function to connect with Stripe. When a payment is made, our system creates a user within the tenant specified in the payment link's metadata. Additionally, we trigger a welcome email to the email address provided in the Stripe form, utilizing Stripe's API to retrieve the necessary information. This integration streamlined the onboarding process and ensured a seamless user experience.

Tech stack

While we prioritize maintaining project confidentiality, we can provide limited insights into the technical aspects of the project architecture:

• NextJS: We chose NextJS as the foundation of our application due to its excellent server-side rendering capabilities and optimized performance. NextJS enabled us to deliver fast and efficient user experiences.
• React: With React, we built a dynamic and interactive front-end, leveraging its component-based architecture for reusable and modular UI development. React ensured efficient rendering and smooth updates.
• Tailwind CSS: To achieve customized designs and responsive layouts, we utilized Tailwind CSS. This utility-first CSS framework allowed us to create visually appealing interfaces by leveraging pre-defined classes.
• Recharts: In certain sections of the system, we incorporated Recharts, a powerful charting library, to visualize data in an intuitive and engaging manner. Recharts provided us with a wide range of customizable and interactive chart components.
• Firebase: We leveraged Firebase as our back-end platform, utilizing its real-time NoSQL database and authentication services. Firebase enabled us to build a scalable and secure infrastructure for managing user data and authentication.
• Firebase Cloud Functions: By utilizing Firebase Cloud Functions, we implemented server-side logic and performed background tasks to enhance the system's capabilities. Cloud Functions allowed us to execute custom code and automate processes efficiently.
• Stripe: To handle payment processing, we've integrated Stripe payment gateway. This allowed users to make secure and convenient payments for the resume translation service. We utilized Stripe's API to retrieve payment details and trigger relevant actions.
• Vercel: Our deployment platform of choice was Vercel, which seamlessly integrated with NextJS. With Vercel, we achieved effortless deployment and continuous integration, ensuring a smooth and reliable application delivery process.