{"id":17660576,"url":"https://github.com/newhoteng/metrics","last_synced_at":"2026-04-09T09:35:36.367Z","repository":{"id":167821279,"uuid":"643450438","full_name":"newhoteng/Metrics","owner":"newhoteng","description":"Metrics is a single-page-application built with react and redux. It fetches air quality data for selected cities from an API and displays the cities with their corresponding air quality index (aqi) on the homepage. Clicking on a city on the homepage directs users to a details page which lists the concentration of the various pollutants.","archived":false,"fork":false,"pushed_at":"2023-10-31T21:21:14.000Z","size":1109,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-02-05T12:46:23.617Z","etag":null,"topics":["css-modules","react","react-router","react-testing-library","redux-toolkit","snapshot-testing","spa","unit-testing","webpack"],"latest_commit_sha":null,"homepage":"https://metrics-59av.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/newhoteng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-21T07:43:08.000Z","updated_at":"2023-10-01T07:56:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"fdf9f530-28d2-49a6-b70f-627c7b14b6cc","html_url":"https://github.com/newhoteng/Metrics","commit_stats":null,"previous_names":["newhoteng/metrics"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newhoteng%2FMetrics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newhoteng%2FMetrics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newhoteng%2FMetrics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newhoteng%2FMetrics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/newhoteng","download_url":"https://codeload.github.com/newhoteng/Metrics/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246308051,"owners_count":20756482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","react","react-router","react-testing-library","redux-toolkit","snapshot-testing","spa","unit-testing","webpack"],"created_at":"2024-10-23T17:07:45.255Z","updated_at":"2025-12-30T23:16:33.032Z","avatar_url":"https://github.com/newhoteng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n# 📗 *Table of Contents*\n\n- [📖 About the Project](#about-project)\n  - [🛠️ Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n    - [Key Features](#key-features)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Setup](#setup)\n  - [Install](#install)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [📝 License](#license)\n\n#  :open_book: Metrics \u003ca name=\"about-project\"\u003e\u003c/a\u003e\nMetrics is a single-page-application built with react and redux. It fetches air quality data for selected cities from an API and displays the cities with their corresponding air quality index (aqi) on the homepage.\nClicking on a city on the homepage directs users to a details page which lists the concentration of the various pollutants.\n[Project Presentation](https://www.loom.com/share/07ed6516058e4ce99520650861cc6ae5)\n\n## :hammer_and_wrench: Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n### Tech Stack\n\u003cdetails\u003e\u003csummary\u003eClient\u003c/summary\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://react.dev/\"\u003eReact\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003eBackend\u003c/summary\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003ca href='https://openweathermap.org/api/air-pollution'\u003eAir pollution API\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n### Key Features\n  - Home page that displays cities with corresponding air quality index (aqi)\n  - Details page that displays concentration of pollutants\n  - Single Page Application\n  - Styled using CSS modules\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :rocket: Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n- [Metrics](https://metrics-59av.onrender.com/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :computer: Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\nTo get a local copy up and running, follow these steps.\u003cbr\u003e\n\n### Prerequisites\n\nIn order to run this project you need:\n- [Node.js](https://nodejs.org/en) installed on your machine\n- Text editor\n\n### Setup\n\nClone this repository to your desired folder:\u003cbr\u003e\n```\ngit clone https://github.com/newhoteng/Metrics.git\n```\n\n### Install\n\nInstall this project with:\u003cbr\u003e\n```\nnpm install\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :busts_in_silhouette: Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n:bust_in_silhouette: **Harriet Oteng**\n- GitHub: [@githubhandle](https://github.com/newhoteng)\n- Twitter: [@twitterhandle](https://twitter.com/HarrietOteng1)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/harriet-oteng-75554666/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :telescope: Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n  - Add svg maps\n  - Explore other monochromatic color schemes\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :handshake: Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\nContributions, issues, and feature requests are welcome!\nFeel free to check the [issues page](https://github.com/newhoteng/Metrics/issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :star: Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\nIf you like this project follow me on GitHub.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## :pray: Acknowledgements \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n- Original design idea by Nelson Sakwa on Behance.\n- Thanks to Microverse for encouraging me to do this project.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n  \n## :memo: License \u003ca name=\"license\"\u003e\u003c/a\u003e\n[License](https://github.com/newhoteng/Metrics/blob/main/LICENSE)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewhoteng%2Fmetrics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewhoteng%2Fmetrics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewhoteng%2Fmetrics/lists"}