Monorepo Magic: How This Dot Labs Utilized Nx to Manage and Deploy a Live Help Desk and Booths for a Virtual Conference Platform

Building Features as Standalone Micro Frontends

Deploying to a platform on which we could not write custom features posed our first challenge. And while the platform allowed 3rd party JavaScript to be loaded via <script> tags, it did not allow package installation via NPM.

In order to overcome this roadblock, we chose to build JavaScript snippets as micro frontends that could be bundled and shipped as standalone scripts, and loaded onto the platform as needed.

Validating Authenticated Platform Requests

Validating authenticated platform requests was no easy task. The platform used a publicly available API that could be authenticated against using JSON Web Tokens (JWT). The provider allows customers to set a secret for the JWT authorization check. Unfortunately, the JWT could not be invalidated by a 3rd party system since there were no available APIs.

Additionally, the client system provided a fresh JWT on each page load, but this was not optimal for JWTs providing information. To address this challenge, we had to remove all paths for PII from the API system, and reduce the JWT stay-alive time to under 5 minutes. This required our team to send more requests to the platform system than in previous years, but fortunately the load was negligible. Ultimately, our API served 1.16 million invocations with an error rate less than 0.00001%, averaging 158ms per request.

Using Existing Client Products to Design “Live Booths”

We designed and built platform-based “live booths” which attendees could use to enter a line queue, and were brought into a video call with a subject matter expert (SME). The call was live broadcasted to a stream that other attendees in the queue could listen to as they waited for their turn to talk to the SME. On its first day, the platform had 283 individuals join queues to speak with SMEs.

We were able to build this feature combining several of the clients' products. The queue was managed with a realtime database solution, the video room was hosted via their video offering, and the live stream was enabled using another product that integrated with their video offering to generate live streams. We were able to protect active participation in the video call via a permissions document that was updated as actions were taken on the UI to decide who should be active in the call.

Summary

In conclusion, the team at This Dot Labs successfully worked with a Fortune 1000 company to develop and upgrade their remote annual developer conference platform. Our team utilized a monorepo structure and deployment strategy using Nx, which allowed for building the platform's apps in isolation and validating locally with automated production deployments. The micro-frontends were built using React.js and deployed using the Serverless Framework to AWS S3 and Cloudfront. The backend utilized a GraphQL API provided through the Serverless Framework, and the team remapped data paths to human-readable versions via GraphQL to extend the graph for the needed use cases.

At This Dot Labs, we pride ourselves on our ability to provide staff augmentation, architectural guidance, and consulting to companies utilizing modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.

We worked closely with the client to overcome roadblocks such as deploying to a platform on which we could not write custom features, and validating authenticated platform requests. Our team designed and built the platform-based “live booths“, allowing attendees to enter a line queue and join a video call with a subject matter expert, which had 283 individuals join queues on the first day.

We are excited to continue partnering with companies to develop innovative solutions and empower developers worldwide. At This Dot Labs, we work to deliver exceptional products and experiences, and we look forward to collaborating with clients to achieve success.