Royal College of Art Work in Progress 2021
Website: https://wip.rca.ac.uk/
MTJ.io built upon their knowledge of the Royal College of Art 2020 degree show to create a website for the Work In Progress 2021 show.
MTJ.io worked with Platform 3 on a project managed by Unthinkable. MTJ were primarily responsible for the frontend of the website as well as working with the students who designed the website. However MTJ also researched and developed efficient methods of uploading, storing and serving the huge amounts of image data required for this website.
The biggest challenge moving on from the summer degree show (which can be seen here: https://2020.rca.ac.uk) was to streamline the way images were uploaded, stored and served. MTJ chose to use GatsbyJS for both the previous summer show and the 2021 WIP show. GatsbyJS is very fast and also archivable, there are many reasons why its a good fit for this kind of site, but at this scale there are challenges.
Gatsby is fast because it builds a static site (which then rehydrates to a React app). To create a website for just under 1000 students, each with many images (not to mention all of the other editorial articles on the site) we had a huge challenge. A custom backend was created by Platform 3 and we used Sanity.io for the RCA editorial pages. All of this gets combined in the build to create the frontend. The really hard part is dealing with the images. We had around 11,000 student images in the summer show and we allowed very high resolutions, the nature of the site required it be high quality.
An efficient way of dealing with images is to let Gatsby create multiple versions of each image at different sizes, so usersare only served the optimum one for their browser, this is one of the main reasons why Gatsby is so fast. But we started to hit the limit of what Gatsby could do, build times got too long. We solved this last year by using Cloudinary to store all of the images, however at the time the best way for us to do this was to upload at build time to Cloudinary. This worked well, build times were within acceptable limits, but we felt there could be improvements.
After the 2020 degree show MTJ had a number of meetings with Gatsby around performance and how to tackle this kind of website, Gatsby were very interested in our fairly unique situation and have been really keen to talk to us about it. We started experimenting with different ways of serving the images and integrating Cloudinary with the backend. During the development process for the 2020 summer show we suggested various fixes to optimise the Cloudinary plugin and suggested changes to the Cloudinary maintained software to improve how it integrated with Gatsby (these were integrated which helped us and others). We found that by winter 2020 there were further developments that allowed us to easily upload to Cloudinary directly on the backend and serve those images from Gatsby on the frontend.
We now had a website that builds incredibly quickly, meaning students can upload their work and see preview versions in Gatsby in a matter of seconds, not minutes, using Cloudinary and Sanity for images, Algolia for search and a rapidly building Gatsby site for everything else.