Video Library

Video library for Olympic Weightlifting and demo-library with programming videos

Context

I was contacted to create a video platform, that would integrate into a Shopify store and be accessible only to paid subscribers.

Process

  1. Gathering requirements & wireframes, choosing a video hosting solution
  2. Estimating the project duration with user stories, estimated with Fibonacci numbers and follow the Agile approach.
  3. Coding
    • Setting up the logins and subscriptions on Shopify via 3rd party app
    • Coding the React.js video library
  4. Creating the documentation for integration
  5. Updating for the portfolio demo

Overview

Problems

  1. Locking out the videos from non-subscribers on Shopify
  2. Create interactive video library with playback
  3. Integrate the React.js library into Shopify store
  4. Make a demo with React Router and new styles

Solutions

  1. Use a specialized app and system of pages on Shopify;
  2. Research and find the appealing platform (Vimeo or YouTube)
  3. Pick appropriate plugins, setup UI, animations, filters, colors, icons
  4. Rewrite most of the code for the demo, using different content, styles, and approach

Overall result

An extensible video library with easy to maintain videos information in JSON, responsive, and supporting filtering, search, and chapters in the video.

As the client library is yet to be released, the demo library demonstrates the functionality on an unrelated videotheque hosted on Netlify.