Nathan Babcock, Developer in Chicago, IL, United States

Nathan Babcock

Front-end Developer

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

Nathan is a web developer with 5+ years of experience as a senior front-end engineer at Motorola Solutions. While he specializes in TypeScript, Sass, and HTML, his full-stack experience includes React and Angular on the front end, Node.js and Express.js on the back end, MongoDB, AWS and Azure cloud hosting, and Nginx server configuration. Nathan's industry experience is backed by a bachelor's degree in computer science.

Nathan is available for hire
Hire Nathan

Portfolio

Motorola Solutions
JavaScript, TypeScript, Sass, Agile, HTML, WCAG 2, React, Angular, Svelte...
Motorola Solutions
Android, Java, Neural Networks, Linear Optimization, User Interface (UI)...
University of Arizona
Java, Android, Android Studio, Git, Mobile App UI, UI Design, Front-end...

Location

Chicago, IL, United States

Availability

Full-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

2016 - 2021

Lead Design System Engineer

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, MUI (Material UI), GitLab, GitHub, Git, A11Y, i18n, Internationalization, Web Accessibility, Accessible Rich Internet Applications (ARIA), Scrum, Scrum Master, Workday, Amazon Web Services (AWS), APIs, WebRTC, Webpack, Rollup.js, Rollup, ESLint, Lint, Stencil.js, NPM, YARN, Private NPM Modules
2016 - 2016

Software Engineering Intern

Motorola Solutions
  • Designed the user interface and flow for an Android app to solve the problem of "role assignment" in public safety teams (police, firefighters, and EMS workers).
  • Coded the Android app in Java, with full functionality.
  • Implemented machine learning at the edge (running on a mobile phone, with no cloud server connectivity needed), using a Java Neural Network framework called Encog. The network predicted the "fit" of each team member to each different job.
  • Using the resulting job fitness output from the neural network to solve a linear sum assignment problem. We used the Hungarian algorithm, also known as the Kuhn-Munkres algorithm, the fastest known solver which runs in O(n^3) time.
  • Traveled from Schaumburg, IL to downtown Chicago to present the finished app to a team of executives at the company -- the success of this presentation resulted in a subsequent job offer at the end of the summer.
  • Filed a patent application as the primary inventor for the method developed over the summer, entitled "A Method for Predictive Role Assignment to Maximize the Likelihood of Group Success." A patent is currently pending as of 2022.
Technologies: Android, Java, Neural Networks, Linear Optimization, User Interface (UI), App UI, Mobile App UI, Mobile App Design, Patent Applications, Patents, Business Patents, Android SDK, Android Studio, Presentations, Git
2015 - 2016

Android Developer

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, Android Studio, Git, Mobile App UI, UI Design, Front-end, Software Development
2015 - 2015

Teaching Assistant | Assembly Language and Computer Architecture

University of Arizona
  • Served as a teaching assistant for a course about x64 assembly programming and fundamental hardware architecture.
  • Graded homework and exams, providing feedback to students about their mistakes.
  • Held regular office hours and tutored students who needed extra help in the difficult course.
  • Answered questions via email and moderated an online forum for the class.
Technologies: x64 Assembly

Experience

Nft Game Startup -- React Frontend and Animations "Zeedz"

https://zeedz.io/
Implemented the React front-end for a "play for purpose" NFT game called Zeedz. The game UI implementation includes user login and signup, 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 Germany and the UK collaborators.

Realtime Computer Vision for Twitch Livestreams, Rust App and React/Next.js Website "Hypetrigger"

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 Solid.js, 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 third-party REST API.

3D Game in The Browser with Three.Js and React: "Algernon"

https://excalo.itch.io/algernon
A first-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 -- Article Published on CSS Tricks, with A Github and NPM Package

https://css-tricks.com/using-google-drive-as-a-cms/
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.

Deep Neural Network for Lux AI Game Programming Competition (Imitation Learning)

https://www.kaggle.com/c/lux-ai-2021/leaderboard
Lux AI is an AI programming competition hosted on Kaggle. I built a deep neural network that used imitation learning to mimic replays of the best public bots. This neural network achieved 80% accuracy in classifying optimal game moves. As a result, the entry ranked in the top 15% of the leaderboard.

Virtual Reality Terrain Mapping and GIS Data Vis in Unity

This university project involved terrain elevation data for Lake Tahoe, California, converted into 3D geometry in Unity for a virtual reality project. The VR environment was a "CAVE" (Cave Automatic Virtual Environment), which consisted of three walls and a floor, with projectors displaying the rendered environment onto each surface. The viewer could fly around this virtual landscape using a game controller.

2D Physics Game with PixiJS and Canvas: "Gem Drop"

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 third place in a Kongregate monthly contest and has been played more than 75,000 times.

Websocket Networking for Multiplayer Strategy Game: "Nodescape"

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

Open Street Map Radio Coverage Simulator

This tool pulls GeoJSON data for any location from Open Street Map. It uses the data to simulate the radio coverage for various deployments of LTE or broadband radio antennas, showing blind spots and dead zones and helping determine optimally efficient configurations of hotspots.

Developed internally for Motorola Solutions – the specific algorithm and source code are proprietary.

Stock Market Technical Analysis

https://github.com/nathanbabcock/stockbot
A project exploring various technical indicators on historical stock market datasets. The stock data was pulled from Yahoo finance, and the indicators included different combinations of moving average, MACD, RSI, and others.
Image of React Router Tutorial: Redirect Like a Pro publication
Publication

React Router Tutorial: Redirect Like a Pro

https://www.toptal.com/react/react-router-tutorial
Image of SolidJS vs. React: The Go-to Guide publication
Publication

SolidJS vs. React: The Go-to Guide

https://www.toptal.com/react/solidjs-vs-react

Skills

Languages

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

Frameworks

Angular, MUI (Material UI), Electron, Express.js, PixiJS, OAuth 2, Android SDK, Svelte, Angular Material, Unity, YARN, Next.js

Libraries/APIs

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

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, GIS, Webpack, Rollup, Stencil.js, Google Docs, Google Sheets, Flow, Adobe Experience Design (XD), Notion, Create React App, Amazon Cognito

Platforms

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

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), Linear Optimization, Patent Applications, Web Accessibility, Scrum Master, Slack App, Deep Neural Networks, Neural Networks, Patents, Business Patents, A11Y, i18n, Internationalization, Accessible Rich Internet Applications (ARIA), Workday, Writing & Editing, OpenStreetMap, ES6 Promises, GeoJSON, Virtual Reality (VR), Twitch, APIs, ESLint, Lint, OCR, Tesseract, Non-fungible Tokens (NFT), Computer Vision, Object Recognition, SSG, Solid.js

Paradigms

Agile, UI Design, Web Architecture, DevOps, Mobile App Design, Scrum, REST, Microservices

Education

2013 - 2016

Bachelor's Degree in Computer Science

University of Arizona - Tucson, AZ