Mar Albà · Evolutionary Genomics Lab

Obtaining a European Research Council Advanced Grant in 2022 was a milestone achievement for Mar Albà’s research group — and likely one of the reasons they decided to revamp their previous WordPress websites.

In this project we were able to develop and deploy our preferred solution for small websites: a tailored data architecture built on an open-source headless CMS, served via serverless hosting.

Thanks to the technical facilities of the Lab, both the back-end and the front-end of the site are self hosted and manteined.

relational content

The content of a scientific research website typically revolves around a few key elements: research lines, scientific publications, team members, and news or updates.

One of the main advantages of adopting a custom data architecture — as opposed to using a generic CMS — is the ability to model and enhance the relationships among these sections. This not only streamlines content updates but also makes it easy to maintain consistent, interconnected information. For example, a publication is usually linked to one or more research lines, and its authors are often current or former members of the research group.

By maintaining well-structured and interrelated content, the navigation experience can be significantly improved. Users can easily filter publications by research line, explore detailed profiles for each team member—including their contributions and collaborations—and access contextually relevant content throughout the site. This relational approach not only benefits site visitors but also simplifies content management for administrators.

tech stack

Headless solutions like Strapi instantly provide a reliable CMS for any custom data architecture and can handle almost any type of media content. The resulting data is made available to the front end through a flexible API.

As we often do, the front end was developed using Nuxt.js — a powerful Vue-based framework that offers great performance, built-in routing, and seamless integration with headless APIs.

a touch of poetry

In every project we take on, we put great effort into revealing what the published information is really about — because, believe it or not, it often remains hidden behind what’s shown on the screen.

Computational Genomics often deals with codons — three-nucleotide sequences within mRNA that serve as the fundamental units of the genetic code. Each codon corresponds to a specific amino acid. For instance, the codon AUG codes for methionine (the “start” signal for protein synthesis), while UUU codes for phenylalanine.

For this project, we used a randomly generated DNA sequence (from this generator) to simulate the process of protein synthesis on screen — reading codons one by one, waiting for a start codon (AUG), and adding each corresponding amino acid to a virtual chain until a stop codon is encountered.