Sensei and The Geek front page screenshot

Sensei and The Geek is a website built as the central hub for a podcast by two long-term expat residents of Japan. The site is used as a central location where listeners can access and comment on the podcasts, read blogs, and leave feedback in the forums, allowing for engagement with between the podcasters and their audience. This site was built with heavy social networking integration, in pulling content from Instagram and Twitter, and submitting content to Facebook, Google Play, iTunes, and other podcasting services.

The site provides Accelerated Mobile Pages, as well as Structure Data, in order to get higher page rank within Google, and creates Facebook Instant Articles, to promote higher user engagement when posts are made on Facebook.

Why Drupal was chosen: 

Drupal was chosen because of its functional core, meaning much functionality can be provided out of the box, its many contributed modules, saving development time, its high performance, making for fast page loads, and its powerful underlying framework, allowing for quick development of functionality that is not provided by core or existing contributed modules.

Describe the project (goals, requirements and outcome): 

There were seven primary goals for this website:

1) Give listeners a place to listen to the podcasts
2) Give listeners a place to give feedback about the podcast, and get more information on the podcasters
3) Put out an RSS feed to be used by iTunes, Google Play and other podcast sites
4) Automatically submit Facebook Instant Articles when new content is created
5) Give the podcasters a centralized location to link to social networking regarding the podcast
6) Give the podcasters a place to add additional content such as blogs, to give search engines something to index regarding the podcasts
7) Optimize the code to give search engines a site that is easy to index, and content that improves search rank

The primary requirement of the site was that podcast files not be hosted on the site server, as the storage and bandwidth to do so would become a prohibitive cost over time, particularly if/when listeners increase. As such, files are hosted on Dropbox, then played through an embedded HTML5 player directly on the site.

We leveraged core Drupal to create blogs, a forum, podcasting pages, a contact form, and to create the RSS feeds that were submitted to the podcast indexing sites. We used contributed modules for the audio player, Social networking sharing links, Twitter embed of our Twitter account's tweets, Accelerated Mobile Pages (AMP), and various performance improvements. We created custom modules to integrate Instagram images into the site, and to submit Facebook Instant Articles to Facebook.

The end result was a site that loads blazingly fast (Webmaster tools is reporting our average page load at 0.6 seconds), acts as a central hub to the podcast, and is optimized for search engines to achieve a high page rank.

Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

The Views module (part of core) was used for one of the most important parts of the site - creating an RSS feed that was submitted to iTunes and Google Play, so that the Podcast channel would be accessible through their apps on their sites. The module also creates the podcast listing page, the blog page, and blocks for most recent podcasts and blogs.

The Audiofield module was chosen so that podcasts could be embedded directly into the site for listeners to listen to.

The Remote Stream Wrapper module allowed us to use externally hosted audio files on Dropbox, with the Audiofield player, so that the audio files did not have to be hosted on our server.

The Accelerated Mobile Pages module, was used in combination with Amp Theme, to provide AMP pages that are used by Google for better search rankings when doing searches on mobile devices.

The Share Buttons by AddToAny module was used to allow users to share podcasts and blogs on social networking sites.

And finally the Advanced CSS/JS Aggregation module was used for it's highly advanced aggregation of CSS and JS, making page loads faster, keeping the search engines happy.

For our theme, we used the Aegan theme as a base, as it gave a responsive design to work with, then sub-themed it in order to provide our own customizations, such as a different font, changing link colors, themeing sidebar items, and adding regions to better fit our needs.

Organizations involved: 
Community contributions: 

As a contribution to the community, we documented the method of tying externally hosted audio files with a Drupal site in Drupal 8, at the following page: https://www.jaypan.com/tutorial/embedded-audio-player-externally-hosted-...

We also needed a duration field, to show the duration of the podcast. So we created a new module, Duration Field, for Drupal 8 that creates both a new duration form element, as well as a duration field (for the Field API), to allow site builders to work with durations.

Team members: 
Sensei and The Geek logo
Custom Instagram integration page screenshot
Accelerated Mobile Page screenshot
Fast page loads reported by Google
Structured Data provided for search engines
RSS Feed provided to submit podcasts to iTunes, Google Play etc.
Facebook Instant Articles