Web application that tracks the covid-19 statistics in Chile and its regions.

Overview

Covid 19 Monitor

Web page that shows the covid statistics of the country of Chile, all the confirmed cases, the deaths and also the daily statistics. It also shows the covid statistics of each region of the country, and its flag. This is the capstone project for the third Microverse module, React and Redux.

screenshot

Built With

  • JavaScript, CSS
  • React, Redux
  • Webpack

Live Demo

Check the live demo for this project here.

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

You need to be able to use Node Package Manager, or also called, the npm command. If you dont have it, install it with these commands in the CLI (for Linux):

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

Then, run this command in the CLI:

npm --version

If the previous command prints a single line with a version number on screen, npm was installed.

Install

First you need to clone the repository into the folder of your choice with this command:

git clone https://github.com/Yothu/covid-19-monitor.git

Then go inside the repository foler with this command:

cd covid-19-monitor

After you are inside, download the npm dependecies with this command:

npm install

Finally, show the project through the browser with this command:

npm start

Usage

  • Once in the browser, you will see the Home page, in it you will see two sections, the country section and the regions section, in the first one you will se the map of the country the covid app is based in, and also its covid statistics. On the regions section you will see all the regions of the country listed, you can filter them by today's confirmed cases and deaths.
  • Once you click on a region you will be redirected to the details page, in it there are the covid statistics of that region, showing the region's flag, and statistics.
  • You can press the left arrow in the header to go back to the Home page.

Author

👤 David Vergaray

Acknowledgments

Original design created by Nelson Sakwa in Behance.

📝 License

This project is MIT and Creative Commons licensed.

Show your support

Give a ⭐️ if you like this project!

You might also like...

This is a Covid Cases Tracker Web app , with Malawi cases as priority .......coontact stevenkamwaza@gmail.. for more info

Getting Started with Create React App This project was bootstrapped with Create React App. for demo visit https://mwcovid-tracker.vercel.app/ Availabl

May 25, 2022

Check EU Digitial Covid Certificates with ease and validate them against country and local rules.

Check EU Digitial Covid Certificates with ease and validate them against country and local rules.

Check EU Digitial Covid Certificates with ease and validate them against local or country rules. What is the purpose of CovidValidator? CovidValidator

Mar 14, 2022

A simple PWA to scan your EU digital COVID Certificate and generate a passbook from it

COVID-19 passbook Generator The aim of this project is to let a user scan a EU Digital COVID Certificate with their smartphone, and generate a passboo

Nov 11, 2022

Built a covid-19 trcaker app using React.js implementing hooks and materail UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 21, 2021

⚡️ Look for Covid-19 Resources, Get Vaccine Availability Notification, Complete source code for covidrescue.co.in website.

⚡️ Look for Covid-19 Resources, Get Vaccine Availability Notification, Complete source code for covidrescue.co.in website.

covidrescue.co.in ⚡️ Get real-time, verified leads on Oxygen, Remdesivir, ICU, Beds, Food and more based on your location. Get notifications on Vaccin

Jul 10, 2022

Get updates in Telegram when a vaccination center available in your pin code. We can win Covid 🤝

Cowin Bot Get updates in Telegram when an vaccination center available in your pin code. We can win Covid 🤝 Commands: /start - Start the Bot /help -

Oct 3, 2022

Fill the boring catsalud covid vaccine form with a console command

vacunacovid-catsalud-autofullfill form Fill the boring catsalud covid vaccine form with a console command Manual use, pasting in the script in the con

Jul 27, 2021

Extract the JSON payload from SHC QR codes (i.e Québec Covid Vaccination QR Codes)

Extract the JSON payload from SHC QR codes (i.e Québec Covid Vaccination QR Codes)

shc-extractor Extract the JSON payload from SHC QR Codes (i.e Québec COVID Vaccination QR Codes) Introduction Dans les prochains jours/semaines, les q

Dec 16, 2022

This is a TypeScript/JavaScript library which verifies the QR codes of certificates issued by the South African COVID-19 Vaccine Certificate System.

This is a TypeScript/JavaScript library which verifies the QR codes of certificates issued by the South African COVID-19 Vaccine Certificate System.

Feb 16, 2022
Comments
  • React capstone project - Metrics webapp

    React capstone project - Metrics webapp

    Description

    Created a web application that gets numeric data from an API that can be filtered, the selected API is the Narrativa API. It consists of a home page and several details pages.

    Changes

    • [x] Use ES6 syntax.
    • [x] Use ES6 modules.
    • [x] Use React and Redux.
    • [x] Follow GitFlow.
    • [x] The data retrieved from the API should be stored in the Redux store.
    • [x] Every page should have a unique route within the SPA.
    • [x] The project should be deployed and accessible online.
    • [x] Along with the category name, you displays some numeric values per category that come from the API.
    • [x] When the user clicks (or taps) on a category item, the application navigates to the details page.
    • [x] When the user clicks on the "Back" button (<), the user navigates to the home page.
    • [x] Created unit tests for pure functions in the Redux code.
    • [x] Created integration tests for the application using the React Testing Library.

    Usage

    • Check the README.md to know how to install and use this project.
    • Check the video of me explaining the project functionalities.
    • Check the live demo of this project.
    enhancement 
    opened by Yothu 2
Owner
David Vergaray
Full-Stack Developer and Certified computing engineer, currently studying at Microverse, | HTML | CSS | Python | JavaScript | Java | Open for Hire!
David Vergaray
Worldwide-covid-statistics - covid-19 tracker developed using Reactjs, Axios , chartjs, material icons

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Akinmegha Temitope Samuel 1 Jan 3, 2022
This is Covid-19 data that shows for each country.You can search your country and know its statistics .

COVID-19 Data TRACKER This is Covid-19 data that shows for each country.You can search your country and know its statistics . Built With HTML, CSS, SC

Samiullah Bhadur 2 Apr 21, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A web app built with Covid-19-API that displays Covid 19 cases, deaths and recovery per country in the entire World

Covid19 Tracker A web app built with Covid-19-API that displays Covid 19 cases, deaths and recovery per country in the entire World Built With HTML, C

Promise Okechukwu 4 Nov 1, 2022
Website yang memberikan informasi terkait ketersediaan rumah sakit dan tempat tidur rumah sakit untuk pasien covid-19 ataupun non-covid di Indonesia.

Bed Covid RS Indonesia Website yang memberikan informasi terkait ketersediaan rumah sakit dan tempat tidur rumah sakit untuk pasien covid-19 ataupun n

Hendra Agil Syaputra 22 Oct 23, 2022
The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

CryptoVerse - A Crptocurrency Web Application Getting Started with Create React App This project was bootstrapped with Create React App. Available Scr

Eesha Srivastava 5 Oct 26, 2022
This application allows you to create a list to keep tracks of the books you are reading and check the progress for each book.

Bookstore This is an application built to track the books you are reading and the progress you have made for each book! Additional description about t

Santiago Velosa 4 Feb 27, 2022
💸 1st place at Hack The Job 2022 - A chrome extension that automatically tracks purchases and budgets, alerting users if they go over their spending limits and allowing them to download PDF reports.

?? Won 1st place overall @ Hack the Job! ?? A browser extension for keeping on top of your finances. This project will keep track of the purchases you

Harsh Topiwala 11 Oct 4, 2022
USA Covid-19 Tracker is a mobile-first application built with React and Redux to give precise information about the virus behavior in the United States. Great transitions and user feedback made with plain CSS.

React.js USA Covid-19 Tracker This application allows the public to keep track of the stadistics of the Covid-19 Pandemic in the United Stated. You wi

Rafael Echart 14 Oct 25, 2022
An application to help in the automatic booking of COVID vaccination slots in India whenever they become available.

Co-WIN automated slot booking Automatically book vaccine slots as and when they become available This application aims to automatically book vaccine s

Arindam Ray 24 Nov 23, 2022