Nathan Babcock
Verified Expert in Engineering
Front-end Developer
Nathan是一名高级React工程师,也是使用React简化UI/UX的专家. 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.
Portfolio
Experience
Availability
Preferred Environment
Amazon Web Services (AWS), React, TypeScript, Node.js
The most amazing...
...thing I've built is an end-to-end design system, 包括内部文档站点和DevOps管道来部署和维护它.
Work Experience
Electron Developer
Rebel Systems (Via Toptal)
- 为军用电器显示亭开发了一个电子/反应图形用户界面.
- Built the React app from scratch with MUI (Material UI) components.
- 设计了一个自定义的可访问性实现,通过四个方向按钮控制应用程序.
- 后端集成了Protobuf和ZeroMQ发布/订阅消息/序列化.
- Utilized Zustand, a novel, lightweight React state management library, providing the app with a flexible and modular foundation.
Senior React Developer
Zeedz GmbH (Via Toptal)
- 为一款名为Zeedz的NFT游戏实现React前端.
- Built user flows, including user log-in and sign-up, purchase and unboxing experience, 以及存储在Flow区块链上的玩家数字收藏品的库存管理.
- 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.
- 通过Google Hangouts远程合作,主要与德国和英国团队成员合作.
JavaScript Game Developer
University of Windsor (Via Toptal)
- 为温莎大学教授的心理学研究项目制作了一款游戏.
- 在转向网站环境之前,在Electron中构建一个初始原型.
- 实现了配置游戏/实验的基本CRUD功能.
- 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.
- 在AWS上托管部署(Amazon EC2、Amazon Route 53、Docker、NGINX、Let’s Encrypt和HTTPS).
Three.js Developer
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.
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. 与UX设计师密切合作,从零开始实现这些组件, from mockups to production code.
- Traveled to global company locations in Poland, India, 并在美国各地举办关于使用和贡献设计系统的研讨会.
- Handled ongoing maintenance and support of the design system, overseeing 100,000+ downloads over several years.
- Led bi-weekly Agile sprint meetings, standups, retrospectives, 与三个开发人员组成的前端团队进行待办事项梳理会议.
- 面试、指导设计系统团队的三名新员工和两名实习生.
- 创建了一个Nginx网关服务器,作为内部微服务网络安全的反向代理. 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.
- 主持一个有350多个前端开发人员使用我们构建的库的内部讨论板,分享最新前端技术和最佳实践的知识.
- Audited the Motorola design system for security vulnerabilities, 实现零关键或主要漏洞的NPM审计报告.
- 参加要添加到库中的新前端组件的设计评审,并帮助开发团队将UX需求转换为代码实现.
Android Developer
University of Arizona
- 重新设计并创建了最新版本的“亚利桑那移动”应用程序——亚利桑那大学校园的官方安卓应用程序, including services such as maps, news, and class schedules. The app is available for download in Google Play.
- 使用Java和Android Studio开发应用程序,并使用Git分支进行合并和版本控制.
- Collaborated with graphic designers to design app user interfaces.
Experience
Rebel Systems GUI (Electron React App for Military Applications)
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)
http://silience.us/• 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)
http://www.regenaqua.com/Game of Squares (Full-stack Browser Game for a Research Study)
• 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
•托管在AWS上(EC2实例,Amazon Route 53, Docker, NGINX, Let's Encrypt和HTTPS)
•在转向网站之前,最初的原型是在Electron中构建的
Zeedz (NFT Marketplace in React and GraphQL)
http://zeedz.io/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.
在Google Hangouts上,团队合作完全是远程的,主要是与德国和英国的合作者合作.
hypertrigger(面向玩家的Rust, Tauri, FFmpeg和SolidJS计算机视觉应用程序)
http://hypetrigger.io/In addition to the core engine, 我在一个名为Tauri的相对较新的框架中构建了一个本机Windows前端, similar to Electron, 但与Rust集成,并使用系统WebView,而不是绑定Chrome的实例. The front end is also built using SolidJS, 一个类似于React的框架,但更注重高性能,非常适合这种性能要求很高的视频处理和机器学习应用.
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. 内容是从JSON配置文件和第三方REST API创建的.
Algernon (Three.js Maze Game)
http://excalo.itch.io/algernon使用Google Drive作为CMS (CSS技巧文章,GitHub Repo和npm包)
http://css-tricks.com/using-google-drive-as-a-cms/Gem Drop (Prize-winning 2D Physics Game with PixiJS and HTML5 Canvas)
http://www.kongregate.com/games/excalo/gem-dropNodescape(带有实时WebSocket多人网络的浏览器策略游戏)
http://github.com/nathanbabcock/nodescapeFFmpeg Sidecar
http://github.com/nathanbabcock/ffmpeg-sidecar我在GitHub上收到了大约80颗星,并且正在进行拉请求和贡献.
Skills
Languages
JavaScript, TypeScript, Sass, HTML, HTML5, ES5, CSS, CSS3, TypeScript 3, Java, GraphQL, Rust
Frameworks
Angular, Material UI, Electron, Express.js, PixiJS, OAuth 2, Svelte, Angular Material, YARN, Next.js
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, 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
Platforms
Visual Studio Code (VS Code), Docker, Azure, Amazon Web Services (AWS), Blockchain, Amazon EC2, Webflow
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, Solid.js, Weebly, Vite, PNPM, Game Design
Paradigms
Agile, UI Design, Web Architecture, DevOps, REST, Microservices, UX Design, Role-based Access Control (RBAC)
Storage
MongoDB
Education
Bachelor's Degree in Computer Science
University of Arizona - Tucson, AZ