When Rihub approached us with a unique challenge, we knew it would test the limits of our skills and creativity. The task was ambitious yet precise: to develop a client-doctor online session management system with cutting-edge functionality.

The system needed video session management, scheduling, integrated payment (Stripe and Paypal) and various associated features. It had to be robust, dependable, scalable and future-proof. We were immediately excited about the prospects of delivering something complex yet functional and helpful.

The Beginning: A Payment Module That Paved the Way

The first challenge we took on was developing a standalone payment module that could seamlessly integrate with the main application. This was when we took our first steps into the world of Module Federation, an innovative approach to developing micro frontends.

It allowed us to:

• Expose Reusable Components: This approach allows for reusable components and stores them for further and repeated use. Thus, we can reference them across various other modules, making for a faster and more efficient development process.
• Streamlined Integration: Integrating Stripe and PayPal buttons was a simple task. Just one of the many benefits of modular design.

The takeaway?

Module Federation offered more than just functionality. It offered a whole new way to think about scalability and reusability. This shift in our perspective changed the way we developed such an application. It also set the stage for what was to come.

Deepening the Architecture: Developing the Doctor Module

The Doctor module was the next step, demanding a sophisticated calendar component to manage availability. Features included:

• Hourly and daily availability tracking.
• Colour-coded time slots for intuitive use.

Challenges and Learnings:

• Tailwind CSS: While powerful, implementing Tailwind across modules required repetitive setup—an area ripe for optimisation.
• Scalability: Module Federation became absolutely indispensable for managing complex systems under tight deadlines. One of the best features was the ability to add new features without disrupting the existing codebase. This, of course, is a game changer.

The Most Challenging Phase: Repackaging the Client Module

The client’s existing codebase presented a mixed bag of functionality, including video session management. Our task was to modularise it into five distinct areas:

• Doctor
• User
• Payment
• Session
• Login

Obstacles We Overcame:

• Outdated Codebase: Refactoring legacy code with questionable standards was no small feat. Our experts really outdid themselves on this one.
• State Management: The integration of MobX into modular architecture was a challenge that required us to skill up. It was already included in the project code and we were up to the challenge.  It had a steep learning curve, but we gained a deeper understanding of the process and gained new tools. So it was a win-win.
• Redundancy Issues: Exposing stores, actions, and also packages and libraries made by us, across modules led to some redundancy, increasing the application’s size. Through a concerted team effort, we managed to keep the size reasonably small.

Our Key Takeaways:

• Global State Management: A shared state management module across the monorepo could simplify processes and reduce redundancies. It was one of the ways we managed to lower the size of the application.
• Selective Modularity: Not every feature needs modularisation. Looking back, focusing on the Doctor and Payment modules may have been a more efficient way of developing this particular application. It is very tempting to modularise everything just because we can. However, we chose to make only the doctor and payment modules while keeping everything else as it was, which made it a much more efficient process.

Reflecting and Innovating: Post-Project Insights

After the project completion, we took a deeper and closer look at Webpack 5’s Module Federation documentation. Our aim was to gain a deeper understanding of the subtler features and strategies that can be used for future projects.

While it would have been easier if we had these tools down when we were working on the project with a tight deadline, they are now parts of our skillset. So we are better prepared for the next challenge.

 Here’s a few highlights of what we discovered:

1. Global Shared State Management: Tools like MobX or Zustand, when centralized, can reduce redundancy and improve maintainability.
2. Leveraging Shared Dependencies: Webpack 5 created this feature to minimise redundant installations. This helps in significantly reducing storage requirements, keeping the overall footprint smaller and lighter.
3. Strategic Modular Design: Over-engineering modularity can lead to inefficiencies. Module Federation shines when applied strategically in a way that is aligned with project needs and team structures.

The Impact

This journey transformed our approach to modular architecture, reinforcing the importance of balancing cutting-edge tools with strategically intelligent architecture. When it comes to businesses aiming to scale efficiently, Module Federation offers unparalleled benefits—but it requires experienced and thoughtful implementation.

Ready to Scale Your Systems?

At Capital Compute, we are dedicated to developing innovative, scalable solutions. Our approach is always defined by your specific business needs. Whether it’s leveraging Module Federation or exploring other advanced tools and frameworks, we’re here to architect your dreams into usable products. Let’s

Contact us today to discuss how we can make your next project a grand success.