SystemUI was a user-facing application overlaying all inputs on the television with a high performance rendering layer. This application displayed essential components such as a new Volume Ring, new Input Switcher, notifications, and more. It handled hundreds of voice commands, such as "show me the weather," or "tell me about the burj khalifa."

SystemUI listened for websocket events from the TV to determine what visual components should be displayed and populated. These events contained essential information from the device, such as pairing status, remote battery level, voice command domain, current inputs, all used to configure the UI Library's components. These events were listened to via the Companion Library.

Considering the thousands of components this app was projected to contain, we wanted to implement an architecture that could scale gracefully with increased complexity and real estate. The Model-View-Controller (MVC) architectural pattern is a pattern utilizing a rule-set to separate business logic from display logic. We strictly enforced this pattern and created a solid scalable platform to build upon.

While this project was very visual, we implemented Jest unit testing to ensure API calls and responses matched specifications provided by higher levels. Tests were written for all sorts of user behaviors, such as unplugging USB accessories, losing network connection, and more.

Upon inception, SystemUI was created as an MVP in the span of a couple weeks to be showcased at the Consumer Electronics Show (CES2020). Development was done up until the morning-of the user demo. Even with the extremely tight timeline, the application was stable and performed strong.

The UI Library was used internally by developers on the SmartCast teams. It contained hundreds of UI components, using game technology to develop and configure smooth, responsive interactions.

A strong architecture, alongside a strict inheritance tree, allowed me to develop hundreds of unique components with ease and quality.

The UI Library was automatically built and deployed to npm via JFrog Artifactory. The private package was then imported into parent projects, allowing the import of individual components, or import of a developer-friendly API.

The UI Library is integrated into a number of applications under the Platform team. The lightweight and universal nature of the library allowed its components to be configured and used in any environment.

The UI Library held essential components such as the Voice Ring, Volume Ring, Input Switcher, Notifications, Toasts, Action Buttons, and more.

In order to assist developers in testing custom components, the UI Library featured an internal test application, giving a straightforward and visually-assisted solution to testing these unique components. A range of test keys were implemented to give QA debug capabilities across devices, via test application.

For the UI Library, we didn't want the client to have to handle instantiations, or component management. To keep complexity light, a lower level API was exposed to the client, allowing them to trigger pre-defined component management logic, keeping all components in sync with each other.

The BT Remote App served as a user-facing BLE remote settings hub. Pairing, unpairing, checking for firmware updates, and checking battery level, were all centralized in the BT Remote App.

Initial development of the BT Remote App took 1 heads-down day. Utilizing best practices and earned experience, I was able to have an application up-and-running within a day of being briefed on the project.

Communication with the TV was handled via API calls to the Companion Library. Following a spec, TTD allowed our team to kickstart our end of the project long before API work was even complete.

The BT Remote App utilized the reliable MVP pattern, allowing scalability for any scenario. A separation between business logic and display logic allowed other developers to build upon the application with ease.

The BT Remote App was built using VueJS, giving us the component-focused development environment we needed.

The Customer Support App served as a user-facing device specification hub. Essential information such as version numbers, connection status, and device capabilities, were showcased to the user at their convenience via this app. The application features a randomized pin, which could be given to a support agent, and used to make adjustments/send commands to the device remotely.

For the Customer Support App, we leveraged React, and JSX, to get an application up and running in record time. Switching from our usual Vue, we looked at the advantages of React, and decided it was the best choice for the project.

Some information being displayed in the Customer Support App was not yet wired to be fetched from the device. I worked directly in the Companion Library to implement these new APIs, then switched codebases and took it across the finish line on the frontend.

In the Customer Support App, animation was repeated across elements. To automate this, I created a 'Cascadia' helper, automating cascade animations across all elements, without the need for repeated declaration.

OOBE stands for Out Of Box Experience. It's defined by the user's first interaction with the device. Development was done on both the existing OOBE, and a new-generation OOBE.

Communication between local assets on the device, and applications, can sometimes come out of sync. To manage this, we developed methods to retry failed asset loading, utilizing proven patterns.

While the OOBE2020 application was maintained and stable, there were a few improvements I was tasked with, from fixing broken key listeners to re-approaching asset loading & fetching, I got to put my touch on a handful of moving pieces.

Advised on multiple mocks and worked directly with the design team to ensure a function and seamless experience for the user.