May 30, 2024

What I learned helping french newspaper 20 Minutes adapt to digital journalism

Allow me to introduce myself. I’m Vincent Desdoigts, and I’ve been a frontend developer for more than ten years. I started out at a time when working with JavaScript didn’t require “compiling,” when HTML was the true master of the user interface.

As the field evolved and roles became more specialized, I found myself drawn to JavaScript—especially React. Since 2020, leveraging the expertise I’ve built up over the years, I’ve been working with the technical teams at 20 Minutes to design a management tool for their digital newspaper.

You won’t find any juicy React snippets or tips in this article—just the story of an ordinary adventure through the development and transformation of a technical project.

One tool to rule them all

In 2019, the journalists at 20 Minutes faced a cumbersome publishing process. They had to juggle a multitude of different services, each with its own quirks and interfaces. Here’s an overview of these tools, put together ad hoc over the years:

  • An article management and publishing platform, built with Symfony 2 and Sonata.
  • An admin panel developed in Python, dedicated to managing and publishing slideshows.
  • A tool for managing news wires.
  • The journalists’ media library.
  • A dedicated back office for managing web push notifications.

The goal, then, was to bring together this collection of scattered functionalities into a single platform. Journalists would benefit from a unified, coherent environment for everything: from writing and publishing content to managing multimedia. Technically, this was a broader project to modernize the infrastructure, reduce technical debt, and optimize costs.

It's not the destination, it's the journey

Internal development began in 2019, under the project code name Storm. On the frontend, we chose React, while the backend was built with NodeJS and GraphQL. TypeScript was used throughout to bring reliability to the codebase, with Cypress for testing. Worth noting: the architecture was 100% serverless.

Among the libraries we used, you’ll find Draftjs for advanced text editing capabilities, and Material UI, chosen for its ready-made components, which make it easier to build a unified and customizable UI with a configuration file.

Draftjs: In 2019, Draftjs was a top choice for advanced text editors. However, in 2022, Facebook—the project maintainer—replaced it with Lexical.

Premier Octet in the house

In 2020, 20 Minutes brought in Premier Octet to continue Storm’s development. So, I took the lead on frontend development. The internal technical team handled the API—named Nova—along with a host of microservices.

Under the guidance of the product owner Damien, the project moved forward steadily. By early 2022, we were able to release an initial production version with the following key features:

  • Content lists with filters and sorting
  • Content publishing (article, slideshow, live)
    • Scheduling
    • SEO configuration
    • Comment activation
  • Rich visual text editing tools
    • Media embedding (image, video)
    • Social embeds (Twitter, Facebook, Instagram, etc.)
  • Media management, import, and resizing tools
  • Tag management
  • Web and mobile push notifications scheduling
  • User, permission, and group management
  • Feature toggles (managed features) for selective functionality

Storm article editing interface

Storm Media Library interface

But then…

Taking a step back to leap forward

Damien: “We’re going live this week.”
Vincent: “Damien, I think we should migrate Storm to a framework.”
Damien: “Why?”
Vincent: “Let me explain our reasons—see the next paragraph.”
Damien: “How long will it take?”
Vincent: “Two or three weeks.”
Damien: “…”

The project had grown drastically, accumulating features until the codebase became a challenge for new developers to grasp and maintain.

To address this, we proposed migrating the project to the Next.js framework, and taking the opportunity to move Material UI from version 4 to 5, before the first production release. The choice was a tough one: release immediately and migrate later (knowing that different users would have different experiences—changes to routing, static rendering performance, etc.), or take the time to migrate to Next.js now and offer journalists a solid, future-ready tool from day one. We chose the second option.

In the end, the migration took about a month and a half. But integrating a framework like Next.js allowed us to simplify and standardize the code structure and application routing. We also substantially improved performance thanks to static rendering.

In early June 2022, the first production rollout went live, with features enabled gradually each week using a managed features system configured via environment variables. For example, the ability to create live content was only opened up at the end of June.

For posterity, here is the first article published and the first live published via the Storm interface.

And since a picture is worth a thousand words:

Feedback from 20 Minutes journalists on Storm

Beyond the skill of the development teams, this success came from the mutual trust built between 20 Minutes and Premier Octet. That trust allowed us to create a calm working environment, guiding us in the right direction—even during periods of uncertainty.

Looking to new horizons

Between 2022 and 2024, Storm has continued to evolve, delivering a richer, smoother user experience. Here are a few stand-out improvements:

  • Automatic save system
  • Editorial history tracking
  • Claude AI-powered editing assistance 🇫🇷
  • Multi-user editing for lives
  • Upgrades to the visual text editor
    • Video insertion
    • Podcast integration
    • Iframe support
    • Drag and drop
  • Content statistics dashboard
  • Interface to read AFP news wires
  • Home page administration for the newspaper

To infinity and beyond

One of Storm and Nova’s goals is to serve as “multi-brand” tools—meaning the applications can be configured to support different digital newsrooms. In 2023, we headed to Rennes and the Ouest France campus to kick off a new collaboration. The aim: enable their teams to manage their live content through their own Storm instance.

The project infrastructure was multi-brand from the start. We simply expanded our “managed features” to provide advanced customization for each brand (currently 20 Minutes and Ouest France). For example, Ouest France doesn’t use a label field in its content—a managed feature turns that field and its related business rules on or off as needed.

We also customized the Material UI theme to allow each brand to match its own look and feel. Essentially, this means changes to typography, logo, and colors—blue for 20 Minutes, red for Ouest France, and so on.

Conclusion

Working hand-in-hand with 20 Minutes and, more recently, Ouest France, we’ve built a tool that truly makes journalists’ lives easier, letting them focus on their core mission: informing the public.

Migrating to Next.js gave us a sturdy foundation for long-term performance and consistency.

Storm is now ready to face future challenges and continue serving journalists efficiently. The journey has been long and sometimes complex but ultimately rewarding, helping us achieve our main goal: to deliver a high-performance, innovative tool tailored for modern newsrooms.

© Vincent Desdoigts

Twitter

GitHub