The Shang Review

In August 2024, I started working on the website for The Shang Review, a London-based publication created by my good friend and fellow Guernseyman Ben Lewis, which would act as a home for online articles, media and print editions.

The Vision

When we first discussed the requirements for the website, it was clear to me that this was going to be a primarily content-driven site that needed to have low upkeep cost, and most importantly, be;

1. Simple
2. Accessible
3. Quality-driven

The Technologies

The tech stack that I decided to use was a blend of JavaScript technologies, some of which I was familiar with in the past, and some of which I had completely no experience in whatsoever, but was keen to adopt as it looked like my professional environment at the time was heading in that direction.

Sanity CMS

I had heard a lot of good things about Sanity, which is a headless content management system. What this means is that first and foremost, it is a content repository, which allows the content of a website to be completely separate from the templating and structure that surrounds this content.

This may be confusing to understand, but the huge advantage of this is that, as a developer, I don't need to worry about constantly changing the site from my end when any users would like to make any content changes, as the content is delivered to the site from an external source.

What the headless refers to, in this case, is that the content is completely different from the presentation, and is accessible through an API.

One of the great unique draws of Sanity is that they offer you a free and configurable database, which you define the stucture by using JSON-format objects, which gives an incredible amount of flexibility.

This was a good fit, as it could fit anything I needed it to, and the free tier is generous, and covered every necessary requirements.

Astro

Astro is a Javascript framework that I had familiarity with from my professional employment. It's very lightweight, and is often used to generate static sites, which means that when the site is built, it will query against the content in Sanity (in this instance), and load that into unchanging files, which are then hosted, which is extremely quick to load as it does all of the hard work before the site is hosted.

I chose this mainly as I was familiar with what the framework could do, and also because I knew the hosting would be free and easy.

The Execution

It took off-and-on work from August to October (between a full-time job and holidays) to produce the Shang Review website, which went live properly in October.

It was built based off of mostly hand-drawn sketches of pages and content types (e.g. Interviews, Reviews, Stills, etc.) that Ben provided, with an Agile approach to development.

I built all the markup and styling myself, without using out-of-the-box styling, and using a combination of Astro and SCSS. All of this was done with the Sanity CMS in-mind to produce the content-driven site we were looking for.

Both the test (preview) site and the live site were hosted for free on Cloudflare Pages.

Results

All our work culminated in the site that you can see today on shangreview.com. I am very proud of what we created together, especially when working with the requirements, and therefore boundaries, we set ourselves, which the site holds true to. Mostly.

So lets go through the points one by one:

1) Simplicity

Due to the site only having one (busy) developer, and one (very busy) designer/point of contact (from the developer perspective), simplicity was a necessity in order for the scope of the site to not balloon out of control, and also to not cause the site to be high-maintenance in the future.

Ben and I worked together to set these requirements very early on, and we stuck to them closely, for the most part.

There were a couple of things that fell out of the initial scope (i.e. I hadn't anticipated from the get-go), such as the ability to print the page to a PDF file (for offline viewing), and the option to include audio, but these provided a good challenge, and I was happy with how they turned out, even despite the PDF page printing being a massive pain to do.

2) Accessibility

We both knew from the get-go that the mobile version of the site was going to be critical for the site's success, so in development, I placed special care to make sure that the site works just as well on mobile as it does for desktop.

From a WAI-ARIA point of view, i.e., the accessibility (a11y) standards put forward by the World-Wide-Web Consortium (W3C), I made special consideration and put a lot of attention into complying to these regulations. It's not perfect, but partly in thanks to the simplicity of the design, it's quite good, which has led us to achieve a score of 100% and 96% for accessibility (according to Google's PageSpeed Insights) for desktop and mobile respectively.

3) Quality

For the most part, I think that the end result is a very quality product that has been thoroughly tested, and achieves all of the things it set out to do, but I think that it still can improve in some areas.

It's easy to criticise your own work, as you know about all the flaws and bad decisions made throughout the process, but there are certainly some things I would do differently next time, which I think comes down to experience. This site is the first one I developed completely of my own accord from start to finish (which felt very freeing!), but going back and reviewing the code, there is room for improvement, which I think is a positive thing to say because 1) it's nothing major and 2), it proves that I am getting better.

Retrospective

So what have I learnt from this project, what technologies would I use again, and what would I have done differently?

To start, I would have chosen a different front-end framework. Although it suited this site quite a lot, I feel that Astro lacks the features that a framework like Nuxt boasts, which at the start of this project, Nuxt would have been unfeasible to use, as I didn't have any experience with it, but now, I think that it's a hugely more flexible technology, that offers so many useful features that it completely trounces Astro.

I also really regret statically generating the site, as I think it's caused more problems than the good performance has generated benefits.

However, the CMS choice is brilliant. I really like using Sanity and working with it, and the free tier is perfect for small sites (such as the one I am writing this review on!) and for something like The Shang Review. I only wish that I knew more of it's advanced features, which I aim to harness in future updates to the site!