Covid-19 Stats Tracker App using Angular 9 + Spring REST using Covid4J

Let’s build an application that can pull Covid-19 stats for any country, state, or city. We will be using Angular 9 for frontend and Spring REST for developing backend with the help of Covid4J. Covid4J sources the latest data from WHO website which is regularly updated.

Download the code from GitHub

Here’s what the end result will look like:-

Angular Card Showing Details:-

The Backend:-

You can read about Covid4J from this link.
Add the following maven dependency for covid4j in pom.xml:-

<dependency>
    <groupId>io.javaninja.ajeet</groupId>
    <artifactId>covid4j</artifactId>
    <version>1.0.3</version>
</dependency>

Folder Structure:-

Lets make a simple CovidController.java to expose 2 endpoints as below. The path variables sent from frontend are not case-sensitive. And it can accept any country, state, or city as input.

package io.javaninja.ajeet.covid19tracker.controller;

import io.javaninja.ajeet.covid4j.CovidApi;
import io.javaninja.ajeet.covid4j.CovidStats;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class CovidController {

    @GetMapping("/getCovidDataByCountry/{country}")
    public CovidStats getCovidDataByCountry(@PathVariable String country) throws IOException {

        return CovidApi.getAllCovidStatsForCountry(country);
    }

    @GetMapping("/getCovidDataByCityOrState/{cityOrState}")
    public CovidStats getCovidDataByCityOrState(@PathVariable String cityOrState) throws IOException {

        return CovidApi.getAllCovidStatsForCityOrState(cityOrState);
    }

}

The Frontend:-

Folder Structure:-

Lets create covid.service.ts which will connect with the backend to fetch the stats:-

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

export interface CovidStats {
  name: string;
  type: string;
  confirmed: string;
  recovered: string;
  deaths: string;
  confirmedNewCases: string;
  confirmedNewDeaths: string;
  lastUpdated: string;
}

@Injectable({
  providedIn: 'root'
})
export class CovidService {

  constructor(private httpClient: HttpClient) {
  }

  fetchCovidStats(name: string, inputType: string) {
    if (inputType === 'country') {
      return this.httpClient.get<CovidStats>(
        'http://localhost:8080/getCovidDataByCountry/' + name,
      );
    }
    return this.httpClient.get<CovidStats>(
      'http://localhost:8080/getCovidDataByCityOrState/' + name,
    );
  }
}

The covid19.component.ts connects with the covid.service.ts and subscribes to it.

import {Component, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';
import {HttpClient} from '@angular/common/http';
import {CovidService, CovidStats} from '../covid.service';

@Component({
  selector: 'app-covid19',
  templateUrl: './covid19.component.html',
  styleUrls: ['./covid19.component.css']
})
export class Covid19Component implements OnInit {
  covidStats: CovidStats;

  constructor(private http: HttpClient, private covidService: CovidService) {
  }

  ngOnInit(): void {
  }

  onSubmit(form: NgForm) {
    const value = form.value;
    this.covidService.fetchCovidStats(value.name, value.inputType)
      .subscribe(response => {
        this.covidStats = response;
      }, error => {
      });
  }
}

You can get other supporting files from GitHub:-

Download the code from GitHub

Keep Learning! Stay Sharp!