Tsung-Ting (John) Chen, Developer in Toronto, ON, Canada
Tsung-Ting is available for hire
Hire Tsung-Ting

Tsung-Ting (John) Chen

Verified Expert  in Engineering

Software Developer

Location
Toronto, ON, Canada
Toptal Member Since
October 28, 2020

With over 13 years of web development experience, John has led teams in enterprise fintech and telecom companies such as OMERS, Royal Bank of Canada, TELUS Digital, Rangle.io, and Progressive Insurance. John specializes in both Angular and React front ends with optional Node.js support. John sees Toptal as an amazing platform because the variety of opportunities it offers will allow him to meet and work with other top-quality engineers in the field.

Portfolio

Agoro Carbon Alliance - Main
React, Node.js, Next.js, LaunchDarkly, DocuSign, Mailchimp...
TD Securities
Angular, GraphQL, Front-end, Agile, Figma, Back-end, CSS3, JSON, Redux
OMERS
Next.js, Node.js, Contentful, React Redux, React, Git, Slack, HTML, CSS...

Experience

Availability

Part-time

Preferred Environment

MacOS, Slack, Git, React Redux, Redux

The most amazing...

...thing I developed is a rendering engine capable of custom routing, layout, and content generation by modifying content on a CMS.

Work Experience

Senior Full-stack Developer

2022 - PRESENT
Agoro Carbon Alliance - Main
  • Developed software solutions that streamline the sales and contracting process within the global carbon credit initiative, facilitating the onboarding of new farmers.
  • Encapsulated Grommet form components within a rendering engine that accepts a configuration JSON input, generating React elements that collaborate to create a functional form.
  • Set up webhooks for seamless integration with Salesforce. As leads progressed through the Salesforce pipeline, our system could trigger webhooks to create Auth0 user accounts, streamlining the lead-to-user conversion process.
  • Developed AWS Lambda functions to serve as gateways for Salesforce webhooks. These functions encompassed tasks such as parsing request bodies, authentication checks using JSON Web Token (JWT), and other essential processing steps.
  • Designed a system that managed the lifecycle of contracts as they transitioned through various statuses in both Salesforce and our system. The system reacts to status changes that impact opportunities and handles these effects.
Technologies: React, Node.js, Next.js, LaunchDarkly, DocuSign, Mailchimp, Salesforce SOQL/SOSL, Grommet, RESTful Microservices, PostgreSQL, AWS Lambda, Front-end, REST, Agile, Figma, Back-end, SQL, CSS3, Express.js, Redux

Senior Front-end Developer

2020 - 2022
TD Securities
  • Developed an application that configures report aggregation methods for our reporting platform. These parameters significantly improved report generation efficiency, ensuring that the generated reports are both meaningful and performant.
  • Maintained and enhanced a versatile reporting application capable of reporting data for various teams within TD Securities. This involved working with a dynamic GraphQL layer, enabling seamless database queries.
  • Implemented a migration tool to assist business analysts in migrating their configurations between environments efficiently. This tool streamlined metadata definition setup across environments, reducing setup time and improving workflow efficiency.
  • Leveraged the power of AG Grid to produce reports resembling spreadsheets, focusing on critical trading metrics such as profit-loss and book value. These reports have been instrumental in providing valuable insights into trading operations.
Technologies: Angular, GraphQL, Front-end, Agile, Figma, Back-end, CSS3, JSON, Redux

React Chapter Lead

2019 - 2020
OMERS
  • Managed 16 React developers across different teams and facilitated cross-team functions such as chapter meetings, component library guild, and initiatives like feature flags.
  • Created a dynamic content rendering engine to read from Contentful CMS and display custom webpage content and layout based on the data retrieved. Having content as data eliminated the need to deploy code whenever creating or updating a page.
  • Used React Redux to manage state in a complex and highly interactive portal for OMERS Pension, designed for logged-in users.
  • Communicated, built, and demoed the proof of concept (POC) used in the Contentful CMS website builder to business leaders, then led the team to implement that idea into a successful product.
  • Mentored and led four junior developers, three of whom received team and company recognition as intermediate-level developers after one year.
Technologies: Next.js, Node.js, Contentful, React Redux, React, Git, Slack, HTML, CSS, JavaScript, Front-end, Mobile First, REST, Agile, Figma, Back-end, TypeScript, CSS3, JSON, Express.js, Redux

Senior Angular Developer (Contract)

2019 - 2019
Royal Bank of Canada
  • Separated Angular project from its Go back end, enabling Angular to be deployed and served separately from Go. This allows for better separation of concern and an independent release schedule.
  • Implemented the Node.js server as a backend for frontend (BFF), with Passport.js as the authentication layer. This allows the Go server to become a microservice and focus on business logic.
  • Integrated OAuth into the Node.js server to pave the path for a single sign-on (SSO) experience with other Royal Bank services.
Technologies: Go, Passport.js, Node.js, NgRx, Angular, Git, Slack, React Redux, HTML, CSS, JavaScript, Front-end, REST, Agile, Figma, Back-end, TypeScript, CSS3, Webpack, JSON, Express.js, Redux

Software and Architecture Consultant

2018 - 2019
RewardOps
  • Embedded with client company teams, including LoyaltyOne and BMO, and implemented front-end applications to support RewardOps' Software as a Service (SaaS) back end.
  • Wrote a transform library to convert RewardOps back-end responses to transform data to deal with specific UI rendering concerns.
  • Managed a demo front-end client application to showcase RewardOps' Software as a Service (SaaS) capabilities to prospective clients.
Technologies: NgRx, Node.js, Angular, Git, Slack, React Redux, Passport.js, HTML, CSS, JavaScript, Front-end, Mobile First, REST, Agile, Back-end, TypeScript, CSS3, Webpack, Redux

Lead IT Architect

2017 - 2018
TELUS Digital
  • Developed a custom rendering engine to allow content creators to build the site they want without going through developers.
  • Created a what you see is what you get (WYSIWYG) editor to read and save content, enabling a more straightforward GUI and better site editing experience.
  • Built a grid system to eliminate the need for an ever-expanding collection of unique UI renderers. A new website element can be created through the composition of grid components.
Technologies: Antd, Contentful, React, Git, Slack, React Redux, HTML, CSS, JavaScript, Front-end, Mobile First, REST, Agile, Back-end, CSS3, Webpack, JSON, Redux

Solution Architect

2015 - 2017
Rangle.io
  • Provided onsite consultation and mentorship, traveling to the client's office and directly mentoring three software teams delivering software.
  • Trained and mentored developers on areas such as Redux patterns, separation of data and logic, and data modeling for the front end.
  • Provided architectural code reviews for the client's pull requests to ensure the single-direction data flow was implemented correctly.
  • Adapted and implemented the correct Agile and Scrum philosophy in challenging the Waterfall organization.
  • Provided weekly consultation sessions to advise on the previous week's problems and work out plans for work needed to be completed in the following week.
  • Reviewed Redux implementation and observable usage to ensure best practices were followed.
  • Suggested internationalization strategies using NGX-translate and Angular2 translation implementation.
  • Developed a three-day training course to build enterprise-level software using Angular2 and Redux.
  • Delivered training through live coding and exercises. Used slides as supplementary material.
Technologies: Node.js, NgRx, Angular, Git, Slack, React Redux, Passport.js, HTML, CSS, JavaScript, AngularJS, Front-end, Mobile First, REST, Agile, Back-end, SQL, TypeScript, CSS3, Webpack, Redux

BlueBird Stock Random Walk Analysis

If we take stock fluctuations as a series of numbers whose relations with each other are only a series of random deltas, is there an algorithm to outperform the buy-and-hold strategy? This is the simulation and evaluation tool created to evaluate such a strategy.

Based on the algorithm created from the findings here, I built a trading algorithm hooked to Questrade API and traded with real money. It ran for one year before Questrade changed its user agreement and shut it down. The algorithm performance gained 13% versus a buy-and-hold strategy of a 15% gain.

TELUS Digital Site Builder

https://www.telus.com/en/
A React rendering engine that takes content from Contentful CMS and renders dynamic webpages. Having layout information and web content retrieved from Contentful enables publishing flexible, dynamic web pages without the code deployment.

OMERS Static Site Generator

https://www.omers.com/
A React-based Next.js application taking Contentful data organized in rows and dynamically rendering it onto the webpage. The payload is cached per page to improve performance. The ability to publish static content outside of release cycles proved extremely valuable during COVID-19 times, where information needs to be shared quickly. A two-week deployment cycle would hurt business values.

Languages

HTML, JavaScript, CSS, SQL, TypeScript, CSS3, Java, C, C++, PHP, Flash ActionScript, Go, GraphQL

Frameworks

Angular, Next.js, Ionic, Express.js, Redux, AngularJS

Libraries/APIs

React, React Redux, NgRx, Node.js, Passport.js, Antd, jQuery

Tools

Git, Slack, Figma, Webpack, LaunchDarkly, Mailchimp

Paradigms

REST, Agile, Mobile Development

Platforms

Contentful, MacOS, Salesforce SOQL/SOSL, AWS Lambda

Storage

MongoDB, JSON, Databases, MySQL, Redis Cache, PostgreSQL

Other

Algorithms, IT Security, Front-end, Back-end, Full-stack, Mobile First, Server-side Rendering (SSR), DocuSign, Grommet, RESTful Microservices

2003 - 2007

Bachelor's Degree in Computer Engineerinig

University of Toronto - Toronto, Canada

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