Rob Sutcliffe, Developer in Reading, United Kingdom
Rob is available for hire
Hire Rob

Rob Sutcliffe

Verified Expert  in Engineering

User Interface Engineer and Software Developer

Location
Reading, United Kingdom
Toptal Member Since
February 16, 2022

Rob is a principal UI engineer with over a decade of professional experience working with React, Tailwind, and Next.js. He is particularly interested in data visualization using D3.js and Framer Motion animations. Rob has a design background as he has a degree in graphic communications and extensive experience working as a UI designer, design manager, and design consultant.

Portfolio

BNP Media, Inc.
React, JavaScript, Redux, D3.js, Material UI, Charts, Data Visualization...
PepsiCo
JavaScript, D3.js, Node.js, HTML, CSS, Alpine.js, Tailwind CSS, Git, GitHub...
Arizona State University
Tailwind CSS, Ant Design, Validation, Next.js, React, React Hook Form, SWR...

Experience

Availability

Full-time

Preferred Environment

WebStorm

The most amazing...

...thing about me is that I've set up a professional speaking group and run successful workshops about both design and development.

Work Experience

React Developer

2023 - PRESENT
BNP Media, Inc.
  • Created a tool to analyze open-ended responses to questions and convert them into a treemap.
  • Recreated the codebase in TypeScript, including enums and interfaces.
  • Updated all D3.js charts to be responsive before creating a comparison view of the charts.
Technologies: React, JavaScript, Redux, D3.js, Material UI, Charts, Data Visualization, Dashboards, Application State Management, Node.js, TypeScript, OpenAI

Full-stack Developer

2022 - 2022
PepsiCo
  • Developed a visual query builder for the marketing team to select market segments and generate reports.
  • Created interactive data visualizations for reports of market segments.
  • Built an analytics dashboard showing various metrics of the effectiveness of different AI data models.
Technologies: JavaScript, D3.js, Node.js, HTML, CSS, Alpine.js, Tailwind CSS, Git, GitHub, Data Visualization, Snowflake

Front-end Engineer

2022 - 2022
Arizona State University
  • Added new interactions to the Course Designer tool, allowing teachers to create and preview new learning content.
  • Created the teacher experience for teachers to view students' scores and responses to interactions during online courses.
  • Implemented form validation and sanitation for any user inputs.
Technologies: Tailwind CSS, Ant Design, Validation, Next.js, React, React Hook Form, SWR, Axios, Styled-components, Auth, Functional Programming

UI Developer

2021 - 2021
The Economist
  • Created a complex custom and responsive grid for a unique and adaptable page layout.
  • Built custom transitions to animate pages in a unique way.
  • Degraded substitute transition for older browsers.
  • Implemented Google Tag Manager for the marketing team to track users' actions.
  • Separated content into markdown files and animation/transition specs and positioned them into JSON files.
Technologies: Next.js, Framer Motion, WebGL, JSON, Markdown, CSS, DataViz, Responsive UI, Browsers, Google Tag Manager, Data Visualization

Tech Lead

2019 - 2020
FilmDoo
  • Developed the Node.js scraping and analysis API to recommend films and other content based on a language level.
  • Implemented observable design patterns using Socket.IO for dual-screen functionality.
  • Created mobile application prototypes using React Native.
  • Customized the Strapi CMS to add functionality for observables and set up daily cron jobs to mirror an existing database.
  • Kept the site architecture clean, making it easy for outsourced developers to get up to speed and quickly add value to the codebase.
  • Established a CI/CD pipeline with testing and automatic deployments from GitHub branches.
Technologies: Tailwind CSS, React, Next.js, Socket.IO, Heroku, GitHub, Figma, Framer Prototyping, Webpack, Node.js, React Native, CI/CD Pipelines, Functional Programming, TypeScript, TypeScript 3, User Interface (UI), Full-stack, REST, REST APIs, PostgreSQL, SQL

Principal Application Engineer

2016 - 2019
Oracle
  • Liaised directly with the data science team to understand the data better and create unique D3.js data visualization.
  • Created a custom browser extension for stubbing and integration testing across environments.
  • Built custom user interfaces using Oracle JavaScript Enterprise Toolkit (JET).
  • Wrote unit tests and maintained code coverage across the whole project.
  • Participated in and administered code reviews to maintain high coding standards.
  • Worked in an agile cross-functional engineering team.
Technologies: Oracle JavaScript Extension Toolkit (JET), Knockout (Knockout.js), RequireJS, Karma, Git, CSS, HTML, Jenkins, Webpack, D3.js, Node.js, Sinon.JS, DataViz, Front-end, Data Visualization

User Interface (UI) Consultant

2015 - 2016
Jive Software
  • Consulted multiple multinational organizations, identifying each customer's unique needs, proposed design solutions, and customized their Jive instance.
  • Mended or created templates and components built with Google Closure or Soy templates.
  • Identified customer needs, then proposed and presented custom design solutions.
Technologies: JavaScript, CSS, SaaS, Closure Templates, HTML

Senior Design Manager

2013 - 2014
Chartered Institute of Marketing (CIM)
  • Designed and built multiple microsites for one-off events.
  • Created a complete design system of reusable components.
  • Consulted directly with a leading brand agency for an international rebrand.
  • Managed the complete creative team while rebranding the whole institution.
Technologies: CSS, Sass, Sketch, Illustrator CC, Design Systems, SVG, Rebranding

User Interface (UI) Designer and Developer

2012 - 2013
Hitachi Data Systems
  • Rearchitected an internal project management tool using a model–view–controller (MVC) framework.
  • Interviewed and observed users to help understand user flows and recreate the user experience.
  • Worked directly in the project management team, ensuring the application was useful for both engineers and project management.
  • Utilized multiple jQuery extensions to keep the codebase simple and easy to maintain.
Technologies: PHP, CodeIgniter, jQuery, JavaScript, Focus Groups, User Experience (UX), User Research, User Flows

Web Designer and Developer

2010 - 2012
Growth Engineering
  • Built a custom content management system (CMS) using PHP for the corporate site.
  • Identified the brand characteristics used for branding guidelines.
  • Created custom e-learning slide templates using ActionScript.
Technologies: PHP, MySQL, jQuery, CSS, JavaScript, PHP MVC, CodeIgniter, Flash, ActionScript 3, Articulate Storyline, Adobe Captivate, Instructional Design, HTML

Web Designer and Developer

2008 - 2010
School Website
  • Liaised directly with clients to ensure the design met their standards.
  • Built websites from scratch on top of companies' own custom CMS.
  • Handled multiple clients simultaneously and launched numerous websites per month.
Technologies: Adobe Illustrator, Adobe Photoshop, CSS, HTML, JavaScript, Flash

Economist Intelligence 75th Birthday

https://www.youtube.com/watch?v=-hYjk9hpWWo
Created a microsite for The Economist Intelligence 75th anniversary. I worked directly with the designer, strategist, and client to design and develop a unique one-off site. Transitions were created using Framer Motion.

Language Learning with Video App

https://youtu.be/2vUus1VzEyE
A Strapi and Next.js application with scraping, fuzzy search, and a custom video player. Its features include JWT OAuth, fuzzy search, and a daily cron job to mirror existing databases and images. It allows teachers to find and adapt video clips from foreign language films, add questions, and set them for homework. Teachers can upload and share worksheets that relate to the lessons.

Advanced JavaScript Course for Scrimba

https://scrimba.com/playlist/p6WwDCY
I worked directly with Scrimba as a guest lecturer to create an advanced JavaScript module, teaching ES6 and how to apply it to improve the application's architecture. I wrote the syllabus for the module, created the example application, recorded, and edited it, making alterations as the platform owners requested.

Socket.IO Real-time Game

https://youtu.be/c3r1glqMMsU
Built an application for FilmDoo for students to watch and interact with films in real time and for teachers to control the film and see results at the end. The application heavily uses WebSockets and is animated with Framer Motion.
2000 - 2003

Bachelor's Degree in Graphic Communications

University for the Creative Arts - Farnham, England

SEPTEMBER 2023 - SEPTEMBER 2025

Data Analyst Professional Certificate

DataCamp

MAY 2019 - PRESENT

Information Visualization Specialization

New York University | via Coursera

MAY 2019 - PRESENT

Data Visualization with R

Data Camp

Libraries/APIs

React, D3.js, React Motion, Node.js, jQuery, RequireJS, Sinon.JS, Three.js, WebGL, Socket.IO, REST APIs, React Hook Form, Auth

Tools

Adobe Illustrator, Figma, WebStorm, DataViz, Flash, Articulate Storyline, Adobe Captivate, Sketch, Illustrator CC, Karma, Git, Jenkins, Webpack, Adobe Photoshop, GitHub, Cron, Auth0

Frameworks

Tailwind CSS, Next.js, PHP MVC, CodeIgniter, Oracle JavaScript Extension Toolkit (JET), Knockout (Knockout.js), React Native, OAuth 2, JSON Web Tokens (JWT), Ant Design, Alpine.js, Redux, Material UI

Languages

CSS, JavaScript, HTML, R, PHP, ActionScript 3, Sass, TypeScript, TypeScript 3, Markdown, SQL, Snowflake, Python

Storage

MySQL, PostgreSQL, JSON

Paradigms

UI Design, Design Thinking, Instructional Design, Functional Programming, REST

Platforms

Heroku

Other

User Experience (UX), Graphic Design, Framer, APIs, Information Design, Data Analytics, Google Tag Manager, Focus Groups, User Research, User Flows, Design Systems, SVG, Rebranding, SaaS, Closure Templates, Recording, Audio, HTML Canvas, Framer Prototyping, CI/CD Pipelines, Web Video, Search, User Interface (UI), Front-end, Full-stack, Validation, SWR, Axios, Styled-components, WebSockets, Framer Motion, Strapi, Web Scraping, Responsive UI, Browsers, Data Visualization, Data Engineering, Charts, Dashboards, Application State Management, OpenAI

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