Qplot Satellite

moon indicating dark mode
sun indicating light mode

Senior Front-End Engineer

March 22, 2017

Fang Jin

I make websites or apps using reusable web modules and components. My latest accomplishments focus on the building of plug and play (PnP) UI library with unified look and feel across multiple devices.

  • 9 Years, code with React and Javascript
  • 9 Years, design with CSS and Sass
  • 5 Years, practitioner of Functional Programming
  • 3 Years, manager of agile tech team

Check out more on my Awards and Experience.

Education

Johns Hopkins University, 2000 - 2006

M.S and Ph.D., Bio-molecular chemical engineering

Awards

Highly Commended Award, Dec 2019

Highly Commended award in Best Technology Initiative in Europe!, the 140th Financial Innovation Awards. Credit Suisse, US.

Highly Commended Award

Recognition Award, Jan 2017

Recognized for outstanding performance, for the exceptional UI framework build. Deutsche Bank, US.

“Fang continues to build his MC profile globally and is well respected across his peers group and stakeholders. Fang has helped build complex business solutions that can sustain a high level of performance in CE where he has proven himself. He should be considered for promotion in the next round.” - performance review from Deutsche Bank

Book Cover Design, Sep 2010

Accepted article and front cover design for the book and magazine. Book “Multi-scale Modeling of Cancer”, and Journal Nonlinearity 23(2010)

Activities

Advent of Code, 2019

Compete for 2019 and rank #8 within the company

RecoveryHub, 2014

Volunteer for disaster and humanitarian relief

University of California Irvine, 2007

College math class teacher for two semesters

Stack Overflow

Experience

Credit Suisse, 2019 -

Served as the UI architect and tech lead for Credit Suisse compliance team, responsible for architecting websites and designing the UI/UX library following the company branding.

I manage the tech team of size 10 (developer mostly), work with the business analysis and the corporate designer, run typical bi-weekly sprints and regularly report to the project owner.

I work with the L1 production support team and actively address L2/3 production issue/bug in the timely manner.

Internal Compliance, Jan 2019 - Jan 2020

Internal Compliance is composed of collection of flagship products in the employee compliance space which includes personal account trading, restricted list, registration and on-boarding, manager supervisory reports and team view.

iComply PA Trade

Highlights

  • React: Use community react as the baseline for UI development
  • Branding: Apply company brand-net styling UI material for consistency
  • Scalability: Design scalable architect across multiple application domains
  • Workflow: Multiple stages of approval workflow for account disclosure
  • Disclosure: Complex form fields related to Security trading domain
  • Report: Workflow for displaying and approve supervisory summary report
  • Proxy: Workflow for assigning another employee as proxy for trading
  • Manager: Workflow for mapping employee to different managers

Outside Business Interest, Feb 2020 -

Outside Business Interest is a product in Employee Compliance space which enables staff of bank to submit their Outside Business activity (Private Investments, Political Activities, Outside Business Interests) and facilitates its review and approval process.

iComply PA Trade

Highlights

  • React: Build highly reusable UI Library to speed up development
  • Branding: Bake company brand styling into the core UI library
  • Role: Support different authorization usages to the public site
  • Crud: Design form crud engine to facilitate form creation and review
  • Form: Design collection of complex form input widgets
  • Notification: Cron job and email upon reminder and confirmation
  • Migration: Migrate legacy application data as add-on to the new platform

MercuryGate International, 2018

UI React Developer

Posted Equipment Management

Sep 2018 - Jan 2019

Management of equipments for carriers with different origin and destination and availability settings. Transaction page submission with multiple equipments with error handling and display on each row and each field.

Custom Multi-select Location

Highlights

  • React: Fast development using in-house react and UI library for widgets and styles
  • Mobx: Complex form handling with nested object/array data structure and real-time field error validation
  • Typehead: Typehead widget design to lookup carrier by name or id
  • Quantity: Support copy/duplicate/change quantity of each equipment on the form
  • Multiselect: Various multi-select widgets supporting lookup table
  • Directory: Custom widget wired with multi-select widget for location selection
  • Location: Multiple location selector based on country, states, and postal codes
  • Datepicker: Date range picker for equipment availablility
  • Lightbox: Form sliding from edge of screen and pinned on the screen
  • Pill input: Custom widget for selecting items delimitated by comma and displayed as pill label with hover message

Shipping Order Dashboard

Aug 2018 - Sep 2018

Dashboard app providing custom overview of current reported shipping orders.

Highlights

  • React: Fast development using common library for widgets and styles
  • UI Library: Rely on large set of in-house React and Sass components
  • Statistics: Heavy processing of server data via Lodash and Moment library
  • Chart: Beautiful SVG chart via D3 and C3js library
  • Data: Redux workflow of providing centralized data and actions
  • Form: Mobx provided for form error handling
  • Spinner: Provides various spinner and shimmer effects during action transition

Deutsche Bank

UI AngularJS Architect

Market Clearing

2015 - 2018

I created branding header, menu, fly-in menu, and form etc. that supports light/dark themes and can be plugged in with no more than 10 lines of code. All UI elements are also domain-aware with swappable authorization services maintaining user permissions and preferences.

Serves as UI and AngularJS architect in Market Clearing domain for 45+ banking applications.

The product provides a single UI for operations, container for apps in one place with standardized navigation and look and feel. It also serves as a rapid application dev framework with a set of directives and services, ex. headers, navigation, entitlements, etc, to facilitates on-boarding of new apps.

Date Range Picker

Architect & Design

  • Support both IE 10/11 and Chrome browser
  • Use Angular and Bootstrap for fast development
  • Standardized style sheet for consistent look and feel
  • Extract color from design spec to form theme color base
  • Support light and dark themes and dynamic toggle in-between
  • Support dashboard layout with Responsible and Flex design
  • SVG icon design and packaging for common UI and business actions
  • Custom animation keyframe design with fallback to no-animation

Reusable Component

  • Reusable branding header, footer, menu as well as pluggable generic services
  • Directives for single and multiple select form input with consistent look and feel
  • Directives for date picker and date range picker with consistent look and feel
  • Use third party Ag-grid for sophisticated business grid usage with custom theme designed
  • Use third party Highcharts for all dashboard bar pie charts with custom theme designed
  • Integration with authentication and authorization service for permission control
  • Service supporting both Http enabled spinning notification and manual toggle
  • Service supporting both generic user prompt and custom popup dialogs

People Designs

“Fang is one of the most talented software developer / architecture individual I have ever met. His ability to take vague customer requirements and turn them into a fantastic software solution never ceased to amaze me …” — David Pfeiffenberger, President / COO of PlusDelta Technologies

Apnea, 2018

Lead React Developer

An educational program for individuals who have undergone overnight sleep testing through their local sleep center.

Architect & Design

  • Design: Color theme, larger font and checkbox size favoring senior person
  • React: Rapid design with consideration of collaboration with non-tech editors
  • Layout: Support public and private pages via routing switch
  • Page: Dynamic page setup (38 pages) with page settings such as audio and navigation
  • Question: User provided multi-choices question fields injection to specific page
  • Answer: Question answers synced with the rest of the project and saved in local storage
  • Audio: Custom HTML5 audio design toggable along with each page load
  • Print: Allow print review page

Prepare For Your Care, 2014 - 2016

Lead AngularJS / Laravel Developer

Served as lead AngularJS and Laravel developer for educational applications, including southern regional center of excellence in nutrition education and obesity prevention, and a hospital stage III counseling program PrepareForYourCare.org. Projects mostly builds book-like chapter navigation with video/narration helper for elder visits. Projects are hosted under HIPPA server with consideration of Section 508 for people with disability. Customers include 200 doctors and 50,000 users around the globe.

Prepare for your care

Architect & Design

  • HIPPA server host and deployment plan protecting health care privacy
  • Disability compliance with video, and narration support with high contrast
  • Language support translations made for pages, snippets, and graphics
  • Theme and content changes entirely based on access domain
  • Bootstrap is used for fast prototype for desktop, iPad and other devices
  • Support Chrome, Safari, Firefox and IE 8, 9 and 10

Reusable Component

  • Modular design for both Sass and Javascript in developing UI components
  • Two-factor SMS enabled authentication for better security protection
  • Password recovery based on either username or 3 out of 6 question answers
  • Support video play with Vimeo and JWPlayer engine and custom subtitle toggle
  • Auto generate hundreds of forms with generic UI and submission handling
  • Allow manager to modify each page content stored in file storage
  • Administer language files through web interface with easy switch
  • Automatic fill out custom PDF tempalte with user filled-out

Past Experience

RxAnte, Sep 2014 - Mar 2015

UI / Drupal Developer

Joined a second stage healthcare startup company working as a UI / Drupal developer. Provided enterprise Drupal development, support and deployment for a hospital/insurance/doctor relationship web application which helps their patients to adhere with their existing medications therefore upgrade ranking star in the healthcare system. I was responsive for refining Dashboard to present data collected from doctor office and insurance company and providing model prediction display of the patient behaviors. Analyzed data for each account (multi-tenant) are sampled from 10-20 contracts with average 0.5 to 5 millions patients.

Duke University, Jan 2013 - Sep 2014

Lead UI / Drupal Developer

Developed Drupal front facing websites for Duke medical center and Duke university building landing pages for new students advising network application. The project splits into discovery, development, theming and support stages, and requires 300 panel layouts, 12 content types, 10 custom modules and 60 custom views and took 8 months and 1000 billable hours to finish for single developer. After the launch the site has been used by 1,400 undergraduates, 640 faculties in 50 majors.

PlusDelta Technologies, Jun 2012 - Dec 2013

Lead UI / Drupal Developer

Joined a startup healthcare company, worked as a UI / Drupal developer building the flagship product that tracks medication inside hospitals like FedEx. I help draft interface design and build a medication tracking and workflow process improvement solution for hospital pharmacies that uses handheld smart mobile technology with an integrated web-enabled software that verifies, records and monitors every step in the process of medication preparation, dispensing, and delivery. The project took 1 year with 2000 billable hours to finish and has been deployed and used by 4 hospitals.

Teryn Ashley Enterprises, Apr 2011 - Jan 2012

Lead UI / PHP Developer

Developed a webinar replay system of pre-recorded webinar that can be watched by invited users on preset (recurring) time. I was responsible for gathering business requirement and prototyping the UI design for business workflow. I also worked with an offshore PHP developer and we together coded frontend and backend logic for serving videos via PHP and MySQL.

Replay Webinar System

DataRecoveryMan, Apr 2011 - Dec 2011

UI Developer

Helped DataRecoveryMan.com build an application for managing inventories of hard drive repair order, tracking order status and uploading order invoice. I was responsible for gathering the business requirement, prototyping design from business workflow and working with an offshore PHP developer to deliver the application.


with strategy, design, system and more ...