Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/gjuliao/metric_webapp

This is a react app for fetching data and rendering it based on a figma design. Deployed in render.
https://github.com/gjuliao/metric_webapp

api reactjs

Last synced: 6 days ago
JSON representation

This is a react app for fetching data and rendering it based on a figma design. Deployed in render.

Awesome Lists containing this project

README

        

logo

Microverse

# 📗 Table of Contents

- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [📝 License](#license)

# 📖 Metrics Web App

** Metrics Web App ** Is a react app that fetches data from an API with information about countries in Europe. From the countries it brings data such as population, subregion, area and the capital of the country. React components are being tested with Jest. Live demo is being deployed on render.

demo_picture

## 🛠 Built With

### Tech Stack

>

Client

### Key Features

- **Dynamic content using JavaScript**

(back to top)

## 🚀 Live Demo & Loom Video

- [Live Demo Link](https://metric-app-4hif.onrender.com/)
- [Loom Intro Video](https://www.loom.com/share/3494eac2f64344619450e0aa2f05b92c)

(back to top)

## 💻 Getting Started

To get the content of this project locally you need to run the following commands in your terminal:

and follow these steps.

### Prerequisites

- IDE(code editor) like: **Vscode**, **Sublime**, etc.
- [Git](https://www.linode.com/docs/guides/how-to-install-git-on-linux-mac-and-windows/)

### Setup

Clone this repository to your desired folder:

1. Download the **Zip** file or clone the repo with:
`bash git clone [email protected]:gjuliao/metrics_webapp.git`
2. To access cloned directory run:
`bash cd metrics_webapp `
3. Open it with the live server

### Install

> To install linters and other project's dependencies run:
> `bash npm install `

### Usage

To run the project, execute the following command:

### Run tests

To run tests, run the following command:

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

1. For tracking linter errors in HTML files run:
`bash npx hint . `
2. For tracking linter errors in CSS or SASS files run:
`bash npx stylelint "**/*.{css,scss}" `
3. For tracking linter errors in javascript files run:
`bash npx eslint . `

### Deployment

You can deploy this project using:

(back to top)

## 👥 Authors

👤 **Giovanni Juliao**

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

(back to top)

## 🔭 Future Features

- [ ] **[Add navigation bar]**

(back to top)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/gjuliao/metrics_webapp/issues).

(back to top)

## ⭐️ Show your support

> Write a message to encourage readers to support your project

If you like this project please give us a star and leave us a positive message.

(back to top)

## 🙏 Acknowledgments

> Give credit to everyone who inspired your codebase.

I would like to thank the Microverse team for their guidance on the project.

(back to top)

## 📝 License

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

(back to top)