TradeDesk's Stock Order Microservice is the frontend component that allows users to buy/sell shares on a specific stock page. Click here to interact with a deployed version of this component.
The component was built using React.js, Express/Node, MySQL (static data for development and demo purposes), and the microservice makes API queries to the /stocks and /accounts API.
There are a breadth of event handlers on the form that display textual and numerical data to the user, both static and dynamic. Additional features include client-side validation for input fields to ensure data integrity upfront, several subtle transition animations, dropdown menus, etc.
The order component is optimized for page load time performance, taking the load time from 21.0s down to 0.4s:
- Minification and compression (brotli & gzip) of static files reduced payload sizes and script parse time.
- Fonts files are prioritized to serve WOFF2 format to browsers that support it with fallback for the majority of browsers. This resulted in 33%+ file-size reduction over other formats.
- Text data is predisplayed with the
font-displayproperty prior to receiving the font payload to improve the perception of speed. - Achieved the max score of 100 on Google's PageSpeed Insight Tool. See the PageSpeed Insight report on this component for more details.
This component is hosted on an EC2 t2.micro instance. If the project timeline was extended with additional budget, I would've explored enabling https to take advantage of brotli compression, CDN/Redis caching, upgrading the instance, and a few other performant options I'll be happy to discuss more in detail.
TradeDesk is an stock trading platform. It is a project started in April 2019 meant to mimic the frontend behavior of other stock trading platforms. Upon completion of the frontend development, the team moved on to other individual projects.