Overview

Purposed for content creators to monetize through contribution from subscribers, across 1st and 3rd party platforms.

Design / UX

Goal was to make it minimally functional and clean for rollout. Mockup was made in figma and then individual components were improvised in-code over feedback.

Frontend

Prior to my contribution, the app was already wrapped in components tied to state with tight coupling to state library ringa-js. It was functioning, but not feasible to have new features built with same pattern.

Alongiwth updating the bundler and dependencies, I introduced enhancements to prepare the project for new feature development.

• The creator page was created using React function components
• A parallel store was implemented using Context API, sync was established with ringa store to serve progressive transition.

Resulting in a new state of project where components could be refactored along with attached state with convenience.

Editor Challenge

WYSIWYG editor was implemented using slatejs. However a custom registry of tools was created which mapped a single configuration for each tool to editor, where it has a control, its effect and its serialization / deserialization / rendering rules.

            
            // a registry entry for video component
            {
                VIDEO: NodeDef({
                    type: 'video', // used as id by rules system
                    tagName: 'iframe',
                    src: String,
                    attributes: {
                        src: {
                        ref: 'src'
                        },
                        width: '640',
                        height: '360',
                        frameBorder: '0'
                    }
                }),
                ...
            }
            
            

This customization enabled the potential to allow building custom components with ease, persisting them to make it possible for anyone to craft editor widgets and share them.

Chrome Extension

First experience building a full-blown extension with background mode, for tracking activity on multiple VOD and streaming websites.

• React-based extension view, shared with another standalone widget.
• Maintaining state in background
• Passing messages through a custom implementations of channels on top of chrome runtime

Backend API

Fairly standard light TDD workflow with Nodejs, Mocha-Chai for testing with following new logic / API implementations.

• Creator pages (from video) and sub-features (tiers, goals etc).
• Analytics aggregations of impressions captured from across touchpoints

Takeaway

Work by its nature extended over years, and working with good seasoned engineers, a lot of my healthy code structuring habits were established.