Website for Broe Creative
What are we building?
Broe Creative, an Aalborg based video production company led by my good friend Kåre Broe, needed a new website to better communicate the company’s work to new and existing customers.
The journey that Broe Creative wished to lead their website visitors on had a simple path:
1. Make a light introduction of Broe Creative in order to set the stage and provide context.
2. Show off previous work with a focus on video (The centre-piece of the website)
3. Provide option to contact/start project dialogue
The website’s style should reflect the core values of Broe Creative, which among many included creativeness. This fact along with the website’s very structured and linear path gave us the opportunity to think out-of-the-box in regard to navigation.
We decided early on that the website should consist of only 2 pages; the front page and a cases page, where cases would be displayed. And since the path for website visitors was clear, we decided that the core concept of the navigation was to allow website visitors quick access back and forth between the 2 pages. Navigating should not feel like opening a new page but rather “peaking” the page in order to give the website a lightweight feel.
The above criteria meant the website should be fast in order to make it immersive.
How are we building it? (This will mostly be for the tech enthusiasts)
With a focus on making the website fast and making it immersive via quick navigation and animations, we opted for a modern technology stack based on Vue (with Nuxt for Server-Side Rendering) for the frontend, which would talk to a backend consisting of a Wagtail CMS API.
Vue + Nuxt provides speed on first-load (and SEO compatibility) by rendering the page server-side along with an immersive experience by hydrating the server-side response into a fully-fledged Vue single-page progressive web app in the browser. Vue was chosen over React and Angular due to its simplistic and robust API. In essence, it is easy to pick up, has a large community and works well with existing JavaScript libraries for animation etc.
By hydrating Vue into a single-page app in the browser, it became possible to create the lightweight navigation sensation that was desired – especially combined with a page transition, which creates the sensation of “peaking” rather than full-blown navigating.
Wagtail CMS is a great open-source CMS build on top of the very robust Django Web Framework. One of the reasons for choosing Wagtail is that it can run in “headless-mode” by exposing a Rest API, so the Vue frontend could connect to it. Additionally, the benefit of having a CMS that is built on top of a framework like Django is it has security out-of-the-box. It also keeps options open in regard to extending the scope of the backend application, since really any type of web app can be built with Django.
These are also the main reasons why a solution like WordPress was discarded since security is in many ways an “add-on” not a core function.
Wagtail also has an elegant and fast Admin dashboard, which focuses the user on the tasks that are essential and removes unnecessary extras, which improves the Quality of Life for moderators and Admins.
Why have we built it this way?
This project is the start of a collaboration between Broe Creative and I, where we try to push the boundaries of what is thought of as a “marketing website”. We have gone the extra mile to decouple the Data Administration (Wagtail CMS) and Data Representation (Vue Frontend) with the believe that purpose-built tools do a better job than the traditional CMS setup, where the CMS handles both Data Administration and Data Representation. We also believe that the effects of decoupling aren’t just felt on the website visitor side through faster load speeds and more immersive experience, but also by website administrators since the composition of pages is entirely removed. This means administrators can focus on creating content, rather than creating and designing web pages, which isn’t their strength.
The Vue Frontend also makes it easier to make the website into a progressive web app, which means among many things that the website will be available even when the website visitor is experiencing unstable network situations by caching pages for offline display.
What is to come in the future?
We aim to give the infrastructure of the project the same overhaul as the project itself.
The philosophy behind the infrastructure is to optimize cost by not running compute instances when they aren’t used, we also don’t want to manage infrastructure when it isn’t our strength and lastly, we want to have a very high service uptime even when traffic spikes. Which has to lead to below infrastructure architecture (WORK IN PROGRESS):
We aim to have a serverless infrastructure up and running in the near future. The backend will be built on AWS and consist of AWS Fargate to host the frontend and API, Aurora Serverless to host the database and S3 for storage. In regard to caching, we have still not decided whether to use ElastiCache for the API or let CloudFront cache API and storage responses.