This project was bootstrapped with Create React App. It was created for submission in Pana Cloud Bootcamp 2020.
The web app has been deployed to Surge, and can be accessed here.
The following are some of the features of the app:
- Shows current number of confirmed cases, active cases, recoveries and deaths.
- Shows the number of active cases, recoveries and deaths as a doughnut to make more sense of these numbers.
- Shows the recovery and death rates on another doughnut chart.
- Shows the history of cases since Jan. 22, 2020.
- Shows the above visuals for any country the user selects from a drop down menu.
The following are some of the learning outcomes of this project:
- Using Material UI with React to create an interactive UI
- Making the app mobile responsive.
- Using Chart.js with React Chartjs 2.
- Customizing chart appearance, labels, onclick events etc.
- Implementing Render-as-You-Fetch approach using React Suspense. Displaying a fallback UI while the data is being fetched.
- Creating a Suspense compatible custom hook to fetch data without
useEffecthook. (The custom hook is inspired by use-async-resource library. But it had some bugs: so, I created my own custom hook to cater my needs.) - Creating and using ErrorBoundary component to catch JS errors in app and show a fallback UI.