Project 08.2017 - 05.2018 architecture and technical realisation

Online search for the scientific database SPLASH-DB of Max-Planck

The initial goal of the clients project was to migrate the scientific online database from Drupal to TYPO3 while introducing some optimisations at the same time.

The website in fact is is a huge database with some content around and the major focus is a powerful and fast search, an easy and light navigation, the clean content preseantation and handling the data management requirements of the diversified editions pool.

Goto the website: https://mp:splash!

With having the data and search in mind, we started with asking if TYPO3 fits the project goals, but to to the data management requirements we decided, thats something which TYPO3 is really good at.

For the search we use Elasticsearch as engine (we thopugh about Algolia, but commercial solutions are no option at Max Planck). To bring the search performance of Elastic to the users we use Searchkit (a React open source framework) as search frontend, which allowed us to introduce an as-you-type experience combined with strong facet filtering for structured searches.

As we had such a great search in prototype stage, we all knew, we cannot stay with the old web design and so we invented a really lightweight and spacy new screendesign to the platform.

The internationally spreaded scientist teams contributing to the data collection, required a quite complex role and permission model. Editors add and edit contents directly via the CMS or by imports of CSV files for larger data collections. So we have different permissions by content type, country and scientist team. To ensure a review process, we strongly use the TYPO3 workspaces with review and publishing workflows. And yes: we do so even for CVS imports. All indexing works automatically and respects publishing stages and user permissions.

At the same time some stakeholders need a login protected preview to the frontend of the database, which is realised by frontend user groups and login functions, which go completely through to the Elasticsearch index and the Searchkit frontend search.


  • Architecture.
  • Technical realisation / lead developer of the frontend and backend.
  • Data migration based on repeatable CSV imports and exports due to important client requirements.

Technology Stack:

  • TYPO3 CMS due to a strict client policy.

  • Elasticsearch as strong fulltext search engine.

  • Searchkit (React) for an as-you-type search experience.

  • Open Layers for an interactive data map.

  • Bootstrap with SASS.

  • GulpJS to compile all frontend resources.

  • BackboneJS as menu controller.

  • FullpageJS for a nice entry page.

  • Docker for easy to use development environment.