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

https://github.com/elijahdre/metrics-webapp

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, Css and JavaScript.
https://github.com/elijahdre/metrics-webapp

css3 html-css-javascript html5 javascript metrics microverse microverse-projects microverse-students react react-hook react-router react-test-renderer react-testing-library reactjs redux redux-toolkit

Last synced: 2 months 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, Css and JavaScript.

Awesome Lists containing this project

README

        

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

# METRICS WEB APP

## *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.
> An API is selected that provides numeric data about a topic and then build the web app around it. The web app will have several pages:
> - a home page with a list of items that could be filtered by some parameters.
> - another page for the item details

## Learning Objectives 🔖
- [x] Use React documentation.
- [x] Use React components.
- [x] Use React props.
- [x] Use React Router.
- [x] Connect React and Redux.
- [x] Handle events in a React app.
- [x] Write integration tests with a React testing library.
- [x] Use styles in a React app.
- [x] Use React life cycle methods.
- [x] Apply React best practices and language style guides in code.
- [x] Use store, actions and reducers in React.

## Project Documentation 📄
- [x] Here is the presentation video [link](https://www.loom.com/share/87092be77bf942c795edf7436ef9f588)👈

## Built With 🛠️

- [x] Languages: HTML, CSS, JavaScript
- [x] Linters: Stylelint and ESLint
- [x] Front-end library: React with Redux Toolkit
- [x] API:
- [x] Code Editor: VSCode

## Website Mockup 📱 💻 🖥️
![app_screenshot](app_screenshot.png)

## Screenshots 📸
Screenshots can be found in the repository.

## Live Demo 🔗

Check the live demo [netlify](https://cryptometrics.netlify.app/)👈

## Getting Started

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

### Prerequisites

- [x] A web browser like Google Chrome.
- [x] A code editor like Visual Studio Code with Git and Node.js.

You can check if Git is installed by running the following command in the terminal.
```
$ git --version
```

Likewise for Node.js and npm for package installation.
```
$ node --version && npm --version
```

### Setup

Clone the repository using the GitHub link provided below.

### Install

In the terminal, go to your file directory and run this command.

```
$ git clone [email protected]:Elijahdre/metrics-webapp.git
```

### Usage

Kindly modify the files as needed.

### Run tests

To check for linters, use the files provided by [Microverse](https://github.com/microverseinc/linters-config). A GitHub action is also set to run during pull request.
```
$ npm install
```

### Deployment

This app is deployed in the GitHub Pages for easy viewing upon merged on the main branch.
Please find the link in the Live Demo section.

## Author

👤 **Elijah Odjegba**

- GitHub: [![GitHub Badge](https://img.shields.io/badge/-Elijahdre-white?logo=GitHub&logoColor=181717&style=plastic)](https://github.com/Elijahdre)
- Twitter: [![Twitter Badge](https://img.shields.io/badge/-kingglijah-white?logo=Twitter&logoColor=1DA1F2&style=plastic)](https://twitter.com/kingglijah)
- LinkedIn: [![LinkedIn Badge](https://img.shields.io/badge/-Elijah--Odjegba-white?logo=LinkedIn&logoColor=0A66C2&style=plastic)](https://www.linkedin.com/in/elijah-odjegba)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/Elijahdre/metrics-webapp/issues).

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

- [Microverse](https://www.microverse.org/)
- Code Reviewers
- Original design idea by [Nelson Sakwa in Behance](https://www.behance.net/sakwadesignstudio)
![Designer_Cindy_Shin](https://user-images.githubusercontent.com/98527559/162937760-e8f46c98-e5b0-4a56-b268-4bb0cb6a61b9.png)

- under the [Creative Commons license](https://creativecommons.org/licenses/by-nc/4.0/)
![License_Creative_Commons](https://user-images.githubusercontent.com/98527559/162938258-ca5c702c-41a6-4364-adc2-20d4bc10c27e.png)

## 📝 License

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