Nathan Babcock

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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.