A comprehensive guide to building multi tenant frontend applications using NextJS. Part - 1

Author: Tanvi Nadkarni (Frontend Engineer)

Fastlearn is a learning management system (LMS) that uses AI tools and video streaming to help students achieve specific learning outcomes. The system offers a variety of features, including:

• Personalized learning paths: Fastlearn uses AI to track student progress and create personalized learning paths for each individual. This ensures that students are learning at the right pace and are challenged appropriately.

• Video streaming: Fastlearn offers a wide variety of video courses, covering a wide range of topics. Students can watch these courses on demand, at their own convenience.

• Quizzes and assessments: Fastlearn includes a variety of quizzes and assessments that allow students to test their knowledge and understanding of the material. This helps students to track their progress and identify areas where they need additional help.

• Collaboration tools: Fastlearn includes a variety of collaboration tools that allow students to work together on projects and assignments. This helps students to develop their teamwork and communication skills.

Fastlearn is a powerful LMS that can help students to achieve their learning goals. The system's use of AI and video streaming makes it a valuable tool for both students and instructors.

Here are some additional benefits of using Fastlearn:

• Increased engagement: Fastlearn's interactive features help to keep students engaged and motivated.

• Improved learning outcomes: Fastlearn's personalized learning paths and assessments help to ensure that students are learning effectively.

• Reduced costs: Fastlearn can help to reduce the cost of training by providing a centralized platform for delivering and managing content.

Fastlearn is a multi tenant software to enable selling it as a service but some of our customers also wish to deploy it on their intranet hence it also supports on premise installation as well.

Challenges of multi-tenant architectures

Building a multi-tenant front end can be challenging, as it requires careful planning and design to ensure that each tenant's data is isolated and secure. Some of the key challenges include:

• Data isolation: The front end must be able to separate each tenant's data from the others, so that users cannot see or access data that does not belong to them. This can be a complex task, as it requires the front end to be aware of which tenant a user belongs to.

• Security: The front end must be secure to prevent unauthorized access to tenant data. This means that the front end must use strong authentication and authorization mechanisms, and it must be protected from common security vulnerabilities.

• Performance: The front end must be able to handle multiple tenants without impacting performance. This means that the front end must be scalable and efficient, and it must be able to handle high traffic loads.

• Customization: The front end must be customizable to allow each tenant to brand and personalize their experience. This can be a challenge, as it requires the front end to be flexible and extensible.

Despite the challenges, building a multi-tenant front end can be a rewarding experience. By carefully planning and designing the front end, it is possible to create a secure and scalable solution that meets the needs of multiple tenants.

As we understood the needs of our customers we found that our customers often evolved over period of time in their own understanding of how students benefit from the LMS and wanted to build new features. Some of our customers wanted to deploy Fastlearn internally but later wished to move it to internet. Some of them wished to sell their entier LMS content to another provider and so on.

Some of them wanted very tight integration with their existing tools and some wanted to write their own code for customizations. At this point a SaaS product does not remain a SaaS product but ventures into more of a custom product development.

This made our job even more challenging in archiecting the system.

Multi tenancy in Fastlearn frontend

To overcome these unique challenges we focused on splitting our frondend code into three components.

• Core: A set react components and hooks that will always be same across all our customers and always maintained by Wiseland's Engineering team. This includes data layer that talks to fastlearn backend.
• Plugins: A set of commonly used react components, hooks and general libraries which are often built by Wiseland's engineering team however we can also allow others to build these plugins. While some plugins are common for all our tenants, some of our tenants might request their own features which are the built as either general plugins or tenant specific plugin.
• Custom: All the tenant specific highly customized components. These are never shared between tenants.

While core is a single git repository, plugins and custom tracks consist of several git repositories which can be configured per tenant.

Our front end team develops on all these three tracks.

Deployment of Fastlearn frontend for a new tenant

Whenever we have a new customer, the deployment happens on Google Cloud Run initially. Depending on the needs of the customer we may move later to a more powerful kubernetes cluster.

After the customer has provided all the customization information we produce a Docker file from it. Nearly all configuration items are provided as environment variables in the Dockerfile.

This Docker file is then programattically added to our monorepo which has Dockerfiles for every single of our customers. A Google Cloud Build rule then detects the changes and starts deployment of the Dockerfile to Google Cloud Run.

Bringing all things together.

The Dockerfile as part of its container building fetches the latest snapshots from all the git repositories and combines them together to produce a single NextJS application. This application is then deployed to the Google Cloud Run.

We do not deploy changes to git repositories automatically instead we have a daily cron job that looks for git changes and then deploys to all our customers in staggered manner.

How it differs from other software in the market

Building multi tenant architectures is a complex art with no single solution that fits all needs. But our needs are primarily to give our customers a sense of SaaS while keeping the door open for a more bespoke development.

This is how we achieve key aspects of multi tenancy in our front end.

• Data isolation: While our backend has its own was to ensuring data isolation, for the frontend we achieve this by having a complete source repository for each our our tenant. For front end the customer specific data is often is in the code and having a separate source repo ensures that the data is always isolated.
• Security: Security in our app will need an article of its own, but having an entirely separate docker container for each our customer ensures that we can prevent our frontend from having even accidental access to other backends.
• Performance: We have outsources some of the key features to more specialized companies. Video streaming is handled by Mux.com and 100ms.com for us. Our front end scores more than 95% on lighthouse scores because most of the data is compiled and statically generated during build process.

Conclusion

Multi tenancy in front ends can be both simple and complex depending on customization levels needed for our customers. However in our case it is more towards the complex side and we have solved it by building a complex build process componentization of our features.

In the next part we will look at the more technical details of this multi tenant architecture.