CORONA TRACKER APP INSTALL
CORONA TRACKER APP SOFTWARE
CORONA TRACKER APP CODE

const = useState() Ĭonst = useState(true) įirst, we will consume the global API with the Axios library to get the total global case count in the world using the useState & useEffect React-hooks. I have studied the open-source postman API source which contains all Application Programming Interfaces (APIs) related to Corona Cases.

All countries listed with these categories in descending order.

A Pie Chart depicting the number of cases.

4 different boxes to show actual numbers: Total, Active, Recovered and Deaths.

I decided to have 4 different sections on this home tab: We have also added 5 different tabs to our app with routing. So far, we have done the basic installation and scaffolding of the app. In this part of the process, we will develop the World and Guidelines tabs for our Ionic React hybrid app. This is it for Day 0.? Day 1 - Developing COVID19 Dashboard and Safety Guidelines tabs Let me know in case you're stuck with any issues related to installation, compile-time, or run-time errors. All tabs should be working smoothly with proper routing. Open your App.tsx file and add the below router inside Ĭheck your app in the browser again, and you should see all these tabs with their respective pages. Let’s add routing to our app which will allow us to visit all 5 different tabs explained above. Now index.html and index.tsx are your first pages for Single Page Applications (SPAs). So far, you should be running your ionic-react app in your local browser.

?This is your basic app installation and scaffolding. Click on the localhost option in the terminal to check. Voilà! ? Your Ionic app is now running in a web browser. Now, go to your app folder and run these 2 commands tsx files with other sub-folders in the proper sequence. You should have gotten all the default HTML, CSS and.

CORONA TRACKER APP INSTALL

Add react hooks and pwa elements 'npm install the corona-tracker folder in your default workplace.Create react app with Capacitor 'ionic start corona-tracker tabs - type=react - capacitor'.Install ionic with global scope 'npm install -g native-run cordova-res'.So, let’s start with the first set of terminal commands (whether it's on Mac, Linux or Windows):

CORONA TRACKER APP SOFTWARE

We need to install and configure all the above mentioned Software and Frameworks. Xcode for iOS app (Unfortunately only available in Apple computers).Firebase for hosting the content ( Progressive Web App).

CORONA TRACKER APP CODE

TypeScript language to write the actual code (.tsx files).Node.js environment to support JavaScript and npm libraries.Ionic Framework (version 4) with Capacitor.React.js includes the latest react-hooks.The below libraries are required to install using the Node package manager ( npm): But this time, I wanted to learn and use React.js. I have developed several websites and apps through Angular and Ionic before. Help - would provide help and feedback.Guidelines - would allow you to read and watch all advisories and guidelines.News - would get the latest news regarding the Coronavirus Pandemic.Country - would allow you to select a country to check the cases.World - would show the COVID19 Dashboard.The idea was to develop 5 separate tabs which would be there at the bottom of the app: I also wanted to show the COVID19 virus cases across the world and individual countries through various illustrations. I considered the Ionic framework which would allow me to develop an Android, iOS & Progressive Web App (PWA)? by just writing and maintaining a single codebase. I planned to develop a cross-platform mobile solution that could be universally accessed by everyone. I decided to develop a universal, small, and handy mobile solution by using data provided by Johns Hopkins University. Then, I realised that data from is regularly updated and more accurate. I got several links that had little difference in numbers. Initially, I was looking for the latest Covid19 cases around me (in March 2020). ADVERTISEMENT Day 0 - Idea, Plan, and Engineering Idea

Corona tracker app