Nathan Babcock, Developer in Chicago, IL, United States
Nathan is available for hire
Hire Nathan

Nathan Babcock

Verified Expert  in Engineering

Front-end Developer

Location
Chicago, IL, United States
Toptal Member Since
December 29, 2021

Nathan is a senior React engineer and an expert in streamlining UI/UX with React. As the lead design engineer at Motorola Solutions, he marshaled a product combining React, Angular, and Svelte to company-wide deployment, garnering more than 100,000 downloads. Nathan also developed Hypetrigger, a popular machine vision system for use with streaming services, and that is built with React and SolidJS for the front end.

Availability

Part-time

Preferred Environment

Amazon Web Services (AWS), React, TypeScript, Node.js

The most amazing...

...thing I've built is an end-to-end design system, including an internal documentation site and a DevOps pipeline to deploy and maintain it.

Work Experience

Electron Developer

2023 - 2023
Rebel Systems (Via Toptal)
  • Developed an Electron/React GUI for the display kiosk of an electrical appliance for the military.
  • Built the React app from scratch with MUI (Material UI) components.
  • Designed a custom accessibility implementation for controlling the app via four directional buttons.
  • Integrated Protobuf and ZeroMQ pub/sub messaging/serialization on the back end.
  • Utilized Zustand, a novel, lightweight React state management library, providing the app with a flexible and modular foundation.
Technologies: React, Electron, TypeScript, JavaScript, ZeroMQ, Protobuf, Vite, PNPM, Material UI

Senior React Developer

2022 - 2022
Zeedz GmbH (Via Toptal)
  • Implemented the React front-end for a "play for purpose" NFT game called Zeedz.
  • Built user flows, including user log-in and sign-up, purchase and unboxing experience, and inventory management for the player's digital collectibles stored on the Flow blockchain.
  • Connected to the team's existing back end, including a custom GraphQL API, Amazon Cognito, integration with the Flow blockchain via the Flow Client Library, distributed file hosting with Pinata, and a few other services.
  • Collaborated remotely over Google Hangouts, mainly with German and UK team members.
Technologies: JavaScript, React, CSS

JavaScript Game Developer

2022 - 2022
University of Windsor (Via Toptal)
  • Built a game for a psychology research study run by a University of Windsor professor.
  • Build an initial prototype in Electron before pivoting to a website environment.
  • Implemented basic CRUD functionality for configuring games/experiments.
  • Authenticated users for researchers vs. participants/players with role-based access control (RBAC).
  • Created a website front end using Solid.js, TypeScript, and CSS.
  • Built and connected a MongoDB/Express.js Node.js back end.
  • Hosted a deployment on AWS (Amazon EC2, Amazon Route 53, Docker, NGINX, Let's Encrypt, and HTTPS).
Technologies: 2D Games, Game Design

Three.js Developer

2022 - 2022
Merciv LLC (Via Toptal)
  • Built a React/Three.js website for a film portfolio with Webflow integration.
  • Integrated Three.js with React via the react-three-fiber library.
  • Developed a custom integration with Webflow CMS collection/REST API.
  • Applied dynamic textures to 3D models based on data in the Webflow CMS.
  • Mapped page scroll to 3D camera movements in real time.
  • Positioned a native HTML5 video player in 3D space in the scene.
  • Exported GLTF 3D exported from Blender, optimized for performance and file size to be rendered in the browser.
Technologies: Three.js, JavaScript, HTML, CSS

Lead Design System Engineer

2016 - 2021
Motorola Solutions
  • Developed a design system used globally across Motorola software, including ports across Angular, React, Svelte, and native web components. Worked closely with UX designers to implement these components from scratch, from mockups to production code.
  • Traveled to global company locations in Poland, India, and across the United States to present workshops on using and contributing to the design system.
  • Handled ongoing maintenance and support of the design system, overseeing 100,000+ downloads over several years.
  • Led bi-weekly Agile sprint meetings, standups, retrospectives, and backlog grooming sessions with the front-end team of three developers.
  • Interviewed, onboarded, and mentored three new hires and two interns on the design system team.
  • Created an Nginx gateway server acting as a reverse proxy to internal microservices for cybersecurity. The gateway instance protects entry to individual servers, so they don't need to be exposed to the public network.
  • Monitored open-source contributions from developers across the company, including features, bug fixes, and pull requests.
  • Moderated an internal discussion board of 350+ front-end developers using the library we built and sharing knowledge of the latest front-end techniques and best practices.
  • Audited the Motorola design system for security vulnerabilities, achieving an npm audit report with zero critical or major vulnerabilities.
  • Attended design reviews of new front-end components to be added to the library and helped translate UX requirements to code implementation by the development team.
Technologies: JavaScript, TypeScript, Sass, Agile, HTML, WCAG 2, React, Angular, Svelte, Figma, Sketch, Web Components, Design Systems, Azure, Jira, NGINX, OAuth, HTTPS, Front-end, Agile Sprints, Backlog Grooming, Software Development, CSS, CSS3, Microservices, REST APIs, DevOps, CI/CD Pipelines, Architecture, User Experience (UX), User Interface (UI), Angular CLI, Angular Material, Material UI, GitLab, GitHub, Git, A11Y, i18n, Internationalization, Web Accessibility, Accessible Rich Internet Applications (ARIA), Amazon Web Services (AWS), APIs, WebRTC, Webpack, Rollup.js, Rollup, ESLint, Lint, Stencil.js, NPM, Yarn, Private NPM Modules

Android Developer

2015 - 2016
University of Arizona
  • Redesigned and created the newest version of the "Arizona Mobile" app—the official Android app for the University of Arizona campus, including services such as maps, news, and class schedules. The app is available for download in Google Play.
  • Developed the app using Java and Android Studio and used Git branching for merging and version control.
  • Collaborated with graphic designers to design app user interfaces.
Technologies: Java, Android Studio, Git, Mobile App UI, UI Design, Front-end, Software Development

Rebel Systems GUI (Electron React App for Military Applications)

Electron React GUI for the display kiosk of an electrical appliance for the military. I built this React app from scratch with Material UI components.

The features:
• Custom accessibility implementation via four directional buttons;
• Protobuf and ZeroMQ Pub/Sub back end;
• Zustand state management.

Silience Films (Three.js Portfolio for a Film Company)

https://silience.us/
A React/Three.js website for a film portfolio with Webflow integration.

• React with react-three-fiber
• Custom integration with Webflow CMS collection/REST API
• Dynamic textures applied to models based on data in the Webflow CMS
• Page scroll mapped to 3D camera movements
• HTML5 video player positioned in 3D space in the scene
• GLTF 3D models exported from Blender

Regenaqua (UX Redesign and Weebly CMS Integration)

https://www.regenaqua.com/
Redesigned the website of a pool water recycling company. It was integrated with the (existing) Weebly CMS used by the company, including a custom template and HTML/CSS plugins. The design was created collaboratively with the client over several weeks and built in Figma.

Game of Squares (Full-stack Browser Game for a Research Study)

Built a game for a psychology research study run by a University of Windsor professor.

• Basic CRUD functionality for configuring games/experiments
• Authentication and roles for researchers vs. participants/players
• Full-stack deployment
• SolidJS front end
• MongoDB/Express.js Node.js back end
• Hosted on AWS (EC2 instance, Amazon Route 53, Docker, NGINX, Let's Encrypt, and HTTPS)
• The initial prototype built in Electron before pivoting to a website

Zeedz (NFT Marketplace in React and GraphQL)

https://zeedz.io/
Implemented the React front end for a "play for purpose" NFT game called Zeedz. The game UI implementation includes user log-in and sign-up, purchase and unboxing experience, and inventory management for the player's digital collectibles stored on the Flow blockchain.

The front end connected to the team's existing back end, including a custom GraphQL API, AWS Cognito, integration with the Flow blockchain via the Flow Client Library, distributed file hosting with Pinata, and a few other services.

Teamwork was fully remote over Google Hangouts, mostly with German and the UK collaborators.

Hypetrigger (Rust, Tauri, FFmpeg, and SolidJS Computer Vision App for Gamers)

https://hypetrigger.io/
A machine vision AI application that automatically detects gaming highlights in-live or recorded video and records 10 to 30-second clips. I built the core engine in Rust. It decodes video with FFmpeg on the GPU. It then uses one of two computer vision methods, either custom-trained TensorFlow models or a more general-purpose OCR (optical character recognition) using an open source Google library called Tesseract. The pipeline runs at about ten times the speed depending on the GPU. It can process 10 seconds of the input video in about one second.

In addition to the core engine, I built a native Windows front end in a relatively new framework called Tauri, similar to Electron, but integrates with Rust and uses the system WebView instead of bundling an instance of Chrome. The front end is also built using SolidJS, a framework similar to React but focused more on high performance and well-suited for this performance-heavy video processing and machine learning application.

Finally, I built a website to distribute and market this tool. It can be viewed at Hypetrigger.io. I built it using Next.js, and it is 100% statically generated. The content is created from JSON configuration files and a 3rd-party REST API.

Algernon (Three.js Maze Game)

https://excalo.itch.io/algernon
A 1st-person 3D maze exploration game written entirely in JavaScript, React, and WebGL, using Three.js and react-three-fiber. The game features lighting and shadows, collision detection, and post-processing effects like bloom and anti-aliasing. The prototype is free to play on itch.io.

Using Google Drive as a CMS (CSS Tricks Article, a GitHub Repo, and an npm Package)

https://css-tricks.com/using-google-drive-as-a-cms/
An article published on CSS Tricks, with a GitHub and npm Package. Using Google Drive as a CMS leverages Google Drive's public REST API to source content from the content-serving back end of a dynamic website. A companion article for this library was featured in a CSS Tricks article.

Gem Drop (Prize-winning 2D Physics Game with PixiJS and HTML5 Canvas)

https://www.kongregate.com/games/excalo/gem-drop
A 2D, physics-based idle game in the incremental game genre. I implemented the 2D collision physics and rendering in PixiJS. Gem Drop won 3rd place in a Kongregate monthly contest and has been played more than 75,000 times.

Nodescape (Browser Strategy Game with Real-time WebSocket Multiplayer Networking)

https://github.com/nathanbabcock/nodescape
A multiplayer territory control strategy game written using WebSockets and Canvas. The website accepted payment using the Stripe API, and users logged in with Auth0. The website server was hosted on AWS with NGINX and Docker.

FFmpeg Sidecar

https://github.com/nathanbabcock/ffmpeg-sidecar
A Rust crate for using the FFmpeg CLI, a leading open source media framework, using native Rust language constructs, such as iterators.

I received around 80 stars on GitHub and ongoing pull requests and contributions.
2013 - 2016

Bachelor's Degree in Computer Science

University of Arizona - Tucson, AZ

Libraries/APIs

Node.js, React, Three.js, WebRTC, Google Drive API, WebGL, REST APIs, TensorFlow, Stripe, Stripe API, Auth0 API, Twitch API, Rollup.js, DirectShow, Google Sheets API, FFmpeg, SolidJS, Solid, ZeroMQ, Protobuf

Tools

Git, GitHub, Open Broadcaster Studio (OBS), Angular CLI, NPM, NGINX, Figma, Sketch, Jira, Android Studio, Canvas, Google Analytics, Slack, Blender, Auth0, GitLab, Canvas 2D, Webpack, Rollup, Stencil.js, Google Docs, Google Sheets, Flow, Adobe Experience Design (XD), Notion, Create React App, Amazon Cognito

Frameworks

Angular, Material UI, Electron, Express.js, PixiJS, OAuth 2, Svelte, Angular Material, Yarn, Next.js

Languages

JavaScript, TypeScript, Sass, HTML, HTML5, ES5, CSS, CSS3, TypeScript 3, Java, GraphQL, Rust

Platforms

Visual Studio Code (VS Code), Docker, Azure, Amazon Web Services (AWS), Blockchain, Amazon EC2, Webflow

Storage

MongoDB

Paradigms

Agile, UI Design, Web Architecture, DevOps, REST, Microservices, UX Design, Role-based Access Control (RBAC)

Other

Software Development, Web Components, Design Systems, Front-end, Agile Sprints, Full-stack, User Interface (UI), Private NPM Modules, WCAG 2, WebSockets, Google Drive, OAuth, HTTPS, Game Physics, Backlog Grooming, Mobile App UI, Server Architecture, Web App Development, Content Management Systems (CMS), 3D Games, 2D Games, Back-end, CI/CD Pipelines, Technical Writing, Architecture, Web Scraping, User Experience (UX), Web Accessibility, A11Y, i18n, Internationalization, Accessible Rich Internet Applications (ARIA), Writing & Editing, Twitch, APIs, ESLint, Lint, OCR, Tesseract, Non-fungible Tokens (NFT), Computer Vision, Object Recognition, SSG, Weebly, Vite, PNPM, Game Design

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring