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.
Hotel Radio needed to direct all their users to a single platform.
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.
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.
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.
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.
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
Easy user management
Auth0 can really cut the development time of the authentication services for Hotel Radio and decrease the time to market by at least 50% in apps that require user authentication.
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 through a high quality product and service
Below you can see some metrics about the new website. These results are extraordinary when taking the large amount media like images and videos into account. We did not focus on the accessibility on this project due to the scope of the audience.
Google Lighthouse audit metrics with applied Slow 4G and 4x CPU slowdown:
Not bad considering how much media items there are!
Hotel Radio also scores a near perfect score for the website on testmysite.io. It 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.
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.
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.