Convert Figma logo to code with AI

adrianhajdin logoproject_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.

1,450
476
1,450
44

Top Related Projects

COVID-19 global data (from JHU CSSE for now) as-a-service

2,459

API for Current cases and more stuff about COVID-19 and Influenza

29,136

Novel Coronavirus (COVID-19) Cases, provided by JHU CSSE

1,227

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:

  1. Clone the repository from GitHub:
git clone https://github.com/adrianhajdin/project_corona_tracker.git
  1. Navigate to the project directory:
cd project_corona_tracker
  1. Install the required dependencies:
npm install
  1. Start the development server:
npm start
  1. 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.

2,459

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.

29,136

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.

1,227

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

COVID-19 Tracker

Live Site

COVID-19 Tracker

🌟 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