Shaojiang is available for hire

Shaojiang Cai

Verified Expert in Engineering

Front-end Developer

Location

Zhangzhou, Fujian, China

Toptal Member Since

April 5, 2016

Shaojiang is a passionate front-end developer with ten years of professional experience. He excels with JavaScript, especially React and Redux. His skill set covers React, Redux, TypeScript, React Hooks, Next.js, Gatsby, Saga, and Git. He is also an active StackOverflow reviewer and GitHub user.

Responsive UI UI Development Front-end Single-page Applications (SPA)ESLint React Hooks CSS React HTML5 JavaScript jQuery REST APIs Git Material UI Redux

Portfolio

Pano

React, React Hooks, Canvas, Axios, TypeScript, Sass, MobX, Recoil...

Array

CSS3, HTML5, Svelte, React, Material UI, Storybook...

Bitfinex

React, WebSockets, React Hooks, Redux, Sagas, Gatsby, Material UI, CSS...

Experience

Front-end Development - 12 years CSS3 - 10 years React - 10 years JavaScript - 10 years Redux - 6 years React Hooks - 5 years Next.js - 5 years TypeScript - 5 years

Availability

Full-time

Preferred Environment

Chrome, IntelliJ IDEA, Ubuntu, MacOS, React, TypeScript, Next.js, GitHub, Jira, Figma

The most amazing...

...application I've built is a wildfire management system to monitor hundreds of cameras in real time, providing features including map, panorama, player, etc.

Work Experience

Lead Front-end Developer

2021 - 2023

Pano

Acted as the sole front-end developer for the wildfire management system Pano AI 360 https://360.pano.ai. The system connects to cameras, captures millions of real-time images, and trains AI models to detect and manage wildfires.
Architected Pano AI 360 in React. Set up the fundamental features, including routing, SEO, responsiveness, unit test, e2e test, logging, tracking, API data management, linting, typing, coding standard, performance monitoring, documentation, and more.
Developed most features of Pano AI 360, including map, panorama, canvas player, incident management, optical zoom, multi-factor authentication, form management, triangulation, permission control, etc.
Developed a highly customized panorama player in native HTML5 canvas. Users can concatenate camera images to view panoramas, pan images, zoom in/out, mark fires, resize, play frames with various time lapses, sync bearing, and support optical zoom.
Utilized Mapbox GL to support customized features, including showing station/incident icons, location search, various popups, flexible map layers, etc.
Performed extensive research on performance improvements. The system handles millions of images and thousands of incidents/stations. Did performance benchmarking on Recoil, Mobx, Redux, and useContext. Utilized strategies to improve performance.
Wrote well-organized documentation. Migrated the codebase to TypeScript. Refactored for better data management. Delivered hundreds of unit test cases.

Technologies: React, React Hooks, Canvas, Axios, TypeScript, Sass, MobX, Recoil, Responsive UI, Formik, Material UI, Jest, Cypress, React Testing Library, Tailwind CSS, Storybook, Sentry, Mixpanel, Yup, Mapbox GL, Mapbox API, ESLint, Google Tag Manager, Figma, Redux, REST, REST APIs, CSS3, HTML5, Markdown, Lodash, JavaScript, Styled-components, Responsive Design, React Redux, MacOS, GitHub, Jira, Modular CSS, Mapbox, Docsify, Front-end Development, IntelliJ IDEA, HTML, Git, Google Analytics, Google Analytics 4, UI Development, Search Engine Optimization (SEO), Test-driven Development (TDD), Responsive, Responsiveness

HTML/CSS Team Lead

2020 - 2021

Array

Led the HTML/CSS development team with five team members. Communicated with designers, the product manager, and other developers to manage the HTML page development.
Developed the site https://array.com in Next.js, consisting of tens of pages with great responsiveness.
Architected hundreds of pixel-level HTML pages https://html.dev.credmo.com with pure CSS for further processing. Responsiveness was greatly supported. Designed a theming mechanism to apply 30+ themes easily.
Refactored an existing HTML/CSS solution to Svelte; also worked on a great set of Svelte components as UI elements.

Technologies: CSS3, HTML5, Svelte, React, Material UI, Storybook, Single-page Applications (SPA), Next.js, TypeScript, JavaScript, REST APIs, Data Visualization, Tailwind CSS, Chart.js, Responsive UI, Canvas, SVG, Sass, Modular CSS, Themes, React Hooks, Figma, Responsive Design, React Redux, MacOS, GitHub, Axios, ESLint, Front-end Development, REST, IntelliJ IDEA, HTML, Git, UI Development, Search Engine Optimization (SEO), Responsive, Responsiveness

Senior Front-end Developer

2019 - 2021

Bitfinex

Acted as the core front-end developer on Bitfinex's main portal: https://www.bitfinex.com. It's a top cryptocurrency exchange in the world.
Became a main contributor to Bitfinex Security (https://setting.bitfinex.com/security), eosfinex (https://www.bitfinex.com/posts/616), and Bitfinex Staking (https://staking.bitfinex.com/).
Used the following technologies: React, Redux, Saga, WebSocket, Gatsby, Next.js, and many more.

Technologies: React, WebSockets, React Hooks, Redux, Sagas, Gatsby, Material UI, CSS, Single-page Applications (SPA), Next.js, TypeScript, JavaScript, HTML5, CSS3, Tailwind CSS, REST APIs, Jest, Cypress, Data Visualization, Audio, Axios, i18n, React Hook Forms, React Query, Contentful, Responsive Design, React Redux, GitHub, Responsive UI, ESLint, Bitcoin, Front-end Development, REST, IntelliJ IDEA, GraphQL, CSS3 Animation, HTML, Git, Node.js, UI Development, Search Engine Optimization (SEO), Responsive, Responsiveness

Senior Front-end Developer

2017 - 2019

Aptiv

Architected the front-end codebase of three separate projects.
Collaborated with a designer to implement pixel-level designs.
Built the SVG features, including zooming in and out, panning, drag and drop, and resizing.
Refactored the Drive Logs project with React hooks, redux-observable, and typesafe-actions.
Developed and maintained the nuScenes project from scratch: https://nuscenes.org.

Technologies: Front-end, Less, Lodash, React Hooks, React, Redux-observable, SVG, Redux, TypeScript, ECMAScript (ES6), Material UI, CSS, Single-page Applications (SPA), Next.js, Storybook, JavaScript, HTML5, CSS3, Amazon Web Services (AWS), REST APIs, Jest, Cypress, Data Visualization, Responsive Design, React Redux, GitHub, Responsive UI, Axios, ESLint, Amazon Cognito, Amazon Cognito User Pools, Amazon S3 (AWS S3), Front-end Development, REST, IntelliJ IDEA, HTML, Git, Google Analytics, Google Analytics 4, UI Development, Responsive, Responsiveness

Senior Front-end Developer

2016 - 2017

XChangeRate

Built the front-end codebase from scratch. Integrated TypeScript, Webpack, Jest, and other tools into production.
Built tens of common control elements with flexible parameters and designs, including buttons, dropdowns, tooltips, tabs, and checkboxes.
Integrated Bitcoin payment and Stripe for credit card payments.
Used WebSockets for real-time cryptocurrency trades.

Technologies: Front-end, Less, Lodash, WebSockets, Bitcoin, Stripe, ECMAScript (ES6), Webpack, TypeScript, Redux, React, Material UI, CSS, Single-page Applications (SPA), JavaScript, HTML5, CSS3, REST APIs, Responsive Design, React Redux, GitHub, Responsive UI, Axios, ESLint, Front-end Development, REST, IntelliJ IDEA, HTML, Git, UI Development, Responsive, Responsiveness

Front-end Web Developer

2016 - 2017

European Bioinformatics Institute

Worked on the project Europe PMC: https://europepmc.org.
Developed the front end for Europe PMC to serve millions of scientists.
Improved the performance of Europe PMC via benchmarking and tracking.

Technologies: Front-end, Lodash, jQuery, CSS3, JavaScript, Data Visualization, HTML5, Java, Highcharts, D3.js, React, Responsive Design, GitHub, Responsive UI, Front-end Development, Bootstrap, IntelliJ IDEA, HTML, Git, UI Development, Responsive, Responsiveness

Front-end Web Developer

2014 - 2016

RingCentral XMN

Helped to develop a platform to support RingCentral API developers based on AngularJS: https://developers.ringcentral.com/.
Built the mobile site from scratch in React and Gulp.
Replaced Grunt by Gulp to enhance the front-end automation workflow.
Developed many flexible Angular components, including Carousal, Flippable images, Sliders, etc.
Started and maintained open source project Angular-sui, which integrates AngularJS and Semantic-UI.

Technologies: Front-end, Lodash, Sass, React, AngularJS, JavaScript, HTML5, CSS3, Python, REST APIs, Responsive UI, Hackathons, Jira, TortoiseGit, Gulp, Grunt, Webpack, Zeplin, Responsive Design, GitHub, ESLint, Front-end Development, REST, Bootstrap, IntelliJ IDEA, CSS3 Animation, HTML, Git, UI Development, Responsive, Responsiveness

Bioinformatics Specialist

2012 - 2014

Genome Institute of Singapore

Built the front-end system to draw various and large-scale Bioinformatics data using D3.js.
Provided support for diverse Bioinformatics formats, including BED, BAM, Gene, and PSL.
Supported more flexible parameters to give users more control over the figure plotting, including four plotting modes: full, dense, packed, and squish.
Designed and implemented partial loading and parallel drawing from multiple sources for the sake of performance.
Communicated with back-end APIs to retrieve dynamic data.

Technologies: Front-end, Lodash, jQuery, D3.js, JavaScript, Python, REST APIs, Data Visualization, Highcharts, jQuery UI, CSS3, HTML5, Java, ECharts, GitHub, Front-end Development, IntelliJ IDEA, HTML, Git

Experience

Pano AI 360

https://360.pano.ai

Pano AI 360 is a SaaS platform for wildfire detection and management. It connects to cameras, captures millions of real-time images, and trains AI models to detect and manage wildfires.

The front-end features include a map, panorama, canvas player, incident management, optical zoom, multi-factor authentication, form management, triangulation, permission control, and many more.

Array

https://array.com

Array seamlessly integrates consumer credit, identity, and background data into your user experience and marketing funnels. It easily and securely gives your users personalized credit and financial data. It also lets users create a more engaging experience they’ll love.

Bitfinex

https://www.bitfinex.com/

Bitfinex is the longest-running and most liquid major cryptocurrency exchange. Founded in 2012, it has become the go-to platform for traders and institutional investors. Shaojiang worked as a core front-end developer on the exchange portal.

Bitfinex Staking

https://staking.bitfinex.com/

Bitfinex is the largest and most advanced cryptocurrency exchange. I architected it and built it from scratch, and it was developed with React. This is a single-page application to host some information about Bitfinex's staking policy.

Nuscenes

https://www.nuscenes.org/

nuScenes is a public large-scale dataset for autonomous driving. It enables researchers to study challenging urban driving situations using the full sensor suite of a real self-driving car. AWS Cognito and S3 file management are integrated for user and data management.

DPW (Developers Portal Web)

https://developers.ringcentral.com/

DPW is a web application to support developers of the RingCentral RESTful APIs and is based on AngularJS, React, and jQuery. It includes public pages, a WordPress-based blog, a developers' dashboard, and an administrators' dashboard.

I am one of the key front-end developers. I have developed most of the static pages and participated in developing the dashboards and mobile site.

BASIC | Browser for Applications in Sequencing and Integrated Comparisons

BASIC is an integrated system to efficiently store, process, and visualize large columns of next-generation sequencing (NGS) data. It provides real-time storage and visualization of large-scale bioinformatics data.

I was the sole developer of the BASIC front end. I designed and implemented the powerful and flexible data visualization feature using D3.js.

Publication

Hot Module Replacement in Redux

https://www.toptal.com/javascript/hot-module-replacement-in-redux

Skills

Languages

CSS, HTML, ECMAScript (ES6), TypeScript, Less, CSS3, HTML5, JavaScript, Sass, GraphQL, Python, Markdown, Java

Frameworks

Next.js, Material UI, Redux, Bootstrap, Tailwind CSS, Jest, Svelte, Cypress, AngularJS

Libraries/APIs

React, Lodash, jQuery, REST APIs, React Redux, Node.js, D3.js, Chart.js, MobX, Formik, React Testing Library, Mapbox GL, Stripe, Yup, Mapbox API, Highcharts, jQuery UI

Tools

Webpack, Git, Canvas, Google Analytics, IntelliJ IDEA, GitHub, Jira, Figma, Sentry, TortoiseGit, Gulp, Grunt, Zeplin, Amazon Cognito

Paradigms

REST, Modular CSS, Search Engine Optimization (SEO), Responsive, Test-driven Development (TDD)

Other

Redux-observable, React Hooks, Front-end Development, Single-page Applications (SPA), Front-end, Responsive Design, React Query, Responsive UI, Axios, ESLint, Google Analytics 4, UI Development, Responsiveness, i18n, SVG, Storybook, Data Visualization, Recoil, Bitcoin, WebSockets, Sagas, CSS3 Animation, Gatsby, Styled-components, Themes, Google Tag Manager, Audio, React Hook Forms, Hackathons, ECharts, Amazon Cognito User Pools, Docsify

Platforms

Contentful, Mapbox, Amazon Web Services (AWS), MacOS, Mixpanel

Storage

Amazon S3 (AWS S3)

Education

2008 - 2011

Master of Science Degree in Bioinformatics

National University of Singapore - Singapore

2004 - 2008

Bachelor of Engineering Degree in Information Systems

Renmin University of China - Beijing, China

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.

Share your needs

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

Choose your talent

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

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