{"id":15597196,"url":"https://github.com/wahaj-ali/metrics-webapp","last_synced_at":"2025-04-24T06:41:51.990Z","repository":{"id":65744502,"uuid":"598099352","full_name":"Wahaj-Ali/metrics-webapp","owner":"Wahaj-Ali","description":"The Metrics web app, 'Population Index', is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With an intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.","archived":false,"fork":false,"pushed_at":"2023-06-06T16:16:54.000Z","size":471,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-01-09T15:03:36.912Z","etag":null,"topics":["css3","javascript","jsx","react-redux","reacttestinglibrary","testing","unit-test"],"latest_commit_sha":null,"homepage":"https://populaton-index-by-wahaj.netlify.app/","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/Wahaj-Ali.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-02-06T11:57:23.000Z","updated_at":"2023-06-07T08:35:41.000Z","dependencies_parsed_at":"2024-10-03T01:20:59.041Z","dependency_job_id":"1c3ac00b-8231-4f24-84d0-7a5fc5aa09ec","html_url":"https://github.com/Wahaj-Ali/metrics-webapp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wahaj-Ali%2Fmetrics-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wahaj-Ali%2Fmetrics-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wahaj-Ali%2Fmetrics-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wahaj-Ali%2Fmetrics-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wahaj-Ali","download_url":"https://codeload.github.com/Wahaj-Ali/metrics-webapp/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233559754,"owners_count":18694220,"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":["css3","javascript","jsx","react-redux","reacttestinglibrary","testing","unit-test"],"created_at":"2024-10-03T01:20:51.321Z","updated_at":"2025-01-12T03:18:55.517Z","avatar_url":"https://github.com/Wahaj-Ali.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"left\"\u003e\n  \u003ch1\u003ePopulation Index-Metrics webapp\u003c/h1\u003e\n\n\n\u003e The Metrics web app, 'Population Index', is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With our intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.\n\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n# 📗 Table of Contents\n\n- [📗 Table of Contents](#-table-of-contents)\n- [📖 Population Index-Metrics webapp ](#-population-index-metrics-webapp-)\n  - [🛠 Built With ](#-built-with-)\n    - [Tech Stack ](#tech-stack-)\n    - [Key Features ](#key-features-)\n  - [🚀 Live Demo ](#-live-demo-)\n  - [🚀 Video Project Presentation ](#-video-project-presentation-)\n  - [💻 Getting Started ](#-getting-started-)\n    - [Setup](#setup)\n    - [Install](#install)\n    - [Usage](#usage)\n    - [Testing](#testing)\n    - [Deployment](#deployment)\n  - [🤝 Contributing ](#-contributing-)\n  - [⭐️ Show your support ](#️-show-your-support-)\n  - [🙏 Acknowledgments ](#-acknowledgments-)\n  - [❓ FAQ ](#-faq-)\n  - [📝 License ](#-license-)\n\n\u003c!-- PROJECT DESCRIPTION --\u003e\n\n# 📖 Population Index-Metrics webapp \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n![Metrics Mockup screen](https://github.com/Wahaj-Ali/metrics-webapp/assets/111431787/cd2309cf-f1cb-4844-9c0a-13bc330e32ef)\n\n\u003eThe Metrics web app is a powerful React-based SPA that allows you to explore detailed population metrics for countries all around the world! With our intuitive interface and powerful data visualization tools, you'll be able to quickly and easily access the latest population data for every country on the planet.\n\n\u003eAt the heart of our web app is a sophisticated [API](https://restcountries.com/v3.1/all) that enables us to fetch real-time data about each country, including detailed population counts and other key metrics. And with the power of Redux, we're able to store this data securely and efficiently, ensuring that it's always available when you need it.\n\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n  - HTML\n- CSS\n- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n- [React]((https://github.com/microverseinc/curriculum-javascript/blob/main/todo-list/lessons/webpack_v1_1.md))\n\n\u003cdetails\u003e\n  \u003csummary\u003eLanguages\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003eHTML\u003c/li\u003e\n    \u003cli\u003eCSS\u003c/li\u003e\n    \u003cli\u003eJavascript\u003c/li\u003e\n    \u003cli\u003eReact\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eBundler\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003eWebpack\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eServer\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003eGithub\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003c!-- Features --\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **Webapp(SPA)**\n- **Use REST [API](https://restcountries.com/v3.1/all)**\n- **Responsive**\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- \u003ca href=\"https://populaton-index-by-wahaj.netlify.app/\" target=\"_blank\"\u003eLive Demo Link\u003c/a\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🚀 Video Project Presentation \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- \u003ca href=\"https://www.loom.com/share/7d0c87edbe014e3d989e7f2df117e94c\" target=\"_blank\"\u003e-Video Project Presentation Link\u003c/a\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nTo get a local copy up and running, follow these steps.\n\n### Setup\n\nClone this repository to your desired folder:\n\n```sh\n  git clone https://github.com/Wahaj-Ali/metrics-webapp.git\n  cd metrics-webapp\n```\n\n### Install\n\nBefore installing the app, make sure to install node.js in your machine. In order to check if node is installed run the following command:\n\n```sh\n  node -v\n```\n\nInstall this project with:\n\n```sh\n  npm install\n```\n\n### Usage\n\nTo run the project in a development server, execute the following command:\n\n```sh\n  npm start\n```\n\n### Testing\n\nTo run the tests in a development server, execute the following command:\n\n```sh\n  npm test\n```\n\nTo to build for the production, execute the following command:\n\n```sh\n  npm run build\n```\n\n### Deployment\n\n- I  use [netlify](https://www.netlify.com/) to deploy my webapp.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- AUTHORS --\u003e\n\n👤 **Wahaj Ali**\n\n- GitHub: [@Wahaj-Ali](https://github.com/Wahaj-Ali)\n- Twitter: [@Ali96Wahaj](https://twitter.com/Ali96Wahaj)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/wahaj-ali-82b9b1164)\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/Wahaj-Ali/metrics-webapp/issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- SUPPORT --\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nA satr to this repo would be appreciated.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\n\n- Thanks to everyone that helped  me to get all the tasks completed.\n- Design of the Webapp is inspired by [Nelson Sakwa's](https://www.behance.net/sakwadesignstudio) [Ballhead App](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)).\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- FAQ (optional) --\u003e\n\n## ❓ FAQ \u003ca name=\"faq\"\u003e\u003c/a\u003e\n\n\u003e Add at least 2 questions new developers would ask when they decide to use your project.\n\n- **What is this project?**\n\n  - It's a project of micoverse curriculum.\n\n- **Is there any SQL database for this site**\n\n  - No, there isn't.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](https://github.com/Wahaj-Ali/metrics-webapp/blob/dev/LICENSE) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwahaj-ali%2Fmetrics-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwahaj-ali%2Fmetrics-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwahaj-ali%2Fmetrics-webapp/lists"}