Case study - Hotel Radio, a JAMstack website built with Gatsby JS

By Max Ikäheimo on 22 November 2019
Last edited on 04 December 2019
JAMstack
Blog image

Building the Hotel Radio website

Hotel Radio is a UK based streaming platform for Heavy Music shows and live streams where Heavy music fans are able to watch live streams and archived live recordings of shows by heavy metal music bands. Hotel Radio captures and organizes live recordings of these shows played in venues mainly in the United Kingdom and London area. Currently Hotel Radio streams live to Facebook and Youtube. These live streams can be now seen on their new website.

While team Hotel Radio previously had a website, it didn't quite fit their current requirements for live streaming and archiving massive amounts of shows and related content. They soon recognized a need for a tailored website or a web app to support their increasing demands regarding their platform. Hotel Radio wanted to improve the live streaming and heavy music experience for their audience by offering a streaming platform that was dedicated to their audience.

Hotel Radio was having successful live streams on a regular basis and the number of active users watching the streams were up to 500 people per stream. Regardless there were some problems with their streaming stack. One of the key problems was that all of their users and fans were scattered out across different social media platforms.

This raised an opportunity to bring all of their users to one place and enable the foundation for a dedicated platform.

We need to be able to direct all our users to a single platform. - team Hotel Radio

Hotel Radio Case study figure 1

As they began to refine their vision further, Hotel Radio soon realized they would have to build a new platform from scratch based on their current requirements to provide high quality live streaming and heavy music experiences for their audience. Ultimately, Hotel Radio had the following key requirements for their new streaming platform:

  • Custom tailored website to enable custom functionality for their specific needs

  • Allow further development of new features in the future with ease

  • Easily manage the site and the related show data

  • Content management system to enable easy non technical editing and content management for the Hotel Radio team

  • Integration for multiple supporting services and APIs such as email marketing automation on Mailchimp and a possibility to add payment services like Stripe in the future

  • A way for their audience to sign up and sign in to view their archived content on the website

  • Display exclusive content only accessible by signed in members

We saw this as a great opportunity to test our JAMstack expertise and processes in a larger website project. - Max from Ikius

These requirements laid the foundation for what is now the current Hotel Radio website.

Technical requirements

We needed to choose the selected technologies used in the production of the website with consideration. As our team at Ikius began to plan the implementation of the Hotel Radio website in practice we noted a few important non-functional requirements that needed to be met.

  • The website needs to be able to have a lot of media items such as images and videos without them affecting the load times of the website

  • The website needs to handle unusually high traffic spikes when the Hotel Radio team is doing live streams, targeted traffic from social media platforms and other marketing without it affecting the speed or functionality of the website

  • The website should be easily scalable due to the nature of Hotel Radio's business model

  • The system should be able to demonstrate changes made in development to the Hotel Radio team in real time to enable agile and dynamic development based on their feedback and notes

  • The website should be secure and easy to maintain due to the fact that it was going to have an authentication system for Hotel Radio members

While these requirements might seem obvious, countless websites and web apps fail to meet these simple requirements due to the fact that the development process is usually agile and dynamic. Other major reason why most moderate cost websites and web apps fail to meet these criteria is because the technical stack (ie. Wordpress) simply cannot meet these technical requirements within the budget.

Hotel Radio's website and platform needed to be fast. It also needed to have a lot of images, videos and other media. Slow loading times lead to failed conversions and high bounce rates. This is something we wanted to avoid at all costs. We also wanted the website to withstand large amounts of traffic at any given time.

It was not an easy task given that there was a lot of dynamic content and huge amounts of media items like images and videos. - Max from Ikius

This is why we chose to go with the JAMstack architecture and utilize static site generators to generate truly static content to be delivered from a CDN so the website could basically have as many visitors as they want. This would also ensure that the whole system stays easily scalable and maintainable.

Laying the foundations with the JAMstack and Gatsby JS

The reason we chose the JAMstack for the architecture is simple, it provided us with a flexible, fast and powerful way to develop a truly modern website in a fast paced development schedule. For implementing the JAMstack in practice we used Netlify to provide the content delivery, CI/CD and a few other things we're not gonna mention in this particular article. Netlify is particularly useful when you need to reflect your development directly to your client for almost instant feedback in a CI/CD kind of manner. Below you can see a crude model of the Hotel Radio JAMstack architecture.

Hotel radio case study figure 2, architecture

Gatsby JS was chosen since we are highly experienced with it, it's developer friendly and it's powered by React. React allows dynamic and agile development among other obvious perks which make it a very attractive option as the standard static site generator for us at Ikius. Also, we chose Gatsby since it has become increasingly more popular and supported. This makes it even more future proof than it already is. And last but not least, Gatsby is super fast.

As for the CMS part we chose Prismic.io since it has probably one of the best user interfaces for non technical users. It is also fairly moderately priced when compared to other similar headless CMS providers such as Contentful. Prismic has it's limitations but you can do almost everything you need to do with it. On a side note, there are some very annoying (lacking) features which can make the developers work much more painful. See this blog post from Prismic (I highly disagree with them on this): https://prismic.io/blog/required-fields

Authentication with Auth0

Nowadays (or ever) it's not wise to build authentication services from scratch since there are easy and affordable services that can be used to handle all authentication services. For the Hotel Radio JAMstack implementation we chose to go with Auth0 which provides all the services needed to authenticate and manage users for Hotel Radio.

Auth0 is also fairly easy to implement with Gatsby JS which made it a nice choice for authentication. By using an authentication service we cut the development time and costs for the authentication to approximately one third of the costs compared to other authentication implementations.

Hotel Radio sign in

When using Auth0 we observed the following major benefits for Hotel Radio:

  • Significantly reduced the time to market with the Hotel Radio website

  • Major reduction of the development time for authentication (approximately 66% less time spent on authentication)

  • Increased security by outsourcing authentication services

  • Better maintainability

  • Easy user management

Auth0 really cut the development time of the authentication services for Hotel Radio. - Max from Ikius

The product delivery

By leveraging the full power of the JAMstack, team Hotel Radio was able to deliver their website and streaming platform quickly with a successful launch reaching up to 350 registered users in the first days after the launch.

Team Hotel Radio was able to deliver their new website in approximately 1,5 months of development time, within their budget and within their schedule. All this done by a single developer, an excellent tech stack and great team work between team Hotel Radio and Ikius. Since the website is fully static, built on the JAMstack architecture and served from Netlify Edge CDN the site can serve hundreds or even thousands of concurrent users without any effect on the performance of the site.

To summarize it, since the launch of the Hotel Radio website we've seen a number of positive effects on Hotel Radios business

  • an uptime of 100%

  • significant increase in the users visiting their site

  • More of Hotel Radio's audience now watch Hotel Radio live streams directly on the website

  • Almost 400 registered users after the launch and growing

  • Increased brand identity trough a high quality product and service

Hard data

Below you can see Google Lighthouse audit metrics with applied Slow 4G and 4x CPU slowdown. These results are extraordinary when taking the large amount media like images and videos into account.

Hotel radio case study figure 3, lighthouse performance

Hotel Radio also scores a near perfect score for Hotel Radio's website on testmysite.io which is a tool by Netlify which rates your site based on its initial global load times and its security settings. You can view the full report here.

Hotel Radio Case Study figure 4, testmysite.io

Conclusion

As said by team Hotel Radio the project exceeded their expectations and delivers more than they could've ever imagined. At Ikius we also find this project and case Hotel Radio to be highly successful in regards of the budget, project delivery schedule and product launch.

The new Hotel Radio website exceeds our expectations and delivers more than we could've ever imagined. Our next goal is to reach 10 000 active users on the Hotel Radio streaming platform.- team Hotel Radio

We're looking forward to more cases like these where we can gather more metrics and data about JAMstack websites and to see how they can help our clients to create better products and services.

See Hotel Radio in action here!

Share this article

An article by Max Ikäheimo
Author image