Case Studies

A new Nuxt website + custom video on demand SPA - in just 9 weeks

Screenshots of pages in different sizes and themes

1. The Situation

SQLBits is an industry-leading UK conference that has attracted thousands of data professionals since 2007.

Their existing website was created with a site builder tool that churned out a brittle and slow boilerplate site that the content team struggled to update.

SQLBits is a much-loved conference with a big personality that needed to be reflected in the design.

They also own an incredible video library of thousands of high-quality recorded sessions that they had merely honked onto the web in the most uninspiring way imaginable.

Blackspike was hired to reimagine, redesign and redevelop

A screengrab of wireframes from Figma

2. UX design

We love Figma for creating low-fidelity wireframes.

It provides interactive prototyping and inline comments, allowing the brilliant SQLBits content team to easily and asynchronously discuss feedback in situ – essential for remote collaboration.

We collated the content and requirements and sketched out the key pages and functionality hand in hand with the client.

Once everybody was happy, we could flesh out the wireframes into hi-res mockups, all within the same tool.

Light mode VoD player
Dark mode VoD player

3. Design

We produced a lean design that enables the content team to deeply customise the graphics and colours.

As the conference theme changes every year, it was a major requirement to give the client complete control over the look and feel – in both a light and dark mode.

A sitemap of the Nuxt application showing relations between components and pages

4. Backend

The SQLBits team were familiar with WordPress and keen to use it as the content management system – they generate a ton of articles and static informational pages.

The session, video and speaker data is stored in their own Azure database.

This meant that we could access both content and data with GraphQL, thanks to the Data API builder for Azure Databases, WPGraphQL and the Advanced Custom Fields GraphQL extensions for WordPress.

We also developed a bespoke WordPress plugin and some WordPress Blocks to extend the editor functionality, letting us create and pluck out super granular pieces of custom data wherever we needed it.

The decoupled nature of this allows us to use a staging content site and easy deployment with GitHub Actions.

5. Frontend

If this was a content-only website we probably would have chosen Astro to build a simpler site, but as we needed to build a full-on Video on Demand single page app, Nuxt was the more mature SPA framework.

Also, the client was keen to host the site on Azure Static Webapps – which has great support for Next and Nuxt SSR, but as of the time of writing only static site generation for Astro.

With Nuxt 3, in a single project, we could use server routes to create a content API, the static pages and the video app, all seamlessly interconnected. We were delighted with the overall developer experience.

6. Video on Demand

As mentioned, SQLBits has a fantastic database of video content. All of it tagged and categorised with relational metadata such as speaker bios and photos.

Our custom Nuxt video app resulted in a YouTube-like experience, enabling on-page filtering, searching and surfacing of related videos, along with the flexibility of displaying videos hosted on YouTube or Azure Media Storage, with the description, speakers and metadata agnostic of the source.

7. Satisfied clients

We designed, built and launched the entire project on time and on budget – in just nine weeks.

As with all web projects we produce, we place enormous emphasis on quality, SEO, accessibility and performance. SQLBits scores between 95-100% on all the Google PageSpeed metrics.

The content team are delighted with how easy it is to update, and the founders were thrilled to drag their content into the modern era.

Working with blackspike has been absolutely brilliant. The process of redesigning the look and functionality of the website allowed us to vision how it would work and feel before committing to the build, the build itself was quick and smooth with regular updates, and the loading of content which can always feel like a daunting job was significantly speeded up with blackspike’s help.

We loved that blackspike often brought their expertise to the table, rather than just doing as instructed. The website we’re left with is absolutely outstanding, quick, fun to use, easy to navigate, great looking, and tonnes of functionality we wanted. Very pleased to be working with blackspike on an ongoing basis on other projects.

– team