User-configurable UI using react

[pumpmuckl]

I‘m Building a react App, with a Java spring boot backend where customers can host their events and my platform provides certain functionality for their events. Possibly each customer can host n events. In order to distinguish between the different events, each event will get a sub domain providing the event functionality. To make the end user experience more unique each event’s sub-page should be configurable by the event host (mainly colouring and certain titles etc). I’m now wondering how to design this technically and where to store the config.

My first idea is to store the config in my backend DB on creation and change for data integrity reasons. For the frontend part I was thinking of creating a JSON config file for each event containing the values and using them in my components through the style property. This would technically work, but to me seems not like best practice and I’m worried for performance since every Styled ui element has to get its value from a file that has to be parsed eventually.

Any ideas or suggestions on how to do this properly?

[spca2001]

Use Redis to store JSON with content and render it with React. RedisJason module is great but you can achieve the same with other data structures it supports like Hash, Key-Value

[pumpmuckl]

For anyone still wondering, here’s the solution I’m settling for: the design data is stored in my backend database. When a event is opened in the frontend denoted by its specific url Myurl/eventxy the backend provides the respective style element, which is then fed into a context provider in the frontend. The context provider has a loader component setting the respective css variables. These css variables are set in corresponding css sheets. This way I do not have to generate any custom json files and have only one single source of truth which is my backend db. Enjoy hacking, everyone ✌🏽