Same repository for different clients?

Photo by Azazello BQ on Unsplash

Have you ever faced a problem where you want different user interfaces for different clients? I am not talking about a different visual theme that can be applied through css on the same HTML elements. I am talking about different HTML shown to the user, you could even think it is a different website.
We can achieve this effect with the same UI repository really easily.

Where I am working currently we show millions of vacation rentals offers for users to rent from, however we have multiple domains where we want offers to look completely different. We use a single code base for all of these domains.

Lets say you have two different domains: kitten.com and doggo.com

You want the landing page of kitten.com to have a drawing of a cat and doggo.com to have a drawing of a dog.

You have two React components:

const Kitten = () => (<div>This is a kitten component</div>);
const Doggo = () => (<div>This is a dog component</div>);

Then you need a component which decides which animal should be rendered :)

const componentByType = {
  'doggo': Doggo,
  'kitten': Kitten
}
const AnimalSwitcher = ({ type }) => {
  const AnimalComponent = componentByType[type]
    return (
      <AnimalComponent />
    )
}

Then you just need to use it.
Let’s say that your server looks at which domain you are currently in an returns apiData.

const apiData = {
  landingPageComponent: 'doggo'
}
const App = () => (
  <AnimalSwitcher type={apiData.landingPageComponent} />
);

This is a really scalable way for some use cases. You can have X different domains and use X different components on each of them.
It has some cons though. Every client will have to download the same bundle, even if they don’t use any it. So it must be used having that in mind.

Here is a picture of doggo for you :)

Photo by James Barker on Unsplash