So far you have built us databases, a web scraping bot and an API, now we need to combine all of these and pull the data into a dashboard, specifically to show insights on our COVID-19 data. We would like you to use HTML, CSS & JavaScript and ideally if you are adventurous enough, a web framework would be ideal too. Any framework of your choice, i.e. Angular, React, Vue, etc but not required.

# Introduction
We need a web dashboard that will connect to our API to show our COVID-19 data in real-time to our staff members specifically, this dashboard cannot be public to everyone, which means a sign-in or form of authentication will be required. We would like it built in HTML, CSS and JavaScript, but a framework of your choice can also be used. The dashboard should be responsive and work on all devices, as we would like our executives to see the data while on the move too.

# Requirements
* Mock-up of a dashboard with COVID-19 data
* Develop the dashboard with HTML, CSS & JavaScript (or a framework)
* Dashboard needs to be responsive on all devices
* The dashboard will need to pull from the API you built for us previously
* The dashboard will require authentication, i.e: Sign in
  
  * The sign in can be simple and nothing too protected, i.e. built-in single user


# Dashboards we like
* *Example dashboard 1 by [They Make Design](https://medium.com/theymakedesign/best-web-design-inspiration-dashboards-d87015ffb711)*
![Example dashboard 1](https://res.cloudinary.com/civati/image/upload/v1623694181/production/Content%20Images/tz55gxzi6ij0mpee5kri.jpg)

* *Example dashboard 2 by [Damir](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)*
![Example dashboard 2](https://res.cloudinary.com/civati/image/upload/v1623694352/production/Content%20Images/oxy2zdnm9jzb47de4t9c.jpg)

---

# Resources
Here's some resources that we think might help you, however we recommend you do your own research too, to find exactly what you need based on the requirements you think are needed in this project brief.
* [How TO - Login Form](https://www.w3schools.com/howto/howto_css_login_form.asp)
* [NodeJS - Basic Authentication Tutorial with Example API](https://jasonwatmore.com/post/2018/09/24/nodejs-basic-authentication-tutorial-with-example-api)
* [Fetch API Introduction](https://www.youtube.com/watch?v=Oive66jrwBs)
* [Bootstrap 5 Crash Course | Website Build & Deploy](https://www.youtube.com/watch?v=4sosXZsdy-s)
* [Build a Covid Tracker App With Vue.js & Tailwind](https://www.youtube.com/watch?v=m-MAIpnH9ag)
* [React Admin Crash Course](https://www.youtube.com/watch?v=HRmdj-HpJyE)
* [React Website](https://reactjs.org/)
* [Vue Website](https://vuejs.org/)
* [Angular Website](https://angular.io/)

## Previous projects
You can attempt this project without doing this one and you also don't need to follow the COVID-19 theme, but if you are just starting out, then we'd recommend you complete the following projects too.
1. [COVID-19 data migration from Excel to MySQL & MongoDB](https://www.civati.io/projects/covid19-data-migration-from-excel-to-mysql-mongodb)
1. [Web scrape COVID-19 data using Python](https://www.civati.io/projects/web-scrape-covid19-data-using-python)
1. [Develop an API that exposes our COVID-19 data](https://www.civati.io/projects/develop-an-api-that-exposes-our-covid19-data)
1. [Design a responsive web dashboard](https://www.civati.io/projects/design-a-responsive-web-dashboard)



Civati

Develop a fully working dashboard to display COVID-19 data

No submissions

Similar Projects

Develop a fully working dashboard to display COVID-19 data

No submissions

Similar Projects

.css-1hnz6hu{position:static;}.css-1hnz6hu::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:0;width:100%;height:100%;}Design a responsive web dashboard

Seeking development of the Blackjack card game

Design a responsive web dashboard