Right from this global pandemic hit I wanted to some effort from my side for a better tomorrow. So I have been reading blog posts and articles describing the spread and a few challenges where we can participate in making it better with the technology. But one thing common about all the posts is that for live stats it always redirect to other pages. I even conversed with a few business analysts who are writing reports and they find it difficult to embed the statistics and graphs right on-page they write. Also, this can be a friendly reminder to all the members who are reading the confluence page to be Stay Safe, Stay Calm, Stay Informed


What it does

The application fetches the live data from the COVID-19 API of all the countries around the world and also fetches the live graph from another API and displays it on the page. In simple terms, it displays a graph and also stats of the top 10 most affected countries.

How I built it

I built it with forge, the forge is an amazing library that helped a lot in building the tool. The documentation is really robust and @forge/api library helped to fetch those stats.

const fetchCovidStats = async () => {
  const res = await (
    await fetch("")
  return res.slice(0, 10);

The above snippet is used to fetch the statistics.

Challenges I ran into

Initially, I had some hard time trying to add react and failing it miserable. Then I got to know it uses Node packages. Then I saw @forge/ui documentation and shifted to try that library and it felt amazing. I also found it hard to find accurate data to display, one misleading value can really create great havoc in the reader's mind. Once I found the API things went smoothly.

Accomplishments that I'm proud of

The final output was one thing I am definitely proud of, I have shown it to a few confluence page writers and document reader. They were really happy seeing the app. I always get immense satisfaction when anyone uses the application I develop.

What I learned

I have learnt how to use @forge/ui and @forge/api. Learnt about forge tunnel and some new things.

What's next for Covid Stats

Next for Covid Stats will be adding a map where user can select a country on the map and then reveal it's statistics. Also, pre-rendering the svg of the graph for the top 10 countries.

Built With

Share this project: