Hello, my name is Nils, and I am currently the software engineer at Radio AF. I'm thrilled to finally launch the new radioaf.se website after almost a year of development. In this first post, I'd like to share how the website was created and give an overview of how it works.
Early this year, I, along with others in charge at the radio, decided it would be best to build a new website from scratch. This decision was made due to the old website's many flaws, which I have tried to summarize in the following list:
These issues made it a bad investment of time to keep working on the old website as it had a high technical debt whilst not functioning as desired. Once we decided to build a new site, we started by outlining the requirements for it. Based on the requirements we decided on a tech stack for the website and started development.
The development phase of the project took the longest, primarily because I was the sole developer working in my free time. Throughout the entire process, I received both practical help and words of encouragement from members at the radio, for which I am very grateful. Their dedication and interest were essential to the website's completion. This project has also been a great learning experience. It gave me the opportunity to make large technical decisions and taught me a lot about modern web development, thanks in large part to the great open source communities behind Next.js and Payload CMS. I’ll talk a bit more about the website's technology in the next section, so keep reading if you want to learn how the website works.
The website is built using the Next.js framework with TypeScript as the programming language and modular CSS for styling. TypeScript has been an excellent choice for such a large project, but if I were to start development over, I would probably choose SCSS for CSS handling. The website has both a frontend and backend, running on the same self-hosted web server using Coolify. The website is self hosted instead of using Vercel because the backend is too demanding to run on Vercel's serverless functions, and self-hosting is much cheaper. The web server communicates with two databases that store all the content on the site. MongoDB is used for text, and Supabase S3 storage is used for heavier files such as audio files and images.
An important part of the website is our backend, or Content Management System (CMS), where all the content displayed on the website can be created and edited. This content is stored in our databases and can be automatically displayed on the frontend. For example, I am currently writing this post using our CMS. The CMS chosen for this project is Payload 3.0. It was chosen due to its integration with Next.js, as well as the flexibility and functionality it offers. Especially for a Next.js app, the advantages of using Payload instead of another CMS like WordPress are many. In this video some advantages of using Payload instead of WordPress are outlined.
The website generates optimized static pages with content from the databases, except for the backend and search pages, which are too dynamic to generate ahead of time. This occurs through a process called Incremental Static Regeneration (ISR). It combines the benefits of Static Site Generation (SSG) and Server-Side Rendering (SSR). ISR works by pre-building static pages during the build process, similar to SSG. However, it also allows for dynamic updates to these pages without requiring a full rebuild of the entire site. This allows for a low server workload and fast response times (SSG benefits), as well as the ability to handle dynamic updates to the pages (SSR benefit).
Finally, I want to thank everyone involved for their trust and support throughout the entire process. A special shoutout goes to everyone in a managerial post at the radio during this and the previous term, especially the station managers and tech team. I also want to thank everyone that contributed content (images and text) to the website, which has been a great help. A final thank you goes to all radio members who voted me in as the software engineer and patiently waited for almost a year for this new website.
Click around, listen live, explore the shows, and read anything you want to — I hope you can have a nice relaxing time on Radio AF’s new website :)
P.S. Our broadcast is temporarily down due to our move, but we’ll be back live starting February 10.
