emibcn / covid

Progressive Web Application that displays extracted data from the official web https://dadescovid.cat

Home Page:https://emibcn.github.io/covid/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Node.js CI Coverage Contributor Covenant DeepSource Download maps and charts from backend and publish with GitHub Pages

Covid Data refactored (Web Application)

This applications displays public information about Covid19 Pandemy in Catalonia, extracted from the official webs https://dadescovid.cat and Seguiment Covid19 BCN.

The aim of this application is to display the data in different ways than the originals, improving performance and adding more value to it, trying to help the users to better understand the situation and evolution of the Covid-19 pandemic in the region of Catalunya (Catalonia).

App GIF example

Contributing

If you have an idea about:

  • Improve app performance, design, usability, testing or translations
  • Add data sources
  • Add visualization widgets
  • Add regions
  • Have funds or can look for them to speed up all the development processes
  • Something else?

Please, open an issue and let me know. If you're a developer, designer or translator (or just a user) and want to help develop, design, translate or test this app, let me know by opening an issue or -still better!- opening a pull request.

There are some already opened simple issues. If you feel you can afford one of them, just comment on it (so nobody starts duplicating work in parallel) and commit a PR when you think you are all done with it. If you don't know what a PR is, you can read these open source guidelines.

This is a Work in progress in its very early stages. All contributions are welcome, including writing a good Contributing page.

All contributors will be rewarded 🏆 by thanking them here (unless you prefer not to)! If funds are found, they will be fairly distributed across all contributors.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

🏆 Thanks to

How it works

The application has been split into 2 parts: the frontend (this one, the application you see deployed here) and the backend (the one containing the data used in the frontend, updated daily with official data).

The frontend

This applications has been created using Create React App. The applications is built and deployed to GitHub Pages using it's workflow.

The frontend is a React web application. It's intended to be used directly from the browser, or installed as a Progressive Web Application. It should work in all devices and browsers (if not, open an issue and I will do my best). Some of the code in this app is inspired from the code in the official app. Specifically, how it handles the data sources against the SVG maps.

Features

This application does not use any tracking system by itself, only the ones that could use GitHub Pages (they own the servers, they know the client IP). This means I have no feedback of the use of the app, so let a star or a follow, an issue or a pull request. They all are welcome! (Specially the last one :P ). It also means there is no EU cookie disclaimer/acceptance button, there is no one spying here, there are no ads.

The application lets you add more visual widgets into the grid/dashboard. The configuration of those widgets is saved in the location of the web browser (the hash), so you can undo or go back easily with native browser back/forward control. It's also useful to share a dashboard or a widget, as its URL contains its configuration. Furthermore, the app saves the same configuration into the localStorage system of your browser. If you come back to the app without your preferred configuration in the URL, it will automatically load it from the localStorage. Each time a parameter is modified, it is saved and all needed data is downloaded.

Each widget have a menu button where you can find its actions: Edit, Remove and Legend. Those actions open a dialog to show information to you or let you change some parameters.

There is a Slider with a Play/Pause button to handle the day the data is shown for. The Play/Pause button enables/disables the automatic day increase and restart, helping you to see time-based correlations.

The application automatically detects when the used data has been updated and need to be redownloaded, and when the application itself has been updated, and notifies the user to apply the updates.

The application have a Menu with an About section. An Update! section is visible when an app update is available. There are more to come!

The backend

The backend (the real one) are servers from institutions like the Generalitat de Catalunya, the Ajuntament de Barcelona or others that may come in the future. Those servers might have strict security restrictions (like CORS), or might not perform as desired, or the data offered there has already been processed, or because the data is updated just once a day (and we don't need to bomb the servers).

Anyway, those backends are scrapped once a day by a workflow on a sibling project: covid-data. That project consists in a small shell script that downloads the dadescovid.cat Maps data -and processes it a bit-, a full JS project to download dadescovid.cat Charts data and another full JS project to download data from Barcelona's RStudio/Shiny server. The workflow calls those parts sequentially and, finally, deploys all collected data to its own GitHub Pages. That deploy is not intended to be used directly from your browser, but through this application, which downloads the data (JSON and SVG files) to fill in the app widgets (or other apps that may come to re-use the same data/infrastructure).

So, in fact, this is a serverless application, where the cloud is provided by GitHub, GitHub Workflow and GitHub Pages (all with free tiers), and the original 3rd party backends, which are not part of this project (for the moment).

TODO list

  • Add languages.
  • Add more sections: Help, Settings, ...
  • Change branding icons.
  • Add tutorial for beginners.
  • Add more data sources.
  • Add more data visualization tools.
  • Add more regions.
  • Take a look at Google Maps iEPG new layer service.
  • Add tests.

Disclaimer

This app and the code are released as-is. The app may fail because there is a problem with GitHub or its servers (probably at Azure), or because the app itself (the code) has a bug, or because its deploy process has failed in some step. If your work or the live of someone relies on this app, please, install your own stack and pay someone to ensure it does not fails (and let me know! I could be that paid someone).

Licenses

The application, scripts and documentation in this project are released under the GNU General Public License v3.0.

The scripts and documentation published in covid-data are also released under the GNU General Public License v3.0.

The data scrapped and published in covid-data is licensed by their owners:

The Contributor Covenant is released under the Creative Commons Attribution 4.0 International Public License.

About

Progressive Web Application that displays extracted data from the official web https://dadescovid.cat

https://emibcn.github.io/covid/

License:GNU General Public License v3.0


Languages

Language:JavaScript 98.8%Language:HTML 0.7%Language:SCSS 0.4%Language:CSS 0.1%