Giter VIP home page Giter VIP logo

jerry-sky / covoir Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.98 MB

Simple Angular application that presents current COVID-19 statistics. (A Nokia Summer Front-end trainee recruitment task)

Home Page: https://covoir.jerry-sky.me

TypeScript 61.97% Shell 1.84% JavaScript 3.47% HTML 17.68% SCSS 11.75% Makefile 0.38% Python 2.91%
covid-19 webapp web angular expressjs typescript makefile node npm

covoir's Introduction

Covoir

/ko-vwar/


Purpose

This repository contains the solution for the Nokia Front-end Trainee Summer Trainee recruitment task.

Please create a simple Angular 11 application that displays Covid-19 statistics. The application should use a free public API to gather data (e.g. https://rapidapi.com/api-sports/api/covid-193). Let user filter and sort data — it’s up to you in what way.


Solution

The solution consists of an Angular web application and a simple API middleware, that serves as a mediator between the Angular application and the COVID-19 statistics API.

You can view the demo here.


Running the application

To run the application in development mode run

make dev

— this will run both front-end and back-end programs.


Front-end

Standard issue Angular application program with routing, Angular Material, and ESLint.


Deployment (FE)

The Angular application program uses GH Actions for deployment.

The script first installs and setups all necessary programs and dependencies, and then compiles it using the standard ng build command.

It is served as a .github.io-type webpage which is routed to https://covoir.jerry-sky.me.


Back-end

A simple ExpressJS back-end program that serves the purpose of a mediator between the actual COVID-19 API, and the front-end application program.

The server hides the API key and caches the results from the COVID-19 API.

In order for the back-end program to run correctly, a .env file must be provided containing the API key, and the host information. The names of the variables are regulated by the environment.ts file (the EnvironmentVariables interface).


Deployment (BE)

The program uses Heroku for deployment.

The deployment script compiles the program, initializes a Git repository (inside the dist directory), and pushes it to the Heroku remote server.

The application is served on https://covoir.herokuapp.com, although you can’t view it in a web browser. It requires the Origin HTTP header to be set.


The countries directory

This directory contains two sets of data and their ‘cross product’ so to say. The issue here was to match the countries’ names from the COVID-19 API, with the countries’ codes from the countries’ flags website.

The cross.py Python3 script matches countries’ names and codes together. Fortunately, most countries did match up. The rest of them were added by hand.

Thus, the static countries.json file containing a map between countries’ names (from the COVID-19 API) and the countries’ codes from the countries’ flags website.


covoir's People

Contributors

jerry-sky avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.