Building a Modular White Label Frontend with React and TypeScript

Hello everyone! In this article, I’ll be discussing how you can design a white-label product for web-based applications using React and TypeScript. 

Before we start do you want to learn software development? with personalised classes and mentorship from a seasoned professional. With 4 years of hands-on experience contributing to top products used by industry giants like Amazon, Flipkart, Urban clap, meesho, Dominos, Swiggy etc. I specialize in React, Node.js, TypeScript, and System design. Let’s elevate your career together! Reach out at aniket.chanana@gmail.com or connect on LinkedIn.

A white-label solution refers to a product or service created by one entity and made available for use by others to conduct business. For instance, if you desire an image editing capability on your website without developing a new image editor, you can acquire a white-label solution. By customizing it to match your theme, you can seamlessly integrate and leverage it to enhance your business offerings.

Before we delve deeper, let me highlight some of the key offerings of a white-label solution.

1. Easily integratable into any web application, enhancing its capabilities effortlessly.
2. Offers customizable theming options to seamlessly align with the aesthetics of the host website.
3. Facilitates smooth data flow between the host and child applications, ensuring seamless communication.
4. Designed for ease of use, requiring minimal or no configuration for any third-party developer.

Considering the points mentioned earlier, let me explain the process in a simple way. We will use a basic example — of a form submission application.

Let’s take a look at the diagram below to get a basic understanding of the flow and application structure.

Also there are various methods to integrate your forms-app UI with the host app UI, like

1. via javascript modules (npm module or tags).
2. via iFrame Integration by providing child app src

In this article we will follow the 2nd approach because iframes provide:

1. Isolation and Security.
2. Ease of Implementation
3. Cross-Domain Compatibility

Now Let’s jump into the code & build our white-label forms app — basically, it can plugged it into any app using an iframe and can be customised easily. you can check out the full code here: GitHub.

Here are the must-have things:

1. Keeping messages Structured: Every message to and from the iframe follows the same structure. So that user cannot mess around — strict validation for all messages. ref: Message validation function
2. Data Check: Our forms app checks any data that comes into the iframe before getting down to business logic. ref: Message handler hook
3. Easy Peasy Form Fields: Host apps can tweak form fields with a simple post iframe message. ref: Host app postMessage with field config
4. Style It Your Way: Our forms app supports some basic theming. So, if you’re integrating our iframe, you can make it look alike to match your app’s theme.

Out of Our Article’s Scope:

1. Fancy Theming: We will touching on the basics of adding theming.
2. Complex Logic: We will be skipping the complex logic. This article is all about the system design of a white-label frontend solution.
3. Forms app dashboard: We won’t be developing any backend support for our forms application in this article; the focus here is purely on the frontend solution.

This article you what’s necessary and how to turn your app into a white-label app. You can grab these ideas and apply in your application.

Froms app UI

Forms app UI and functionalities

After building out config driven (ref: FieldRenderer) UI lets setup our incoming messages handler.

Setting up communication for Forms app & Host app

We will be having a communication between both our applications, e.g we will have a postMessage function for sending messages to other froms-app and useMessageHandler hook handle incoming messages. 

As of now both the apps are under us so we can setup communication as per our wish, later when our Forms app is consumed by any 3rd party Host app in that case they can setup postMessage functionality and message handler functionality as per their wish.

This hook will handle all the incoming message + validation to our forms app (iframe)

This hook will be responsible for all the validation of incoming message and our handleIncomingMessage will be invoked as callback post validation from validateMessage, and our handleIncomingMessage function is responsible for routing correct message type to its business logic implementation.

Our business logic will take payload from the message and make our app react accordingly e.g if message contains instructions to CHANGE_THEME our app will invoke appropriate function for this and will change our app theme based on the message received.

Similarly we will be having a postMessage functionality for sending message to other app in.

Now that our communication is setup between both the apps we can start sending message from host-app to forms-app

Function in host-app for sending message to froms-app

message recieved in froms-app from host-app

Now that we our INIT_FORM event is getting data from host-app which includes our theme details, fields config and other configurable parameters.

We will use this data to drive our forms app UI using our message handler function

Implementation for handling incoming messages to forms app

You can refer this file and understand how we are deriving our UI from the config sent via postMessage from our host app.

Now that our forms-app is ready to handle our incoming data from host-app from here we can do what ever we want (i have console logged fieldValues), what you can do is

1. Send this data back to host-app from post message communication of iframe.
2. Or Make an API call to froms app server and store data in the dashboard

It totally depends on the Client usecase.

onSubmit method gets invoked on form submission

Conclusion

This is one way to create a user interface based on configuration settings. After working in software engineering for four years, I’ve found it to be a widely used approach in real-world applications because it offers:

1. Easy Maintenance: It’s simpler to manage and update.
2. Serve Multiple Clients: You can use a single application to serve multiple clients (like in a SAAS scenario). Everything is controlled through configuration settings.
3. Effortless Updates: You can deliver updates without requiring users to run npm install or upgrade modules.

I hope you find this article on configuration-driven UI and how to white label any frontend application. Any suggestions or corrections for this article are welcome. Stay tuned for more articles. Happy coding till then !❤