Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benmukebo/covid-19-data
COVID-19 Data is a tracking site that provides the necessary information on COVID-19 cases in any African country and their updates. Built with React and Redux.
https://github.com/benmukebo/covid-19-data
react react-router redux
Last synced: 7 days ago
JSON representation
COVID-19 Data is a tracking site that provides the necessary information on COVID-19 cases in any African country and their updates. Built with React and Redux.
- Host: GitHub
- URL: https://github.com/benmukebo/covid-19-data
- Owner: BenMukebo
- Created: 2021-11-15T20:51:49.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-27T22:11:22.000Z (almost 3 years ago)
- Last Synced: 2023-03-10T06:11:30.584Z (over 1 year ago)
- Topics: react, react-router, redux
- Language: JavaScript
- Homepage: https://benmukebo-covid-19-data.herokuapp.com/
- Size: 1.68 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Covid_19_data
## Description
- Covid 19 Data is a tracking site that provides the necessary information on covid 19 cases in any African country and their update
|| Home || Details ||
|-|----------------------|-| ----------------------|-|
||||||
## 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
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
This project is build with:
The page will reload if you make edits.\
You will also see any lint errors in the console.
-  
-  
## Live Demo Link
### [Live Demo](https://benmukebo-covid-19-data.herokuapp.com/)
## Loom Video Link
### [Loom](https://www.loom.com/share/82de7bc7b90e44f3be305fd70344fc20)
## Getting Started
### Clone this repository
- To get the content of this project locally you need to run this command in your terminal:
```bash
$ git clone [email protected]:BenMukebo/covid-19-data.git
$ cd covid-19-data
```
### Run project
- After cloning the project you need to run this command
```bash
$ npm run start
```
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
## Setup
### Install React Font Awesome
- Get Started:
```bash
$ npm i --save @fortawesome/fontawesome-svg-core
```
```bash
$ npm install --save @fortawesome/free-solid-svg-icons
```
```bash
$ npm install --save @fortawesome/react-fontawesome
```
To watch and output to directories by using folder paths as your input and output
### Install React Router
- To use the Router component provided to wrap your components and associate them with a path.
```bash
$ npm install react-router-dom
```
### Install React Redux Loading Bar
```bash
$ npm install --save react-redux-loading-bar
```
### Learn More
> This command will download all the dependancies of the project
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
## Tests
- Install
```bash
$ npm i @testing-library/jest-dom
```
```bash
$ npm install --save-dev @testing-library/jest-dom
```
- Run test
```bash
$ npm run test
```
### Learn More
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
For tracking linter errors locally you need to follow these steps:
- For tracking the linter errors in HTML file run:
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
- For tracking the linter errors in CSS file run:
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
> `npx stylelint "\*_/_.{css,scss}"`
### Analyzing the Bundle Size
- And For tracking the linter errors in JavaScript file run:
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
> `npx eslint .`
### Making a Progressive Web App
- Use `npm run build` to run the app in live server
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Deployment
- `npm run build` fails to minify
### Show your support
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
## Author
👤 **Ben Mukebo**
- GitHub: [@BenMukebo](https://github.com/BenMukebo)
- Twitter [@BenMukebo](https://twitter.com/BenMukebo)
- LinkedIn [BenMukebo](https://www.linkedin.com/in/kasongo-mukebo-ben-591720205/)
## :handshake: Contributing
Feel free to check the [issues page](https://github.com/BenMukebo/covid-19-data/issues)
Give a :star: if you like this project! ❤️❤️❤️
## Acknowledgments
- Thanks to everyone who will get time to check this code especially to code reviewers.
## 📝 License
This project is [MIT](https://github.com/microverseinc/readme-template/blob/master/MIT.md) licensed.