Introduction

In this post, we covered at a high level how micro app architecture can be a game-changer in situations where components are being built by multiple independent parties (e.g., web development agencies, a team, or a community behind a (UI) components library, individuals, startups, etc). The same holds true for companies creating component libraries for self-consumption. In this post, we will explore some use cases where this architecture can be applied to build interesting tools and applications.

MechCloud is a vuejs based SaaS application and so a micro app developed for MechCloud can have vuejs based components ONLY.

The Idea

Irrespective of who you are (a team/community/startup behind a components library or the IT department of a company), the idea is to host the components library along with a CSS framework (in-house or third party) of your choice as a micro app. You can also deploy all the microservices, which act as a proxy for fetching data from internal or external APIs/enterprise systems etc, for the micro app components, alongside the micro apps. A simple micro app (consisting only static assets) can be hosted anywhere you can host static web applications (e.g., Cloudflare Pages, GitHub Pages, Netlify, S3, etc.) or it can be deployed on Cloudflare Pages functions, Docker, Kubernetes, etc., if it has server-side logic or microservices on which it depends for proper functioning.

Use cases

Using MechCloud as a boilerplate for your SaaS application

When initiating a SaaS project, many opt for a SaaS boilerplate to accelerate development. However, integrating essential features such as SSO, RBAC, multi-tenancy, user management, routing and payments etc, which are common across most if not all the SaaS applications, presents substantial challenges. Then comes the challenge of figuring out optimal hosting to deploy your SaaS application. The MechCloud Website Builder, designed as a minimal and Cloudflare-native application, bypasses these hurdles by leveraging Cloudflare's capabilities (e.g., custom domains, DDoS protection, caching, edge computing). This allows for rapid deployment of a basic SaaS version in just a few hours, unlike traditional code-based boilerplates that can be costly and complex to maintain. Furthermore, MechCloud as a hosted SaaS boilerplate significantly shortens the time to create and host your MVP.

All you need to do it create a basic Frame for Mechcloud, code your first page and consume it in MechCloud as an external page using a micro app. Your first page is now live with all the basic features (e.g. SSO, RBAC, routing etc) required for a SaaS application.

Creating your own low-code tool

Although MechCloud Website Builder is a low-code tool, you can use it to create your own external or internal low-code tool too. You can offer this tool to your customers as a web development agency, a team/community behind a CSS framework/components library, or to internal teams as the IT department of a company. Let's consider a scenario where you have developed a headless components library and now wish to provide it along with a CSS framework (e.g., Bootstrap, Tailwind, etc.) of your choice to your external/internal customers. To accomplish this, you will need to create one micro app per CSS framework. In these micro apps, you will style the components using classes from the CSS framework and provide a component form for each component. This allows users to add and configure these components on a site page using MechCloud Website Builder. For instance, we have included or will include some common Tailwind-powered components (e.g., hero section, pricing, etc.) in the sample micro app repository here, which can be utilized on various landing pages.

Offering premium components through subscriptions

Let's consider a scenario where you have created Tailwind-powered free and premium components. Your goal is to ensure that only customers with a paid subscription can access the premium components in the MechCloud Website Builder. To achieve this, you can develop a micro app containing your premium components under the premium folder of the production build of this micro app. Deploy this micro app as a Cloudflare Pages Functions application along with a function under functions/premium folder. This function validates a logged-in user's subscription in the subscription SaaS or engine, you are using to manage subscriptions for the components library, and allow a user to download a static asset from premium folder only if user is having a paid subscription. This approach, in my opinion, will be useful in avoiding the use of your premium components library against the terms and conditions of its license (e.g., a customer purchased a license for one website but is using it on multiple websites).

Creating personalized applications for a superior personal/developer experience

As a solo founder, I work with various tools and applications daily. Often, I need a simple way to change something common across these applications. For instance, whenever my router restarts, my ISP assigns it a new public IP. This means I have to update the IP in the firewall rules for Cloudflare, AWS, MongoDB, and more. Instead of logging into each application separately, I've created a basic component. With this component, I can input the old and new IPs and with a click, update the IP across all these tools and applications. In the future, I can expand this component to include other tools with similar needs. This saves me a significant amount of time in reconfiguring firewalls across multiple tools and applications.

Another example is creating a component that provides a complete view of an application by gathering data from various systems. It will display an application operating on k8s, the k8s cluster hosting this application, the IaaS infrastructure linked to this k8s cluster, the database the application connects to, and observability data from another system (e.g., Prometheus, Grafana, etc.).

Summary

This post discusses how micro app architecture can revolutionize component development by multiple parties, showcasing use cases like creating low-code tools and offering premium components with subscription access. Join our discord server to learn more about MechCloud WebSite Builder.