Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developertariq/metrics-webapp
https://github.com/developertariq/metrics-webapp
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/developertariq/metrics-webapp
- Owner: developertariq
- License: mit
- Created: 2023-02-06T09:42:18.000Z (almost 2 years ago)
- Default Branch: develop
- Last Pushed: 2023-02-12T08:56:29.000Z (almost 2 years ago)
- Last Synced: 2024-04-21T09:25:00.965Z (7 months ago)
- Language: JavaScript
- Size: 2.34 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React capstone project - Metrics webapp
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [📖 Metrics webapp ](#-metrics-webapp-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [Home page](#home-page)
- [Details page](#details-page)
- [🚀 Live Demo ](#-live-demo-)
- [🚀 Description Video Link ](#-description-video-link-)
- [💻 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Authors ](#-authors-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)
**Metrics webapp** is about building a mobile web application to check a list of metrics (numeric values) that you will create making use of React and Redux.
You will select an API that provides numeric data about a topic that you like and then build the webapp around it. The webapp will have several pages:
- one page with a list of items that could be filtered by some parameters; in the example below, it's a list of metrics that can be filtered by the country (imagine a search field to introduce the country name like Italy, Croatia, etc.). This page should be your homepage.
- one page for the item details; in the example, the detail page for Czech Republic cities with number of views.
Client
### Key Features
#### Home page
- When the page loads, the webapp shows the list of categories that could be filtered out by some parameter, for example by the category name.
- Along with the category name, you will display some numeric values per category that come from the API.
- When the user clicks (or taps) on a category item, the application navigates to the details page.
### Details page
- In the details page, the webapp retrieves data from the API to show detailed data in the category.
- When the user clicks on the "Back" button (<), the user navigates to the home page.
- [Live Demo](https://tariq-metrics-webapp.onrender.com/)
- [Description Video Link](https://www.loom.com/share/a4049f6e021049139b492daae953ecbe)
To get a local copy up and running, follow these steps.
### Prerequisites
1. Before you go ahead with this React tutorial, please make sure you have:
- Basic understanding of HTML and CSS.
- JavaScript fundamentals (object, array, conditionals etc).
- Familiarity with JavaScript ES6 features (class syntax, arrow functions, object destructuring etc).
2. [Node and npm](https://nodejs.org/en/download/) are installed. Here are the versions I'll be using while making this tutorial:
```shell
$ node --version
v16.13.2
$ npm --version
8.1.2
```
> Installing npm adds two commands to the system—`npm` and `npx`—both of which I'll be using while making this tutorial.
3. [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) is installed. Here's the version I'll be using while making this tutorial:
```shell
$ git --version
git version 2.29.1.windows.1
```
4. A [GitHub](https://github.com/signup) account. :octocat:
### Setup
Clone this repository to your desired folder:
```sh
cd my-folder
git clone https://github.com/developertariq/bookstore.git
```
### Install
Install this project with:
```sh
cd my-project
npm install
```
### Usage
To run the project, execute the following command:
```sh
npm run start
```
### Run tests
To run tests, run the following command:
```sh
npm test
```
### Deployment
You can deploy this project using:
👤 **Md Tariq-ul Islam**
- GitHub: [@developertariq](https://github.com/developertariq)
- LinkedIn: [@developer-tariq](www.linkedin.com/in/developer-tariq)
- Twitter: [@developer_tariq](https://twitter.com/developer_tariq)
## 🔭 Future Features
- Implement some UX improvements: include transitions and/or animations, etc.
- Implement additional pages in the website (each with a route in the SPA): about me, references, etc.
If you spot any bugs or issues in this activity, you can [open an issue with your proposed change](../../issues/).
If you like this project, please star the project.
I highly appreciated [Nelson Sakwa on Behance](https://www.behance.net/sakwadesignstudio) for his excellent design.
I would like to thank all reviewers and testers.
This project is [MIT](./LICENSE) licensed.