The Gist
I develop the UI for the Microsoft 365 admin portal for Rackspace Technology.
Daily, I develop product features, write code reviews, agree with backend developers on API contracts, build mock APIs, and work closely with a product team and UX designer to finalize designs and scope for our product roadmap.
Additionally, I lead a global team of frontend developers, taking ownership of planning projects, establishing code patterns, ensuring code quality and best practices, progressing towards an architectural vision, engineering the deployment pipeline, and documenting along the way.
From time to time, I take on additional responsibilities such as crafting and conducting job interviews, contributing to the UI component library of the company's design system, performing tech talks and team demos, and designing mockups for upcoming projects.
Technology
The admin portal is built with React and its state is managed with a combination of Redux and local state. The business logic is tested with Jest and the rendered output via a pairing of Enzyme, or React Testing Library, and Jest snapshots.
The APIs that support the portal follow a microservices architecture and utilize Azure serverless functions.
The mock APIs used for developing new features ahead of the API team is created using Express.
Additionally, there is server-side code written with .Net Core which handles authentication with Microsoft via OpenID Connect, authorization, proxying API requests, transmitting Azure service bus messages to the client via WebSockets, and more.
Finally, the CI/CD pipeline integrates with GitHub branches and deploys to Azure App Service deployment slots. Deployment to production is achieved with zero-downtime by using slot swapping.
I contribute to all of these integral parts of our application regularly.
Projects
Business Catalog
Using Microsoft 365 through Rackspace Technology allows customers to get fanatical support to assist them through all of their business needs. My team was tasked with building a control panel that allows company administrators to manage users, purchase licenses, assign purchased licenses to their users, along with other administrative tasks.
The project aimed was to build a screen that would display a catalog of Microsoft 365 products and allow our users to purchase those products as well as adjust their quantities.
As per our usual process with a new project, I gathered together with all the devs and the product team to discuss requirements, providing input to finalize the designs and scope, and answering relevant technical questions. Next, the UI developers grouped up with the API developers to agree on a contract for a presentational API that would be used to populate the new experience. From there, I worked to breakdown the project into precise stories with story points and acceptance criteria. After creating the list of stories for the project, the estimate was projected given our velocity reports over the past several sprints. Lastly, the stories were implemented one by one with appropriate levels of mock API development, unit testing, manual testing, regression testing, and code reviews. In addition to successfully delivering on the project commitment, a technical challenge to utilize Redux to manage our data layer was achieved. I was able to help define a pattern for using Redux which included organizing files, determining the appropriate layer for business logic, and concluding on how and which components read and update data in the store.
Another technical challenge with the business catalog is that the subsequent API requests to update the quantity of a Microsoft 365 product are asynchronous. There is an initial loading state until Microsoft returns a successful response. After that, there is an additional period of waiting until the purchased licenses are provisioned and readable. Part of this project, therefore, required working with the API developers to come up with a way to be notified when the final Microsoft provisioning completes so the UI can exit a loading state and populate the catalog with the updated data. The technical solution was to have the API developers publish a message to an Azure Service Bus topic which the server-side of the admin portal subscribed to and communicated to the client-side application via a WebSocket connection. Upon receiving a relevant WebSocket message, the updated product is displayed to the user.
Product Consumption Metrics
Another favorite project followed the Business Catalog. In this project, I followed a similar process as outlined above to curate a dashboard for metrics on products that had been purchased from the catalog including usage, availability, and monthly invoice. This release was well-received among our customer base as it adds an account summary that is not available through Microsoft's control panel.
Several technical achievements went along with this project. First, I was able to implement SVG animations, an interest of mine. Following the work on this project, I gave a tech talk at my Rackspace Technology office.
The summary of my tech talk is captured in this blog post. Second, I led an initiative to transition our unit tests from Jasmine to Jest. Additionally, I moved us towards snapshot testing and established a consistent pattern to be used across our team. A summary of my work can be read in another blog post which also became another tech talk that I gave at Rackspace Technology.
Helix React
Rackspace Technology has a central design system called "Helix." As part of this design system is a Web Component library called "HelixUI." I had led the initiative for our team to adopt this official library in place of a custom React implementation of UI components that match the Helix design specifications. During a hackathon, I led a subsequent initiative to write a React wrapper around the official HelixUI library using TypeScript. This package caught the attention of the Helix team, and I worked with their tech lead to make it an official Helix package. Here is the final product.
UX Design
Although my main focus is UI development, I have on occasion stepped up to fill in for UX design. I create mockups for an upcoming project in Sketch using a plugin for our Helix design system. After creating mockups of all the various UI states, I create an interactive prototype with InVision. The mockups are revealed with the dev and product team together, initiating discussion for determining the scope and work of the project. The graphic above is a sample Sketch file for a new feedback page that has been released to our customers. In addition to doing some UX design, I have also conducted several interviews for UX interns and new hires, representing the UI dev team.