Working With the Super-App-Showcase Repository

On our blog, you’ll find tips for building a super app and maximizing the efficiency of the development process in such setup. To give you even more insights into what super app development is all about, we’ve put together a case study of the super-app-showcase, a prime example of a repository demonstrating how to structure a super app when working with Re.Pack effectively. 

Building upon the tutorial found in this step-by-step guide to super app development, where we showcased the bare minimum to illustrate super app development principles, this case study presents a more robust example that could evolve into a production-ready super app. 

By analyzing this showcase, we can gain valuable insights into the solutions implemented to tackle various challenges developers face while creating a super app. By exploring the intricacies of this showcase, we mean to:

• provide an overview of the general architecture of the solution, 
• set the stage for a deeper understanding of each component's role in creating a seamless and efficient super app,
• empower you to deal with super apps more effectively in your projects.

Architecture overview

The super-app-showcase repository incorporates a micro-frontend architecture, facilitating easy setup and maintenance of the contained apps. These apps can be deployed independently or as part of the super app, providing developers with flexibility and fostering efficient collaboration.

The super-app-showcase is composed of the host app, which functions as the main container for all the micro-frontends, and the shell app, which acts as a blueprint of the host app with shared dependencies. Among other apps, you’ll find booking, shopping, news, and dashboard, each representing a micro-frontend for their respective services. An additional auth module is exposed for other modules to implement authentication and authorization flows, and UI.

Each of the mini apps, such as booking, shopping, news, and dashboard, exposes a ^{MainNavigator}, representing the mini app itself. In the case of the booking app, an additional ^{UpcomingAppointments} screen is exposed, which is used within the super app as part of its navigation. The news mini app is stored in a separate repository to demonstrate the usage of a remote container outside the monorepo.

Monorepo

As the team behind the super-app-showcase, we decided to go with a monorepo, but we need to emphasize that it's a strategic choice and not a strict requirement. There are both pros and cons to consider regarding this solution.

One of the major advantages of using a monorepo is that it simplifies dependency management. In our case, we've set up a ^shared directory in the root of the monorepo containing a JSON file with shared dependencies for the Module Federation. This approach makes it easy for developers to maintain the most vital part of the Re.Pack’s Module Federation Plugin.

Furthermore, a monorepo enhances code sharing, improving code reusability and consistency across the project. For instance, a monorepo enables us to enforce linting rules and formatting throughout the entire codebase, ensuring a uniform code style. This can significantly benefit development teams looking to maintain a clean and coherent codebase.

As mentioned previously, the news mini app is stored in a separate repository. This demonstrates that the entire app could have been structured using individual repositories instead of a monorepo, which might suit some projects better. Ultimately, the decision to use a monorepo or separate repositories should be based on your development team's specific needs and preferences, keeping in mind the unique aspects of each project. It's crucial to weigh the pros and cons, such as potential scalability issues and challenges in managing a large codebase, when deciding whether a monorepo is the right choice for your project.

Catalog server

The super-app-showcase includes a package within the monorepo named ^{catalog-server}, which plays a vital role in handling mini app compatibility in production environments. Built using Node.js and Express, this straightforward server acts as a reliable resource for determining which mini app version to download considering the requesting app's requirements, such as its current version.

Centralizing versioning logic in the ^{catalog-server} allows developers to easily implement custom versioning strategies, ensuring seamless integration between the host app and its corresponding mini apps. This approach is fundamental when dealing with conflicts arising from native dependencies. When a new version of the host app is released, users who are still on an older version of the host app should not download the latest mini app that requires the newest native changes. Instead, the ^{catalog-server} ensures they download the most recent, compatible version that guarantees a smooth experience.

By managing version compatibility this way, the ^{catalog-server} effectively mitigates potential issues arising from different host app versions and provides seamless integration between the host app and its corresponding mini apps, maintaining the stability of the super app.

State management

The ^auth package in our super-app-showcase monorepo is a practical solution for state management, focusing on authentication and authorization for all mini apps. Keep in mind that this package isn't meant to work as a standalone module. Instead, it serves as a collection of components designed to handle authentication and authorization within the super app.

This package makes it easy for developers to integrate authentication and authorization flows into their super app. Although it doesn't have dedicated iOS or Android folders, it relies on the host app bundle for any necessary native-based libraries.

What's great about the ^auth package is its reusability. When mini apps are run independently, they can use their own provider component for authentication and authorization. But when they're part of the host app, they can efficiently use the provider component from the host app itself. This approach not only simplified the development process but also ensures a consistent and secure user experience across the entire super app.

The package can be viewed as a template for implementing reusable state management solutions in super apps using any library of your choice. By following the design principles demonstrated in the ^auth package, developers can create their own custom state management solutions tailored to their specific needs and preferences while maintaining the same level of reusability and consistency throughout the super app.

Shell app

The shell app, although not strictly required, serves as a helpful addition to the host app by precisely representing its structure and navigation. To maintain its usefulness, it should be kept in sync with the host app. The shell app's lightweight design trims the excess, focusing on the aspects needed for integration. It may even feature pre-configured states for hassle-free testing of different aspects. This effective testing process allows developers to pinpoint and tackle integration challenges early on, resulting in an overall more stable super app.

Summary

The super-app-showcase serves as a comprehensive guide to building a robust and scalable super app using Re.Pack and Module Federation. By exploring its monorepo structure, ^{catalog-server}, basic state management solution we've highlighted various solutions and best practices that developers can employ to tackle challenges and streamline the development process. 

By understanding the architectural choices, such as monorepo versus separate repositories, and leveraging shared components and state management, you can create powerful super apps that offer a consistent and seamless user experience. Armed with this knowledge, you are now better equipped to navigate the world of super app development and bring your own super app projects to life. And if you’re looking for an experienced tech partner to help you with super app development, get in touch with our team.