After developing a few python applications to track my trades, market conditions, and performance of various small trading algorithms for the cryptocurrency exchanges Poloniex and GDAX, I became interested in creating a project that utilizes one of their websocket APIs.
I decided to utilize Poloniex’s API for this project. Poloniex lists dozens of cryptocurrencies on their exchange while GDAX lists only ~3. In considering both options, I decided Poloniex will offer a more challenging and interesting project due to hvaing the ability to play with many more currencies.
I first determined the features I wanted to implement in The Crypto Ticker such as being able to see live updates of market conditions and having them update with animations to engage the user, and the ability to add any currency currently listed on the exchange.
From there I developed an overall design of the code which had three distinct parts: engine.js containing the websocket and UI interaction code, msjRouter.js to route the incoming websckcet messages and to keep track of all the currencies being shown to the user, and currencyPairObj.js corresponding to each card on the page with methods for updating the respective DOM elements for a currency statistic update.
After I felt comfortable with the structure and how things worked on a higher level, I dove in and started writing the code from outward in (engine.js to currencyPair.js).
This project does use jQuery but only for non-performance essential tasks. For example, it's used for a couple AJAX requests to grab initial market conditions and handling UI interactions.
While I am a computer science student and I do love code and algorithms, I am also very passionate about beautiful, unique, and appropriate user experiences. As a result of this passion, I enjoy spending a good amount of time in my projects developing a design that follows modern guidelines, is responsive, and works well with the respective functionality.
The Crypto Ticker gets its main inspiration from Google’s Material Design (I shamelessly took Google’s box shadow from their Material Design Lite CSS framework. It's just so good.) while making it unique by implementing aspects such as rounded corners, white borders, and fun animations.
I love learning how to improve my code and skills!
Please take a look at the source code to this project at github.com/ryanrouleau/Cryptocurrency-Websocket-Trade-Ticker and add issues or ideas for features, modify it, make some pull requests, etc.