de Linde

Client: Mogens de Linde & Limbo (DK)
Role: Full stack developer

Main Challenges

  • Create an ellegant and polished experience, making sure to communicate de Linde’s service
  • Create intuitive and seamless CMS
  • Develop a really powerful PDF generator
  • Seamlessly plug into Limbo's work flow

The cover page. 3 versions of this page were created for more flexibility on the editor's side.

Backstory

Mogens de Linde is a Danish company that renews buildings with great care, taking in account their historical background and peculiarities that make them unique, since 1975.

In 2020, a collaboration with Limbo gave me the honor of coding their new website in order to make their work pop out of the screen and give them the life they deserve. The design, by Romain Gorisse, highlights the great picture collection (both historical and contemporary), which made it look absolutely beautiful, along with its minimal aesthetics.

This project is made of 3 parts: Content Management System, Website and PDF Generator.

Content Management System

This was the most technically challenging part of this project. Romain designed a modular system, where pages could be assembled with a combination of the available modules, for the most part.

To meet this requirement, I leveraged Gutenberg, Wordpress’ newest editor to create my own Gutenberg Block, which has a custom interface that allows the administrator to select whatever module and compose any given page.

I proceeded to “lock” pages of certain types to certain Gutenberg Blocks templates. The result is that the CMS is very easy to use, and at the same time very powerful. If you are interested in knowing more about it, just write me a line, I’ll be glad to share my process with you.

Website

The website allows the user to navigate through the content with ease of an app (despite the large number of pages). The large images posed a challenge since they could easily make the navigation glitchy while they loaded, but thanks to intensive coding work they are loaded as small as possible for each device and only appear when the user is close to revealing them via scrolling.

The content is sourced via custom REST routes which serve Gutenberg’s information as JSON strings that are simple to consume.

The application itself is a NextJS implementation, which allows us to generate static pages with ease and at the same time refresh the generated content every time we have new entries or changes. Also it made it possible to create “cloud Node functions” in a straightforward manner, which came in handy.

Needless to say, the React environment NextJS makes available was very valuable when implementing the equivalents to the Modules created inside Gutenberg.

PDF Generator

The third part of this solution was a PDF generator. It is a Node app that uses Puppeteer to visit a specific page on the NextJS site, which has a layout that’s made for this purpose, and generate a PDF file out of it. Then, it sends the file back to the user. It has a custom caching and refreshing system that allows for faster downloads.

This feature was core to the solution since PDFs are very valuable in de Linde’s industry and what they had before was not as polished or flexible. With my code they are now able to throw whatever contents at the CMS and have a nice PDF file be generated.

Technical details

Back-end

  • Headless CMS (Wordpress)
  • Custom API implementation to expose Gutenberg blocks as clean and easy-to-use JSON
  • Creation of a Gutenberg “Super Block” which encapsulates all available components in the design (React)
  • CMS design made to be similar to the end result

Front-end

  • NextJS application
  • Division of all possible components and re-utilization of code
  • Creation of a “Component-routing” super component to treat the CMS data, making for a powerful and flexible way to compose pages as an editor
  • Extensive use of scroll spies without loss in performance
  • Custom image component to improve loading time
  • Creation of a PDF page, which serves as a flexible template for use with an external Puppeteer/Node app

PDF Generator

  • Custom Node application
  • Makes use of headless browser Puppeteer to visit the NextJS application and create PDFs before caching and serving them to the user

Infrastructure

  • Development integrated with Vercel, making use of feature branches (Preview URLs) for testing and QA
  • Deployed on a Linux VPS, making use of Apache and pm2
👆