I'm Matt

Nota wanted to allow their users to create short videos based on AI generated content. The ask was for the editor to be kept simple, with some pre-built templates, to help editors get their short reels out fast. Achieving this required a few moving parts.

Firstly, I created an API that consumed a JSON schema which represented the video. This described things like animation keyframes, when elements should appear and be removed from the scene, etc. We managed to develop an API that was incredibly flexible and was able to accomodate a wide range ( and ever growing! ) list of videos, each with different complexities around animation, timing etc.

The API supported the front end studio, which exposed limited functionality to editors to streamline the video creation process. Things like changing templates, updating colours, rewriting text etc. Most of the complex animation decisions were hidden from the users to streamline editing. Once users had perfected their video, this was passed to the API, with the video now represented as JSON, and the final output was rendered on the server and made available for the user to download.

Nota wanted users to quickly and easily create a video based on long form content. It was a big ask. The idea was to allow journalists and publishers to provide an article they had written and auto-magically turn that into a video.

We managed to achieve this by connecting a variety of services. After ingesting the content, we used AI to analyse the content and build the story line. The storyline was used to create images with a diffusion model ( e.g. Dall-E, StableDiffusion, etc ), or we'd use images provided by the user. All of that content was then transferred to a video editing studio where users could fine tune their video and render the final output in a variety of aspect ratios, for distribution across multiple platforms ( i.e. YouTube, TikTok, etc ).

The Doe's mission was to break echo chambers and challenge its users with unique perspectives. Part of being able to do that was to surface content to its users that they may not otherwise read. And to achieve that, we were tasked to build a recommendation engine.

Firstly we used NLP to analyse each article and expose the underlying values present in the article. This analysis was provided by a third party API. Once we had the content analysed we gathered similar information from our users. This was primarily done through a short quiz that users could take where they provided us a mix of multi-choice and free-text responses. We'd also keep track of their reading history and preferences.

With an analysis available from both our users and our content, we were then able to create an engine that surfaced content that both challenged and supported our user's reading preferences. We'd suggest articles that were specifically highlighted to challenge the user, as well as suggesting articles that supported their views.

These recommendations were all made available via an API and were displayed on the user's dashboard.

Gust is a Tailwind CSS theme for WordPress that allows users to build pages using a drag and drop page builder without having to have knowledge of how Tailwind works. It supports components, templates, dynamic data, etc and keeps track of what class names are being used to create super snappy websites.

This project had two main layers. Firstly there's the page builder, built with React and TypeScript. Users need to be able to drag and drop, edit content, save components, there's a huge amount of functionality that goes into making this piece of the project work as intended.

The page builder also needs to compile the output from Tailwind on the fly, as the user is editing the page. If they add some content in with a new class, we need to be able to display the update correctly. To do this, I decided to use Web Workers. The Tailwind CLI is bundled into the app and provided as a web worker, but to make it work correctly a few packages have to be substituted, as Tailwind generally expects to be run within a Node.js context.

The second main layer is the WordPress/PHP piece. Ultimately, this is being run in a WordPress environment and needs to support all the features that users and developers would expect from a typical WordPress theme. This means supporting custom templates, providing appropriate hooks, etc.

Take a look at the Gust website for more info.

Nota provides AI tools for publishers. I was the lead developer tasked with making those tools accessible to their users. This meant wearing a variety of hats, but most common was building the APIs to support the functionality they needed, as well as building the corresponding UI.

I worked very closely with product and design to ensure that what we were building would work the way it was intended to, and to help guide product and design toward development best practices.

In this case the web app did not need to be SEO friendly, but we still built with a focus on semantics and accessibility best practices as these generally end up resulting in a better overall experience anyway.

Content was restricted to paying users, so we integrated with Auth0 to ensure that only members could only access the parts of the app that they had been granted access to.

The Doe wanted a publication website where users could read verified stories published by anonymous authors. For the most part this was relatively straightforward; we migrated an initial Vue/Nuxt project to React/Next, content was pulled from a CMS ( Prismic ) and most of the content was statically generated using Next's static generation functionality.

Some complexity was introduced with membership. Users needed to be able to sign up and pay what they wanted on a recurring monthly membership. We integrated with Stripe to do this. Then content was gated depending on your membership type. Free users could read n articles a month, while paid users had access to more, along with other benefits.

Paid users could also make use of "insights", which was the recommendation engine we built. These were displayed to the user on their user dashboard, a dynamically rendered page that showed information specific to the user.

Articles were indexed in Algolia and that powered our search. We chose to implement our own search UI as The Doe had a very specific brand guideline.