Bookmark! (press Ctrl+D)

Learn how to fetch Coronavirus (COVID-19) stats from an API and add them to a dashboard in your app. We’ll walk through setting up a new React hook to make the requests, adding the stats to the dashboard, and styling the stats!

If you’re wondering why the top right stream of me is choppy 👀I tried recording in 1080p this time and learned my laptop can’t handle that 😅

⚠️ UPDATE
If you followed the previous tutorial, the original NovelCOVID API endpoint has been deprecated! Please update and use: https://corona.lmao.ninja/v2/countries

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-add-coronavirus-covid-19-case-statistics-to-your-map-dashboard-in-gatsby-and-react-leaflet/

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet (Part 1)
https://www.colbyfayock.com/2020/03/how-to-create-a-coronavirus-covid-19-dashboard-map-app-with-gatsby-and-leaflet/

Coronavirus Map Demo
https://coronavirus-map-dashboard.netlify.com/

Github with commit by commit steps for walkthrough
https://github.com/colbyfayock/my-coronavirus-map

NovelCOVID API
https://github.com/NovelCOVID/API

Mapbox Basic Dark Theme
https://api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiY29sYnlmYXlvY2siLCJhIjoiY2swODZzbXYxMGZzdzNjcXczczF6MnlvcCJ9.HCfgUYZUTP7uixjYF7tBSw#5.91/49.722/22.844

Javascript Optional Chaining
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Gatsby Starter Leaflet
https://github.com/colbyfayock/gatsby-starter-leaflet

Anyone Can Map! Inspiration and an introduction to the world of mapping
https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/

How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
https://www.colbyfayock.com/2020/03/how-to-create-a-summer-road-trip-mapping-app-with-gatsby-and-leaflet

How to build a mapping app in React the easy way with Leaflet
https://www.freecodecamp.org/news/easily-spin-up-a-mapping-app-in-react-with-leaflet/

🎼 Music
Pipo Interludo – Pipo & Wowa unminus.com

source

LEAVE A REPLY

Please enter your comment!
Please enter your name here