gui gurl

This is a prototype of a trade ticket entry screen and blotter for Equities. I'm currently working on a mock UI Server to push live market data to the UI over web sockets, and to show an execution price for trades.

Implementation: React, Typescript, Context API, Ag-Grid, Webpack, Ant Design, HTML/CSS

Koicoin is a prototype of a crypto trading application. It allows users to type in addresses (random strings) and send coins to one another. Interactions are visualized using a Sankey graph.

To interact with the UI, type a name and login. If that name (address) does not currently exist, a new entry will be created and you can send coin to other existing or newly created addresses. All addresses are case sensitive. You can logout and login as other addresses to see how interactions are charted. Real auth is not within the scope of this prototype.

Implementation: Next.js, Typescript, React, Context API, Ant Design, Styled Components

Duck Legends is an interactive, educational farming game which teaches kids about animals and farm economics. It is an unfinished project I started in 2013.

Several of the characters, including the 3D duck, were modeled inside Blender, rigged for animation and then exported. The duck can dynamically change skins and downsizes to a 275KB JS file that can easily be imported using ThreeJS/Webgl. I try to use as many native WebGL shapes as possible for performance reasons. The trees are recursively rendered using multi-sided geometry to give the appearance of a smooth surface and are designed to randomly generate branches and leaves when planted. The digging is made possible by GLSL shaders.

Implementation: Javascript, HTML/CSS, Webgl/Three.js, Require.js, Grunt, Handlebars, Node.js, MongoDB

Herbal Care Pharmacy is an e-commerce site that I designed and developed for a startup. It makes use of a Sanity CMS for data editing, storage and retrieval. The checkout is integrated with Square Payments. Webhooks synchronize the inventory between the Square dashboard and the Sanity CMS when users make purchases.

Implementation: Typescript, Next.js/Vercel, Sanity.IO (CMS), React, Styled Components

While working at an HFT I designed this early stage prototype of a hybrid OEMS in Axure. I gathered business and design concepts from six internal and one vendor trading platform as part of the research and analysis phase. After finalizing the designs and requirements with stakeholders, we wrote the web application in Javascript (with plans to port to Electron).

The UI Server was built in Java. Performance was a primary concern because the app was used for high frequency trading and required realtime updates, so data was transferred using protobuffers over web sockets. Tables were cached on the server to improve peformance and aid with grid virtualization. Multiple windows communicated via SharedWorkers.

Implementation: Javascript, Typescript, React, HTML/CSS, Java, Web Sockets, Protobuffers

This was version two of a marketing site I did for an AI/ML company. I rebranded the company's logo, colors and created custom graphics. The requirement was for the marketing department to be able to edit content, so I used Sanity.IO to create a Studio that they could login to and update/add content on demand. The application pulls data from the Sanity CMS at build time (SSG) with incremental static regeneration set for pages that require more up to date content (eg. the careers page). I also setup a webhook which triggers a new build when any content in the Sanity Studio is updated. The site was deployed to Vercel which dramatically increased the SEO within minutes of being propagated to the CDN.

Implementation: Typescript, Next.js/Vercel, Sanity.IO (CMS), React, Styled Components, Ant Design

I led the planning, design and development of an operational data science platform. I worked closely with customers (data scientists) and stakeholders to gather requirements, user feedback and conducted A/B testing for lo-fidelity mockups.

Since the company did not have any existing frontend code, I setup a Next.js monorepo which would make it easy for teams to share and reuse UI code. It consisted of discrete UI packages, eg. themable widgets, the marketing site, the marketing studio and the operational data science platform. People could pull in only the code they needed, which resulted in a very tiny webpack bundle and greater developer efficiency. The AI/ML product itself was a tool for internal and external data scientists to view, tweak and run their models, browse and share datasets and create/refine annotations.

Implementation: Typescript, Next.js, React, Lerna, Overmind, Playwright, Styled Components, Ant Design, Figma (for mockups)

In 2014, I created various PNL dashboards and visualizations using D3 and React Stockcharts. The business ask was to create web based tools for traders to manage their risk and investment performance. They were using excel spreadsheets which were clusmy to share, deploy and enhance. The tools I created solved these problems.

Below is a very simplified example of the final end product which used Flux as it's application architecture (the app predated Redux). I created a custom boilerplate for this project using webpack, css modules and Python flask for the backend. Authentication was implemented using JSON Web tokens, LDAP and 0Auth protocol for authorization.

Implementation: Javascript, HTML/CSS, React, Babel, React Stock Charts (D3), Flux, Python Flask, LDAP

This is a small sample of a large scale web application I designed and built while working at a hedge fund. I worked closely with Portfolio and Risk Managers to design and strategize a web application that could replace a massive excel spreadsheet to bridge gaps in performance and usability. I created various dashboards using the enterprise version of AG Grid which includes features such as cell editing, summary rows, advanced grouping, pivot tables, filtering and the server side row model for infinite scroll (table virtualization). Up to 3 days worth of EOD and batched data was cached on the server for quick retrieval and to prevent the DB from getting hammered.

Implementation: Javascript, React, Typescript, HTML/CSS, Ag-Grid, Create React App, Antd, Redux, React Router, Redux-Observable