During a refactor of Visit Norway’s code base from vanilla JavaScript, HTML, and CSS to a headless CMS with React/NextJS, I built their new Related Content widget based on the functionality of their former Related Content widget. This widget displays slides pulled from feeds or user-selected slides with varying slide content depending on the type of the slide used. My initial approach encompassed documenting all of the user options that needed to be accommodated and then setting up the files and configurations to integrate the data from the backend. The user customizations required handling each available type of data to be displayed on the slides based on the chosen slide type; for instance, events with a “to” and “from” date (also requiring specific formatting and conditional rendering based on the type of event), listings with unique location and host fields that could also be overwritten based on user selections in the CMS, and user-selected slides that could display images or videos (either YouTube or Vimeo).
The customizations for this widget also included handling each option of slide display methods, such as displaying multiple cards in a slider or grid, shuffling the cards or arranging them in a prescribed order, or displaying a single Featured Card component vs multiple smaller cards.
Working on this widget provided ample opportunities to work with React hooks and complex state management. In addition, the extensive customization options in the CMS required thorough testing both on their own and in conjunction with other available customizations. The hard work required for this project is especially rewarding as the Related Content widget’s use is widespread throughout Visit Norway’s considerable site.
Kate Sivy 