Case Study: Creating a video hosting and streaming platform for ecommerce

Service areas

Custom Software Development Infrastructure Management

Technology stack

Node.js React Typescript PostgreSQL Docker AWS EC2 AWS ECS AWS S3 AWS RDS AWS Elemental MediaConvert CI/CD Shopify

Organization

Trend

Trend is a platform that allows brands to access a curated network of content creators and social media influencers, enabling collaboration and the creation of innovative marketing campaigns. A strategic target for Trend was expansion into the ecommerce space, allowing both current Trend customers to seamlessly deploy content to ecommerce storefronts while simultaneously allowing new ecommerce focused brands to discover the Trend platform.

Trend approached Foxhound Systems to help design, build, and host a custom video hosting and streaming platform aimed at brands operating Shopify storefronts.

A marketplace changing the way leading brands work with top content creators.

Why Foxhound Systems?

Trend chose to work with Foxhound Systems on this project for several key reasons.

Our ability to handle the every aspect of creating a software product, including:

Specification and wireframe creation
Front end and back end development
Cloud deployment and ongoing infrastructure management
Guidance in publishing an app on the Shopify app store

Our experience with development for ecommerce platforms.

Our expertise in building fast and intuitive applications, given that a responsive and streamlined user experience was paramount to Trend’s own brand.

Our flexibility in choice of programming language and tool sections, giving Trend the ability to choose a programming language and platform that would simplify sharing knowledge with their internal team.

Our team’s ability to provide close and focused collaboration and easy communication.

A mockup of one of the primary user interface views created by Foxhound Systems after gathering requirements from Trend early in the application design process.

Project goals

Create a Shopify application allowing merchants to upload product videos and images and display them as a interactive media album on product pages.

Trend’s desired outcome was to give merchants the ability to add a social media “story”-like experience for customers looking at products. Unlike normal photos or product videos, these would be short video and image clips optimized for mobile viewing.
Complete the entire project in three months, including planning and design, development, testing, deployment, and publishing.

One of Trend’s objectives was releasing an initial version of the product story application in just a few weeks, allowing for gathering user feedback and further iteration on the product. Three months was set as the target timeframe for initial release.
Deploy the system to AWS and provide ongoing infrastructure maintenance and technical support to the Trend customer experience team.

Trend’s main software platform was already hosted on AWS, so AWS was selected as the target platform for this application’s infrastructure.

One of the merchant facing views in the admin panel, allowing content to be uploaded for later use in product story albums. Video files uploaded by users would be transcoded into an optimized size and format asynchronously through AWS Elemental MediaConvert.

Project outcomes

A customer-facing product page with an embedded product story album containing several videos.

Our team at Foxhound Systems successfully delivered a video hosting and streaming Shopify application allowing merchants to add stories comprised of video and image media to product pages. Other key pieces of functionality included:

A dashboard allowing merchants to view engagement metrics such as total product views, total associated sales, and top performing product stories.
An intuitive product story editor, with features like drag-and-drop reordering and streamlined media file uploading.
A media library for managing video and image files to be used in stories.
Full story player functionality on all desktop and mobile browsers.

The application was optimized for performance, with loading speeds maximized wherever possible and a streamlined feedback indicators used effectively.

The page load impact of storefront product pages was negligible through optimized media thumbnails, deferred media content loading, and a zero-dependency custom video player written in vanilla JavaScript.
Optimal video streaming speed was achieved through video file transcoding and optimization powered by AWS Elemental MediaConvert.
Long running actions such as video processing were designed to be performed asynchronously with user progress indicators, giving users feedback about video processing times while allowing them to navigate away from the page.

Our team selected technologies to build the application based on requirements from Trend as well as our assessment of tools suitable for this type of application.

The application was built using Node.js and React with Typescript.
PostgreSQL and AWS S3 were selected means of data and object storage.
Docker was utilized for both development and production builds.
A continuous deployment pipeline was configured for fast and easy deployments, powered by GitHub Actions and AWS ECS.

A streamlined in-application onboarding process along with instructional videos created in collaboration with the Trend customer success team has resulted in excellent adoption and engagement.

Within the first 6 months of launch, the application has been installed by hundreds of merchants through the Shopify app store.
Merchants have uploaded thousands of pieces of video and image content.
End users have viewed product stories tens of thousands of times, with month-over-month growth remaining in double digit percentages.

See our other case studies or work with us.