Code and Theory took on the task of completely overhauling Copa90's online presence - extending the company's offering from beyond their YouTube channel beginnings, to a video driven fully fledged editorial platform, with deep rich and social media integrations, and content personalisation.

The core idea revolves around a feed based consumption model, which allows users to easily immerse themselves in endless taxonomy driven content streams.

The site is a hybrid server / client app - critical content and markup is rendered on the server, and then is progressively enhanced in to a fully single page application on the clientside. The frontend is a Backbone / Marionette app, which uses a combination of view markup scraping over AJAX and a RESTful API to render the site post the initial page load. The backend / CMS is WordPress, making heavy use of WP-REST for communication with the frontend.

The site is hosted on AWS - using Elastic Load Balancer to distribute traffic to an autoscaling group spread across multiple availability zones. Varnish is used for HTTP caching and memcache is used as an in-application memory cache. The database is MySQL RDS, and static assets are hosted on S3 and served through Cloudfront. The CMS also uses Lambda for deferred image asset manipulation and optimisation, communicating with the CMS via webhooks.

My role as technical director was to design overall technical architecture, including frontend app, CMS and FE / BE integration points, as well as the infrastructure architecture. I was also responsible for managing the day-to-day development tasks of the geographically distributed development team. In addition to this I took on some of the intricate frontend development tasks, such as the intelligent feed injection logic detailed below.

A key feature of the site is it's feed driven nature. In order to achieve the infinite scrolling, taxonomy based experience, we designed a comprehensive REST API to allow any combination of taxonomy queries to be rendered as content feeds on the client. As the site was built as a single page application, we could upgrade the feed management logic on the client to track a user's exposure to certain content items, and intelligently inject promoted or related content, using parameters which were entirely configurable in the CMS.

The site utilises multiple social media integrations in order to allow editors to seamlessly ingest content from Twitter, Instagram or Facebook, assign taxonomies as they would do to owned content, and redistribute around the site as part of the taxonomy driven feeds.

We also created a custom Vidible video player integration to enable Copa90 to use their video platform of choice, and move away from their dependence on YouTube.

The site allows user to create an account (via Twitter, Facebook, Instagram, Google+ or email) in order to save articles, subscribe to topics and receive content recommendations.

We built a sophisticated account management interface which allows users to select and prioritise their favourite teams, leagues and countries. We then used this information to serve content recommendations both in the user account section of the site, as well as interspersed through the feed content across the site using the feed injection logic outlined above.

Credits

• Client
• Bigballs Media
• Agency
• Code and Theory
• Executive Producer
• Zelda Gulledge
• UX Director
• Tung Shing Wong
• UX Designer
• Clara Avila
• Associate Creative Director
• Tomi Lahdesmaki
• Designers
• Ross West
• Andras Oravecz
• Technical Director
• Neil Carpenter
• Lead frontend developer
• Alex Coady
• Frontend developers
• Dine Albrecht
• Philip Bulley
• Backend developers
• Albert Rosete
• Farez Ramilo
• Jomar Allan