⚠️
Under construction

A front end application that uses Typescript, React, Context API, Contentful SDK, and an inhouse components library. It's main purpose is to enable content creators to choose the React component that they want to show in the web page, then fill the data consumed by that component. Contentful allows a limited number of content types, but we needed a lot more types, so we decided to build a type system separate of Contentful's content types, which allows each entry to define it's type to be one of the components in our component library, and we can compose such entries using Mosaic, then the rendering engine (called Retina) would take care of rendering all of these entries using appropriate components.

Main features:

• Show a list of the available components from the components library, and enable the user to choose one of them as the type of the entry.

  That part was done by me and the team leader (he was responsible for extracting components list, and I was responsible of ensuring Mosaic will use this list correctly).

• Show input fields that represents the allowed props of the component, along with their types, which can include complex custom-built types, that requires rendereing custom components to enable entering their data (e.g. rich text props that needs rendering a rich text editor in Mosaic to fill it's data).

  The challenge was getting the specifications of each component (props names and types), so I used Typescript's compiler tsc to get these metadata about the different types, and converted them to a json schema written to a file in the build of the components library. Then in Mosaic I read that file and use it to show the list of components, and render the input fields. The rendering itself was done using a 3rd party library, which took the json schema of the component and built a form that represents it, but we needed to handle rendering complex props.

  Extraxtring the metadata, then converting it to json schema, and finally consuming it from Mosaic was hard, but was a totally necessary automation to make Mosaic use any version of the component library without human intervention of any kind. So when we needed any component, it was the job of the frontend developer to build it in the components library, then a new version of Mosaic would be automatically built and deployed using the new version of the library, and automatically all new components become available in Mosaic.

• Show a preview of the component with the given data, handling happy scenario, and different types of error cases.

  It was challenging to get the data from the input form, including nested data, and then passing it correctly to the chosen component, but I managed to do so using React, in a clean and maintainable way. The other challenge was handling the error cases, while using function components as the only type of components. I used a custom error boundary package for functional components, called react-error-boundary, which helped me handling errors, and still use functional components all the time.