COVID-19 has had a massive effect on the global economy. The economic effects of a global pandemic may be easy to understand and process for people who are in touch with this field. Unfortunately, it is not as clear for those people who are lesser exposed to economics and financial markets. Our goal is to create a platform where users can view and easily infer the consequences of COVID-19 on the global financial market. They would be able to see the impact by selecting indexes of their choice (stocks, crypto etc) and being enriched with meaningful and informative visuals on our platform.
What it does
COVID-19 vs. Markets is a single page web application. You are able to search for stock symbols and add them into your view. You can select a maximum of 4 stock symbols to view. Once selected, you are able to view the stock performance since day zero of COVID-19 until the current date. The stock performances are displayed on a line graph with different key colours for each symbol.
Using a slider, the user can drag the date from day zero until current day and this will draw the graph for the selected stocks as the user drags their cursor. The values available for each stock include open, close, high and low values for each day. These values are displayed with each stock selected and change according to the currently selected date. The colour of the values (red or green) signal whether it has increased or decreased from the previous day.
By default the graph shows the close value for each day but this can be adjusted to any other price type using radio buttons above the graph.
How we built it
We started building this app before we knew there was a global COVID-19 hackathon. Initially, we were experimenting with datasets and exploring what kinds of useful resources were available in making an educational and informational web app about COVID-19. We pivoted towards a data visualisation application.
We built the application using Svelte and Sapper as our web framework of choice. We used Zeit NOW for our project infrastructure for its simplicity in getting something up and running. We leveraged serverless JS functions to define our API and used Finnhub API for our data source. We also used FaunaDB to store our list of stock symbols.
For the chart itself, we decided to implement this from scratch using HTML Canvas API. We tried to minimise the dependencies of the application as much as possible for a small bundle size and control of full control of our app components.
For testing, we used Cypress to define E2E tests and used Github Actions as our CI/CD pipeline.
Challenges we ran into
We ran into challenges when implementing the chart from scratch. It took some time to create a chart that fit our application's needs. Creating a chart that was responsive to the screen size was tricky as it required re-rendering the chart on screen size change. It was also challenging to scale our datasets to all fit in the graph as it involved some number-crunching.
We also ran into problems when scraping the internet for stock data. We initially started with another API from another service but it had too many limitations which is why we chose to use Finnhub.
Accomplishments that we're proud of
We’re proud that we were able to implement the full-stack application in such a short amount of time. We are also impressed by the quality of the code and infrastructure in place for this application.
Both of us had never used Svelte and Sapper before writing this application so we were learning on the fly. This was obviously a risk we chose to take but it paid off as we were able to learn the power of using these technologies as opposed to their alternatives.
We’re also proud to have created our own charting library, which we may decide to open source.
What we learned
As stated in the previous answer, we learnt how to use Svelte and Sapper to create an interactive web application. Coming from a ReactJS background, it was very interesting to see the similarities and differences between these two technologies and improve our technical skillsets. We also learnt how to appropriately use the HTML Canvas API to create drawings on the web and successfully create a visualisation tool for our data.
What's next for COVID-19 vs. Markets
We will continue to build COVID-19 beyond this hackathon. We plan to add tonnes of new functionality including the ability to select cryptocurrencies as well as stocks. The application can also be generalised to be used for other global events, as it only requires a date at which you want to retrieve data since. Therefore, we will work to generalise the application for any globally affecting incident.
We would also like to add different types of visuals like bar charts, pie charts, candle charts in the future.
Try It out