What is TokenHydra?
TokenHydra shows you the price action of all your favourite cryptos in a single chart. It does a beautiful job of charting ten or more crypto prices at the same time, and allows you to easily explore other combinations of tokens. It is powered by a database which collects minutely price data for two hundred cryptocurrencies. The indexed database can quickly provide data to the React frontend, where thousands of price points are carefully combined into TokenHydra’s pleasant and intuitive charts. Even on mobile devices, the experience and usability of these charts far exceeds that of it’s competitors.
Improving on existing charts
Existing crypto charting sites are hard to navigate through and offer too little insight into how one token's price fits within the market. Those sites may offer a search feature to find a specific token, but what if you just want to browse? I couldn’t find a charting site which allowed easy & fun browsing of cryptos. I grabbed the bull by the horns and built something better from the ground up. My product, TokenHydra, provides lots of insight by charting many cryptos at once, allowing users to quickly identify the outliers, or to grasp broad trends. When the user’s focus drifts to the suggested charts shown at the top & side, they see a preview of how those cryptos are doing, and may click them to bring them into the main chart. This is how TokenHydra gives greater insight & usability.
Beautiful layout & colours
I went with a layout based on fractions of 24: The main chart’s height is 15/24 of the screen height, and it’s width is 12/24. The spacing between components is 1/24. The design process started by examining how space is divided on the page of a textbook. I chose margin sizes & content sizes which roughly match those proportions. A particularly compelling component is the Token Selector; it overlays the main chart with a grid of tokens to add to your current chart.
The tech stack
This is a NextJS project. The frontend uses D3 within React. It's all written in Typescript. I did the styling entirely using MUI’s SX prop. Great care was spent on responsiveness of the layout.
The backend is not separate. It’s built with NextJS API routes (/pages/api for you NextJS afficionados). The backend is constantly receiving data from a data agent which collects data from several places.
It’s deployed to a $20/month AWS instance, and has blue/green deployments for the data agent, for the staging environment, and for the production environment. All parent Node processes are managed by systemd. I spent time keeping the memory usage down. I really get a kick out of running this big app on such a small AWS instance.
