Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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

Metric WebApp is a react-based responsive web application that allows users to view countries. The web app has two pages: the home page and the details page. The home page displays a list of countries that could be filtered by country name.
https://github.com/kennedyowusu/metrics-webapp

api-rest react react-hooks react-router reactjs tailwindcss

Last synced: 14 days ago
JSON representation

Metric WebApp is a react-based responsive web application that allows users to view countries. The web app has two pages: the home page and the details page. The home page displays a list of countries that could be filtered by country name.

Awesome Lists containing this project

README 

        



# 📗 Table of Contents



- [📗 Table of Contents](#-table-of-contents)

- [📖 \[Metric WebApp\] ](#-metric-webapp-)

  - [Screenshots](#screenshots)

  - [🛠 Built With ](#-built-with-)

    - [Tech Stack ](#tech-stack-)

    - [Key Features ](#key-features-)

  - [🚀 Live Demo ](#-live-demo-)

  - [💻 Getting Started ](#-getting-started-)

    - [Prerequisites](#prerequisites)

    - [Setup](#setup)

    - [Install](#install)

    - [Usage](#usage)

    - [Run tests](#run-tests)

    - [Deployment](#deployment)

  - [👥 Author ](#-author-)

  - [🔭 Future Features ](#-future-features-)

  - [🤝 Contributing ](#-contributing-)

  - [⭐️ Show your support ](#️-show-your-support-)

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)



# 📖 [Metric WebApp] 



**[Metric WebApp]** is a react based responsive web application that allows users to view countries around. The web app has two pages: the home page and the details page. The home page displays a list of countries that could be filtered by country name. When the user clicks (or taps) on a country, the application navigates to the details page.



## Screenshots



![](./src/assets/screenshots/4.png) ![](./src/assets/5.screenshots/5.png)

![](./src/assets/screenshots/1.png) ![](./src/assets/screenshots/2.png) ![](./src/assets/screenshots/3.png)



## 🛠 Built With 



### Tech Stack 



- React

- Redux

- Redux-router

- Linters (ESLint, Stylelint)

- Jest

- Design Credits to [Nelson Sakwa on Behance](https://www.behance.net/sakwadesignstudio)

- [financialmodelingprep API](https://financialmodelingprep.com/) 



### Key Features 



- **[Home page that displays list of Countries]**

- **[Details page for detailed information about a Country]**

- **[Back button to navigate back to the home page from the details page]**



(back to top)



## 🚀 Live Demo 



- [Live Demo Link](https://kennedy-metric-webapp.netlify.app/)

- [Presentation](https://www.loom.com/share/aafa5d70fd7d4823ada6dded7ebedc0e)



(back to top)



## 💻 Getting Started 



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



### Prerequisites



In order to run this project you need:



```sh

  a browser

  a code editor

```



### Setup



Clone this repository to your desired folder:



```sh

  cd your-folder

  git clone https://github.com/kennedyowusu/metrics-webapp

```



-



### Install



Install this project with:



```sh

  cd metrics-webapp

  npm install

```



-



### Usage



To run the project, execute the following command:



```sh

  npm run build

  npm start

```



-



### Run tests



To run tests, run the following command:



```sh

  npm test

```



-



### Deployment



You can deploy this project using:



```sh

npm start

```



(back to top)



## 👥 Author 



👤 **Kennedy Owusu**



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

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

- LinkedIn: [Kennedy Owusu](https://www.linkedin.com/in/kennedy-owusu/)



(back to top)



## 🔭 Future Features 



- [ ] **[Generate and display more data about a country]**

- [ ] **[Add the tourists sites within a country]**

- [ ] **[Authenticate users before viewing homepage]**



(back to top)



## 🤝 Contributing 



Contributions, issues, and feature requests are welcome!



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



(back to top)



## ⭐️ Show your support 



If you like this project please give it a ⭐️



(back to top)



## 🙏 Acknowledgments 



I would like to thank [Nelson Sakwa]() on Behance for the design inspiration.



(back to top)



## 📝 License 



This project is [MIT](https://github.com/kennedyowusu/metrics-webapp/blob/develop/LICENSE.md) licensed.



_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._



(back to top)