Cofactr - Electronic Component Procurement, Purchase, and Management Platform March 2022 to present cofactr.com

Lead Software Engineer (Frontend), Architect, Project Manager

Cofactr is a Y Combinator startup based out of Brooklyn, New York, with a platform for "procurement, purchase, and management of electronic components." Their platform was built on a no-code toolset, and the rapid addition of customers created an urgent need for a full rewrite. I was brought on to lead the frontend side of the rewrite.

Functioning as architect and project manager for the frontend, I advised on framework and technology choices. I set up project management in Linear and ticketed all UI features based on designs provided by the CEO, while advising on the UX. I established the project timeline, estimated tickets, and when we were ready to build, put together a team of frontend engineers for which I managed tasks and HR ancillaries through 508.dev. I also integrated the Toptal engineer Cofactr added partway through the project. In all, I was project managing a team of four frontend engineers (including me) across four timezones. Throughout the project, I planned our sprints, ticketed new features, managed bug reports and QA from the executive team, reviewed and merged code from the frontend team, and worked with the API team on design decisions.

While functioning as project manager, I also functioned as lead individual contributor and architect on the frontend, with occasional contributions on the backend API as well. I built a large bulk of the frontend app, creating components, patterns, authentication, token management, and request frameworks to be used by the rest of the frontend team while implementing features.

The frontend app is a React SPA deployed statically to an Amazon S3 bucket. It communicates with a Django REST API. State management was initially done using Thunk style API requests feeding a Redux data store, but was later converted entirely to an RTK Query cache and state management pattern. MUI components were integrated to allow for rapid prototyping and UX iteration. Typescript allowed for easy mapping of the frontend objects against the API types. There are extensive form based UX flows for creating and editing resources, for which Formik and Yup were used to allow for good form error UX, validation, and state management. There are also a great many resource tables throughout the app, for which we used MUI DataGrid to render data, creating custom render cell components as needed. The app is built with Webpack. Eslint enforced a code standard that I chose.

Now that the app is built, I'm working with Cofactr's new platform lead to transition further development of the app to a new internal staff team, while continuing to optimize and fix any bugs found as the new engineers established themselves.

Technologies:

• React
• Redux Toolkit
• Redux
• Typescript
• Python
• Docker
• Mui
• Javascript
• HTML
• CSS
• Webpack
• Formik
• Yup
• Mui DataGrid

Stealth Cryptocurrency Trading Project January 2024 to June 2024

Software Lead, Frontend Engineer

A private investor had alpha regarding automated cryptocurrency trading. I put together and led a team to build a product to capitalize on this alpha.

I project managed and drove decisions for the backend engineers to develop a low-latency trading program, and personally built out a frontend admin and data visualization tool. Most of the details of functionality are covered under the most rigid NDA I've ever signed.

Technologies:

• Typescript
• NextJS 14
• React
• Python
• Tailwind
• Javascript
• HTML
• CSS

Stealth Streaming Startup November 2023 to March 2024

Lead Software Engineer (Frontend), Project Manager

An American streaming startup still in stealth requisitioned me to build a team to design and develop a desktop web streaming platform that integrated with their mobile streaming app's backend.

I led most of the architectural decisions, taking input on the client's specific technical requests such as building in NextJS.

We built this just after the release of the new NextJS "app router" paradigm, necessitating forking and getting commits on the Apollo GraphQL Typescript library to ensure it worked with some of the new concepts in the latest version of NextJS.

The app allows users to login and host streaming sessions with chat, interactive games with viewers, and streaming statistics.

Technologies:

• Typescript
• NextJS 14
• React
• Apollo
• GraphQL
• Tailwind
• Javascript
• Streamchat
• Livekit
• HTML
• CSS

Jovono - Investment Firm Landing Page 2022 to 2023 jovono.com

Lead Software Engineer (Fullstack)

Jovono is a principled investment firm with a portfolio that includes Hacker Noon, DoNotPay, and Paragon. I worked with them on updates and maintenance of their server side rendered React app, with data fetched from an Airtable API. I also migrated them to a Heroku deployment strategy, ensuring their SSL certificates continued to auto-renew under the new deployment strategy.

On another project, I led a junior in migrating Jovono's site from hosting on Heroku to Cloudflare Pages, a relatively new cloud offering that required upgrading Next.js up several major versions, and switching to a server-side generated paradigm. I also migrated the CMS from Airtable to Back4App, saving money and allowing for more flexible deployment strategies.

Technologies:

• React
• Next.js
• Airtable
• Back4App
• Typescript
• Javascript
• HTML
• CSS
• Cloudflare Pages
• Heroku

Covid-19 Vaccine Landing Page

In preparation for the release and distribution of vaccines for Covid-19, Curative wanted to have a landing page specifically about this topic. Working with a designer, I implemented Curative's needs against a design while working in a feedback loop with the rest of the product team as well as Legal. I focused on implementing with native HTML as much as possible, making it much easier to make the page fully accessible. Unfortunately, this page no longer exists, as Curative stopped offering vaccines.

Technologies:

• React
• Typescript
• TSX
• Styled Components
• Javascript
• HTML
• CSS
• Webpack
• Buildkite
• Docker
• AWS

Email Branding

As part of a general branding movement for Curative, I was tasked with turning plaintext emails into more thoughtfully designed emails, with various images and information hierarchies. Having never worked with web development in an email context before I had no idea what a minefield it is, and had to learn everything from first principles while giving feedback to the design team on what is feasible. In any case, we got it done, and as of now most Curative emails are sporting the new format.

Technologies:

• MJML
• CSS
• HTML
• Python
• Node
• Postgresql
• Docker

Accessibility

I'm fortunate that leadership at Curative is very pro-accessibility, and so I spend the majority of my time now auditing, ticketing bugs towards, and then fixing, accessibility problems in various Curative websites and applications. Recently I'm proud to have converted Curative's custom, inaccessible Checkbox components into accessible ones. See the before: https://www.youtube.com/watch?v=HyhMb38WG0k and after: https://www.youtube.com/watch?v=PxLZHMvMKnw . I also made the Radio components accessible. See the before: https://www.youtube.com/watch?v=oZgV3Z5RGdU and after: https://www.youtube.com/watch?v=NjczgRHZ8e8.

Technologies:

• React
• Typescript
• TSX
• Styled Components
• Tailwind
• Javascript
• HTML
• CSS
• WCAG
• VPATs

disfactory disfactory.tw

disfactory (uncapitalized) is a civic tech project built in collaboration with a Taiwanese environmentalist NGO. The goal is to reduce the number of illegal factories in Taiwan. There is a crowd-sourcing app that allows users to report illegal factories, as well as view the status of that factory, anonymously. There is a backend that converts reports into properly formatted forms that are physically printed and sent to the relevant government authority. The NGO then assists by staying in touch with the local government to ensure action is actually taken on the illegal factory.

Technologies:

• Vue
• Javascript
• Typescript
• HTML
• SASS
• Webpack
• OpenLayers / Mapbox
• Jest
• Docker
• Python
• Django

Underwriter

One of the quants at Captec had put together a whizz-bang of a React and Python app designed to intake a bunch of information about a company, including their balance sheets, and then in a web UI allow a user to underwrite said company, tweaking proprietary analysis algorithms with a goal of visualizing what various actions they can take would have on their bottom line. The application was standalone and Captec wanted to integrate it into their main web application. It was an extremely fascinating project in a field far outside my comfort zone (that is to say, finance) and I thoroughly enjoyed working in such an unfamiliar place.

Technologies:

• Javascript
• Typescript
• React
• Webpack
• Node
• Python
• Docker
• HTML
• CSS

Google Careers careers.google.com

Google Careers is a web app that allows users to search for open Google positions, find out about student opportunities, and learn more about what it's like to work at Google in general, as well as at specific locations. Requirements included that the site be available in four specific languages, that it be mobile first, and that it passes Google's accessibility standards, which are far more strict than the US Department of Health and Human Services' 508 web accessibility standards.

Technologies:

• Vue
• Javascript
• Typescript
• HTML
• Python
• Django
• SCSS
• Webpack
• Jest
• Google Cloud
• Material Design Components (MDC)

Unpublished, Internal Project - Sales Tool

This project was a front and backend app designed to allow sales people to generate and share value maps. The user would be taken through steps involved making the map, including creating nodes against pre-defined columns, connecting said nodes, and then generating sales pitch tracks based off connected nodes. The backend was a Node API managing a Datastore DB and user authentication through OAuth. I was the sole frontend engineer on this project.

Technologies:

• Vue
• Javascript
• Typescript
• Node
• Fast API
• HTML
• SCSS
• Webpack
• Datastore
• Google Cloud
• Material Design Components (MDC)

Unpublished, Soon to be Published Project - SQL Query Generator Game

This project was a game designed to teach users how to use the client's SQL Cloud database product, which as a result also made it a game to teach users how to craft SQL queries. One part was a WebGL / Canvas game map, designed in Tiled. The user could zoom in and out, scroll around, and select dynamically generated pins based on their progress in the game. The other part was a sort of two-pane text editor. One side would have a dropdown SQL generator, and the other the results of whatever query was on the left. The dropdown SQL generator turned the DOM into an AST representation of a user-generated SQL query. We had to roll our own Javascript SQL tokenizer and parser. Furthermore, for security reasons, we had to parameterize all queries before sending them to the client's cloud database product. The frontend could craft queries using SELECT, FROM, WHERE, AND, OR, NOT, DISTINCT, JOIN (INNER, LEFT, RIGHT, FULL) and GROUP BY, and was fully recursive (JOIN could be used practically infinitely, as could WHERE combined with AND / OR). The publishing has been delayed by COVID-19. Except for occasional involvement by my lead, I was the sole frontend engineer on this project.

Technologies:

• Vue
• Javascript
• Typescript
• Node
• Fast API (Node framework)
• HTML
• SCSS
• Webpack
• SQL
• Canvas
• WebGL
• Tiled
• Google Cloud

Further Projects

I worked on a lot of various projects while at Potato, but I don't want to have a 30 page resume. If you're curious, feel free to ask!

Imp Central impcentral.electricimp.com

ImpCentral is the device management platform for Electric Imp Cloud and Electric Imp devices. Users can write, lint, and upload code to devices and servers. Users can also see the status of all of their devices, which could number in the hundreds of thousands. The frontend is a Backbone and Marionette app, using the Ace library as a web IDE, and Bootstrap as a CSS library. Originally, the app was bundled with Grunt, and there was no unit testing framework (although we had an incredible QA team). During my time, I upgraded the build system to use Webpack 3. Halfway through the upgrade, Webpack 4 was released, and so I redid the work to use Webpack 4, issuing several pull requests to major libraries (bootstrap, etc) to make them compatible with Webpack 4 so we could continue using them. I enabled hot-reloading for the team and took advantage of other Webpack features to reduce our bundle size and automate other parts of our workflow. I also integrated unit tests through Jest. The backend was various services in Node and Go, talking to various other services such as RabbitMQ. The application was mirrored across every major cloud provider, including AWS, Google Cloud, and Azure, as some clients wanted private clouds. Imp device VMs, and their paired servers, are programmed with Squirrel. Imp OS is written in C.

Technologies:

• Javascript
• Node
• Backbone JS
• Marionette JS
• HTML
• LESS
• Bootstrap
• Ace editor
• Grunt
• Webpack
• Jest
• Google Cloud
• AWS
• Azure

Imp CMS

As more clients contracted for Electric Imp's private cloud offering, we needed a way for them to manage common requests like user management or certain text changes without needing to file a support ticket with our relatively small engineering team. So, I was tasked with setting up a CMS that would deploy alongside all cloud instances. It was a Vue app that talked to a Node API.

Technologies:

• Vue
• Javascript
• Node
• HTML
• SCSS
• Material Design Components
• Webpack