We thought a lot about data visualisation, and this seemed to offer a good source of data.

What it does

Allows you to track publicly traded tokens on the bybit exchange, and visualise the data with a variety of methods.

How we built it

We wanted to focus on the complicated react parts, so we went with astro:

  • there is no changing data, so SSR is not required; thus the static site generation is ideal.
  • astro removes concerns about stack as much of it is pre-configured (e.g. bundling, pre-rendering, routing)
  • it allowed us to write markup in simple markdown.

We built a hook for react called useExchange which allowed us to specify a set of tokens and receive a some state with the latest trades for those tokens. this allowed us to do everything else in the project.

We processed the data and then used libraries such as google charts to graph the data in useful ways.

Challenges we ran into

  • we wanted to use D3- it provides unparralelled datavis power in JS. However it proved too difficult and frustrating to actually integrate into the project.

Accomplishments that we're proud of

The collection of hooks we developed for this project is mature and demonstrate a good understanding of advanced react, which is a nice feeling. The Controller component (used to control graphs) is also quite complicated.

Built With

Share this project: