Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/braincee/covid-19-metric-website

Microverse React Capstone Project: This educational project is to build a mobile web application to check a list of metrics (numeric values) using React and Redux. Built with React, Redux Toolkit, API, Sass and JavaScript.
https://github.com/braincee/covid-19-metric-website

covid-19 css3 microverse-projects microverse-students react reactjs redux

Last synced: about 1 month ago
JSON representation

Microverse React Capstone Project: This educational project is to build a mobile web application to check a list of metrics (numeric values) using React and Redux. Built with React, Redux Toolkit, API, Sass and JavaScript.

Awesome Lists containing this project

README 

        
![](https://img.shields.io/badge/Microverse-blueviolet)



# Covid-19-Metric-Website



> The COVID-19 pandemic, also known as the coronavirus pandemic, is a global pandemic of coronavirus disease 2019 (COVID-19) caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2). The novel virus was first identified from an outbreak in Wuhan, China, in December 2019.



## Live Demo



> [Live Demo](https://covid-19-metric.netlify.app/)



## video Demo



> [Video Demo](https://www.loom.com/share/5a0be35f8a554416aa3bc95ea06089da)



> Learning objectives: 



- Use React documentation.

- Use React components.

- Use React props.

- Use React Router.

- Connect React and Redux.

- Handle events in a React app.

- Write integration tests with a React testing library.

- Use styles in a React app.

- Use React life cycle methods.

- Apply React best practices and language style guides in code.

- Use store, actions and reducers in React.



- ## Built With



- React

- Redux

- JSX

- Jest 

- ES6 



## Getting Started



To get a local copy up and running follow these simple example steps.

1. Download the `Zip` or `(git clone)[https://github.com/braincee/covid-19-metric-website.git]`

2. `cd covid-19-metric-website.git`

3. Then open in your browser by using `live server`\



**Install**



- On your terminal run : `npm install`

- To start the development server : `npm run start`

- In case you run into any errors please raise an [issue](https://github.com/braincee/covid-19-metric-website/issues).



## Jest testing

For testing using jest follow these steps:

  > npm install

  `This will download all the dependencies`

  > npm test 

  `This will perform all the tests and display the result on the terminal`



## Linter errors testing

For tracking linter errors locally you need to follow these steps:



- After cloning the project you need to run this command

  > npm install

   `This command will download all the dependencies of the project`



- For tracking the linter errors in CSS file run:

  > npx stylelint "**/*.{css,scss}"



- And For tracking the linter errors in React files run:

  > npx eslint .



## Author



👤 **Stephen Annor**



- GitHub: [braincee](https://github.com/braincee)

- LinkedIn: [STEPHEN ANNOR](https://www.linkedin.com/in/stephen-annor/)

- Twitter: [@annor0543](https://twitter.com/annor0543)

  

## 🤝 Contributing



Contributions, issues, and feature requests are welcome!



Feel free to check the [issues page](https://github.com/braincee/covid-19-metric-website/issues).



## Show your support



Give a ⭐️ if you like this project!



## Acknowledgments

- [Nelson Sakwa](https://www.behance.net/sakwadesignstudio) - for the original design

- [Covid-19 API](https://mmediagroup.fr/covid-19) - for displaying the covid-19 data

- [Flags API](https://countryflagsapi.com/). - for displaying the flags

- Hat tip to [Microvers](www.microverse.org)  and all the staff

- Thanks to My coding Partners 

- Thanks to My Morning-session-group and Standup-team Partners and

- Thanks to Code Reviewers



## 📝 License



This project is [MIT](./MIT.md) licensed.