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.
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.
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:
Content managers at illuminem now can curate content by having an interface where they:
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:
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:
Deciding between Gatsby and NextJS? Remember:
— Tinloof (@Tinloof) September 5, 2020
- There's nothing you can build with Gatsby you can't build with NextJS. The opposite is false.
- Gatsby is more convenient to access data from different sources through its plugin system.@GatsbyJS #Nextjs #reactjs #100DaysOfCode
We wanted to use titled carousels to display post collections, so we built a reusable carousel component to be:
We've embedded it below so you can interact with it:
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.
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.
We also integrated a rich text editor (similar to the one on Medium) to format the text directly in the CMS.
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.
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.
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:
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.
“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.”
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.”
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.