Recently, I implemented a leaderboard for trading contests at https://quickswap.exchange. The code is open source, and you can find it at https://github.com/QuickSwap/interface-v2/tree/feature/contest. You can review the code changes committed by user deep1144 on this branch.
Here is an overview of the process I followed:
  • I first understood the code structure and UI elements of the existing app.
  • Then, I implemented UI elements such as tables, search, and tab views, as there can be multiple contests going on at the same time.
  • Binded GraphQL APIs from Graphprotocol to retrieve data (from blockchain) on trading done in the last week.
  • I processed the data and filtered the top 300 participants.
  • To optimize for speed and loading time, I moved the entire logic to a backend microservice (which I developed and deployed on EC2) and used Redis to cache the data so that it can be served quickly. This reduced the load time from 30+ seconds or more to 0.7-1 second.
  • Finally, I optimized the UI for mobile view.
I have also corrected some of the grammar and spelling mistakes in the original document.