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.
- Retrieve data from Rest Countries API
- Display country related information
- 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.
- 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.
To get a local copy up and running, follow these steps.
- 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).
-
Node and npm are installed. Here are the versions I'll be using while making this tutorial:
$ node --version v16.13.2 $ npm --version 8.1.2
Installing npm adds two commands to the system—
npmandnpx—both of which I'll be using while making this tutorial. -
Git is installed. Here's the version I'll be using while making this tutorial:
$ git --version git version 2.29.1.windows.1
-
A GitHub account.
Clone this repository to your desired folder:
cd my-folder
git clone https://github.com/teke85/Metrics-Webapp
Install this project with:
cd my-project
npm installTo run the project, execute the following command:
npm run startTo run tests, run the following command:
npm testYou can deploy this project using: Render (https://render.com/)
👤 Teke85
- GitHub: @teke85
- Twitter: @muttau
- LinkedIn: isiteketo mutau
- 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.
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, please give it a star ⭐
I highly appreciated Nelson Sakwa on Behance for his excellent design. I would like to thank all reviewers and testers.
This project is MIT licensed.