illuminem

In July 2020, the illuminem team approached us to make their idea a reality. The idea was to create an energy news aggregator: a platform that groups the latest news from the energy industry.

They had already built an MVP (Minimum Viable Product) with Wix and managed to get thousands of subscribers to their newsletter and enough user feedback to validate their product idea.

The goal now was to turn this MVP into a fully-fledged product.

View live websiteilluminem homepage

Tech stack

Framework

Next.js's logoNext.js

Library & Languages

React's logoReactJavaScript's logoJavaScript

Headless CMS

Sanity's logoSanity

Deployment Platform

Vercel's logoVercel

Crawling the latest energy news

In our research phase, we decided to rely on energy-related RSS feeds to get the content.

Since RSS feeds follow a specification, getting reliable energy-related posts that have a title, date, description, and image shouldn't be challenging.

Unfortunately, that wasn't the case. When we gathered a list of RSS feeds that contained posts about the energy sector and filtered out the ones that didn’t have images, we were left with just a couple of sources. Some of these sources had tiny images, which looked very blurry on the website.

To fix that, we implemented an image crawler that gets the posts' images from their web pages. This allowed us to get data from 14 different sources.

illuminem info sources
Modal illuminem

Categorizing posts

Getting posts and displaying them in a one-pager with infinite scroll was never the goal. Our posts needed to be somehow categorized based on their content types and the topics they cover.

illuminem’s data scientist implemented an API that uses machine learning to ensure each post includes:

  • Industry-related categories (e.g. Oil & Gas, Sustainability)
  • Tags (e.g. Innovation, Geopolitics)
  • Content format (e.g. News, Video)

Curating the content

Content managers at illuminem now can curate content by having an interface where they:

  • Add, delete, and edit posts.
  • Add collections of posts by setting their titles and filters (content format, categories, tags, and a limit on the maximum amount of posts).

To make that possible, we designed an architecture that revolves around a headless CMS as the single source of truth.

After evaluating several CMS providers, it was clear to us that Sanity was the best fit for illuminem.

The architecture is simple:

  • When the crawler fetches posts and labels them, they are published to the CMS.
  • In the CMS, content managers can edit posts and even add their own.
  • The illuminem interface (frontend) fetches the data from the CMS.
Data workflow illuminem

Interface

The interface of illuminem is a full-stack web application built with Next.js and deployed along Sanity CMS on Vercel.

Why Next.js? To keep it short:

  • The more static a page is, meaning that it doesn't get new data from a backend everytime you request it, the faster it will be.
  • We weren't sure how dynamic our pages would be, so we went ahead with Next.js because it supports both static and dynamic pages.

From collections to carousels

We wanted to use titled carousels to display post collections, so we built a reusable carousel component to be:

  • Responsive
  • Customizable enough to fit our designs and animations
  • Performant to not cripple our application speed

We've embedded it below so you can interact with it:

Sorting the data

Some of our data sources were more reliable than others, so we took that into account when displaying posts.

To assess how relevant a source is, we created an order value ranked from 1 to 10 (1 being the most relevant).

The order value was directly created from the CMS so the content team could add new sources and rate how relevant they are.

Add content to Sanity on illuminem

Blog

The illuminem team wanted to have the ability to write posts about the energy industry and have guest writers too, so we created a blog section.

Blog page illuminem

We also integrated a rich text editor (similar to the one on Medium) to format the text directly in the CMS.

Video poster

Tracking posts and blog trends

To make it easier for users to view the most popular content, we tracked post clicks and displayed a "Most Trending" section on each page.

Carousel top trending illuminem

Embedding tweets

The illuminem team wanted to share their Tweets on the website.

To our surprise, Twitter embeds took too long to load and it was quite hard to customize their look to blend in with the website design.

As a solution, we ended up fetching the Tweets' data manually and building their UIs from scratch.

Tweets illuminem

Performance

By the time illuminem website was ready, the performance was poor.

The website would take around 4 seconds to load regardless of the WiFi connection speed.

This was no surprise considering that on each page load:

  • We were making very heavy requests to the Sanity CMS to fetch dozens of data collections.
  • Some pages had 15 carousels, so even when their data was fetched, the browser still needed some time to render all of them.
  • These carousels could have up to thousands of posts.
  • Images take time to load and the website contained plenty of them.


However, choosing Next.js and Sanity paid off and we were able to use their capabilities to turn that around with a series of improvements.

You can find more details in this article we published.

We test our performance with Google Lighthouse and simulate a slow connection on old mobile devices to see how fast illuminem loads under the worst conditions.

As a result, we reached a performance score of 94 on Lighthouse when a user opens illuminem for the first time on a slow connection, and 98 on subsequent page loads.

We also made pages take only 2.3 seconds to load for the first time and 1.3 seconds on subsequent page loads.

Performance illuminem

A particular note is for their front-end skills. The platform performs at cutting-edge levels in performance (1.3 seconds to load the heaviest page), SEO (lighthouse score of 98%), accessibility, and responsiveness (mobile is particularly excellent). After product validation, our users were amazed by the UI/UX design, something looking "professional, even better than dominant incumbents in the market.

Accessibility, SEO, and best practices

To be a true hub for energy information, illuminem has to be accessible to everyone, regardless of one's impairments.

It's also important that illuminem follows the best coding practices and SEO guidelines to rank well in the Google Search Engine.

In the end we were able to reach the following scores:

Great company to work with. They possess outstanding design, content creation and technical skills, while also having very useful perks, like a strong project management attitude, and providing advice and insights on how to make the product better.

Outcome

We're glad we've created a platform to keep energy enthusiasts up to date with the industry.

It was a great experience to collaborate with the illuminem team and bring their vision to life.

More work