Journalist portal

December 2019 - July 2020

  • The front page shows a large header with links to some important pages, a login and a register link, and some animated teasers sliding in from the right. Underneath starts the first section with the news teasers.
    The front page.
Item 1 of 4

About the project

The client of this website is a publishing house. On the platform journalists are able to view previews of upcoming book releases, search for titles, order exemplars and personalize their search by following people or publishers or defining interests.

Architecture

The website uses Drupal as a headless system, which means that the Drupal templating system is ignored. Instead, the frontend is completely decoupled. It's a server side rendered React application built with Next.js and connects to Drupal only via an API. We used the JSON:API specification for that.

Scope

I worked on the frontend together with three other developers, one of which was a trainee. Thus the project involved frequent communication and coordination. We reviewed and discussed our code via merge requests, which all of us agreed to be a very good tool for communication and learning.

Challenges

  • The Next.js system requires an understanding about when a page is rendered where and why (server-side or client-side).
  • To improve performance we made use of subrequests (a Drupal module to make multiple requests at once) and includes (a JSON:API feature to include related resources in the same response) which was a big challenge in terms of preparing requests, processing response data, caching and dependencies between requests.
  • The routing needed to be able to match arbitrary URLs from the CMS pages to the correct template.

Tech Stack

  • Next.js
  • Drupal 8
  • JSON:API
  • Storybook
  • Jest + Enzyme