project_corona_tracker
This is a code repository for the corresponding YouTube video. In this tutorial, we are going to build and deploy a corona tracker application. Covered topics: React.js, Chart.js, Material UI, and much more.
Top Related Projects
COVID-19 global data (from JHU CSSE for now) as-a-service
API for Current cases and more stuff about COVID-19 and Influenza
Novel Coronavirus (COVID-19) Cases, provided by JHU CSSE
JSON time-series of coronavirus cases (confirmed, deaths and recovered) per country - updated daily
🦠 A simple and fast (< 200ms) API for tracking the global coronavirus (COVID-19, SARS-CoV-2) outbreak. It's written in python using the 🔥 FastAPI framework. Supports multiple sources!
Quick Overview
The project_corona_tracker
is a web application that provides real-time data and visualizations related to the COVID-19 pandemic. It fetches data from various sources and presents it in an intuitive and interactive manner.
Pros
- Real-time Data: The application fetches and displays the latest COVID-19 data, ensuring users have access to up-to-date information.
- Comprehensive Visualizations: The project offers a range of visualizations, including charts and maps, to help users better understand the pandemic's impact.
- User-friendly Interface: The application has a clean and intuitive user interface, making it easy for users to navigate and find the information they need.
- Responsive Design: The application is designed to be responsive, ensuring a seamless experience across different devices and screen sizes.
Cons
- Limited Customization: The application may not offer extensive customization options, limiting the user's ability to personalize the experience.
- Dependency on External Data Sources: The accuracy and reliability of the application's data are dependent on the sources it fetches from, which could potentially be affected by changes or issues with those sources.
- Potential Performance Issues: Depending on the user's internet connection and the amount of data being fetched, the application may experience performance issues, such as slow loading times or lagging.
- Lack of Advanced Features: The application may not offer advanced features or functionality, such as the ability to export data or create custom reports, which some users might find limiting.
Getting Started
To get started with the project_corona_tracker
application, follow these steps:
- Clone the repository from GitHub:
git clone https://github.com/adrianhajdin/project_corona_tracker.git
- Navigate to the project directory:
cd project_corona_tracker
- Install the required dependencies:
npm install
- Start the development server:
npm start
- Open your web browser and navigate to
http://localhost:3000
to access the application.
Competitor Comparisons
COVID-19 global data (from JHU CSSE for now) as-a-service
Pros of covid-19-api
- Lightweight and focused API implementation
- Easy to integrate into other projects
- Regularly updated with the latest data sources
Cons of covid-19-api
- Limited frontend functionality
- Fewer visualization options
- Less comprehensive documentation
Code Comparison
project_corona_tracker:
import React from 'react';
import { Cards, CountryPicker, Chart } from './components';
import { fetchData } from './api/';
import styles from './App.module.css';
covid-19-api:
const express = require('express');
const cors = require('cors');
const morgan = require('morgan');
const helmet = require('helmet');
const { endpoints } = require('./api');
project_corona_tracker focuses on a React-based frontend implementation with components for displaying data, while covid-19-api is primarily an Express-based API server setup. The former imports React components and a data fetching function, while the latter sets up an Express server with middleware and API endpoints.
project_corona_tracker provides a more complete solution with both frontend and data fetching capabilities, making it suitable for developers looking to quickly deploy a COVID-19 tracking application. covid-19-api, on the other hand, offers a flexible API that can be integrated into various projects, allowing developers to build custom frontends or use the data in different applications.
API for Current cases and more stuff about COVID-19 and Influenza
Pros of API
- More comprehensive data sources, including historical data and vaccine information
- Regularly updated and maintained, with active community contributions
- Provides a RESTful API for easy integration into various applications
Cons of API
- Requires more setup and configuration to use in a front-end application
- Less focused on providing a ready-to-use UI for displaying COVID-19 data
- May require additional processing to present data in a user-friendly format
Code Comparison
project_corona_tracker:
import React from 'react';
import { Cards, Chart, CountryPicker } from './components';
import styles from './App.module.css';
import { fetchData } from './api';
API:
const express = require('express');
const app = express();
const apiRoutes = require('./routes/api');
app.use('/api', apiRoutes);
Summary
project_corona_tracker is a React-based front-end application for displaying COVID-19 data, while API is a more comprehensive back-end solution for providing COVID-19 data through a RESTful API. project_corona_tracker offers a ready-to-use UI but may have limited data sources, whereas API provides more extensive data but requires additional work to create a user interface. The choice between the two depends on the specific needs of the project and the developer's preference for front-end or back-end focus.
Novel Coronavirus (COVID-19) Cases, provided by JHU CSSE
Pros of COVID-19
- Comprehensive and regularly updated global COVID-19 dataset
- Widely used and trusted source for researchers and data analysts
- Includes time series data for confirmed cases, deaths, and recoveries
Cons of COVID-19
- Raw data repository without built-in visualization tools
- Requires data processing and analysis skills to extract meaningful insights
- Limited user interface for non-technical users
Code Comparison
project_corona_tracker:
import React from 'react';
import { Cards, CountryPicker, Chart } from './components';
import { fetchData } from './api/';
import styles from './App.module.css';
COVID-19:
import pandas as pd
import matplotlib.pyplot as plt
url = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv'
df = pd.read_csv(url)
The project_corona_tracker repository provides a React-based web application for visualizing COVID-19 data, offering an intuitive user interface. In contrast, the COVID-19 repository focuses on providing raw data, requiring users to implement their own analysis and visualization tools, as demonstrated in the code snippets above.
JSON time-series of coronavirus cases (confirmed, deaths and recovered) per country - updated daily
Pros of covid19
- Simpler, more focused API for COVID-19 data
- Regularly updated data from Johns Hopkins CSSE
- Lightweight and easy to integrate into other projects
Cons of covid19
- Limited to historical data, no real-time updates
- Fewer visualization options out of the box
- Less comprehensive feature set for end-users
Code Comparison
project_corona_tracker:
import React from 'react';
import { Cards, CountryPicker, Chart } from './components';
import { fetchData } from './api/';
import styles from './App.module.css';
class App extends React.Component {
// ... component logic
}
covid19:
import { getTimeline } from "https://covid19.mathdro.id/api/timeline";
const timeline = await getTimeline();
const countries = Object.keys(timeline);
const dates = Object.keys(timeline[countries[0]]);
Summary
project_corona_tracker is a full-fledged React application with multiple components and a more comprehensive UI. It offers real-time data and various visualization options. On the other hand, covid19 is a simpler, data-focused library that provides historical COVID-19 data through an easy-to-use API. While covid19 is more lightweight and easier to integrate into other projects, project_corona_tracker offers a more complete solution for end-users seeking detailed COVID-19 information and visualizations.
🦠 A simple and fast (< 200ms) API for tracking the global coronavirus (COVID-19, SARS-CoV-2) outbreak. It's written in python using the 🔥 FastAPI framework. Supports multiple sources!
Pros of coronavirus-tracker-api
- Provides a RESTful API for accessing COVID-19 data
- Supports multiple data sources (JHU, NYT, and WorldoMeters)
- Offers more granular data, including county-level information for some regions
Cons of coronavirus-tracker-api
- Lacks a user interface for data visualization
- May require more technical knowledge to implement and use effectively
- Does not include built-in data analysis or charting capabilities
Code Comparison
coronavirus-tracker-api:
@app.route("/v2/locations")
def locations():
# ...
return jsonify({
"locations": [location.serialize() for location in data],
"latest": latest,
"source": source,
})
project_corona_tracker:
const { data: { confirmed, recovered, deaths, lastUpdate } } = await axios.get(url);
return { confirmed, recovered, deaths, lastUpdate };
The coronavirus-tracker-api uses Python and Flask to create API endpoints, while project_corona_tracker uses JavaScript and axios for data fetching. The former focuses on serving data, while the latter is more oriented towards consuming and displaying data in a user interface.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
COVID-19 Tracker
Live Site
ð Become a top 1% Next.js 13 developer in only one course
ð Land your dream programming job in 6 months
Stay up to date with new projects
New major projects coming soon, subscribe to the mailing list to stay up to date https://resource.jsmasterypro.com/newsletter
Introduction
This is a code repository for the corresponding video tutorial.
In this video, we will create a full COVID-19 Tracker. We're going to use React, Charts.JS and Material UI.
By the end of this video, you will have a strong understanding of React's workflow and the use of hooks.
API used: https://covid19.mathdro.id/api
Setup:
- run
npm i && npm start
Top Related Projects
COVID-19 global data (from JHU CSSE for now) as-a-service
API for Current cases and more stuff about COVID-19 and Influenza
Novel Coronavirus (COVID-19) Cases, provided by JHU CSSE
JSON time-series of coronavirus cases (confirmed, deaths and recovered) per country - updated daily
🦠 A simple and fast (< 200ms) API for tracking the global coronavirus (COVID-19, SARS-CoV-2) outbreak. It's written in python using the 🔥 FastAPI framework. Supports multiple sources!
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot