{"id":15549672,"url":"https://github.com/katarighe/capstone-metrics-webapp","last_synced_at":"2026-04-18T00:01:54.046Z","repository":{"id":192374335,"uuid":"687030538","full_name":"katarighe/capstone-metrics-webapp","owner":"katarighe","description":"This React capstone project for Microverse is a mobile web application that allows users to check a list of metrics (numeric values) retrieved from a selected API. The API that was selected is called REST countries, where you can get information about countries via a RESTful API.","archived":false,"fork":false,"pushed_at":"2024-09-10T08:14:41.000Z","size":400,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"development","last_synced_at":"2025-03-29T01:43:51.112Z","etag":null,"topics":["api","css3","documentation","javascript","metrics","microverse-projects","react","reactjs","rest","rest-api"],"latest_commit_sha":null,"homepage":"https://benevolent-crostata-5c4bea.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/katarighe.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-09-04T13:03:15.000Z","updated_at":"2024-09-10T08:14:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"f94a724d-33e0-4302-a652-95317e749769","html_url":"https://github.com/katarighe/capstone-metrics-webapp","commit_stats":null,"previous_names":["katarighe/capstone-metrics-webapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/katarighe/capstone-metrics-webapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katarighe%2Fcapstone-metrics-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katarighe%2Fcapstone-metrics-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katarighe%2Fcapstone-metrics-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katarighe%2Fcapstone-metrics-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katarighe","download_url":"https://codeload.github.com/katarighe/capstone-metrics-webapp/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katarighe%2Fcapstone-metrics-webapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31950891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T17:29:20.459Z","status":"ssl_error","status_checked_at":"2026-04-17T17:28:47.801Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["api","css3","documentation","javascript","metrics","microverse-projects","react","reactjs","rest","rest-api"],"created_at":"2024-10-02T13:41:16.132Z","updated_at":"2026-04-18T00:01:54.011Z","avatar_url":"https://github.com/katarighe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n# Capstone Metrics Webapp\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  - [Run tests](#run-tests)\n  - [Usage](#usage)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [📝 License](#license)\n\n\u003c!-- PROJECT DESCRIPTION --\u003e\n\n# 📖 Mini World Atlas \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n\n**Mini World Atlas** is a React mobile web application that allows users to check a list of metrics (numeric values) retrieved from a selected API called REST countries, where you can get information about countries via a RESTful API.\n\nREST Countries API is a RESTful API that provides information about 200+ countries and territories. It is a free and open-source API, and it does not require an API key. The API is based on the JSON (JavaScript Object Notation) format, and it provides information about a country's name, flag, coat of arms, capital, population, area, borders, currencies, languages, and more.\n\nThis project was created as part of the Microverse Full-Stack Web Development Program, which is a 12-month program that teaches students the skills they need to become full-stack web developers. The program includes training on a variety of programming tools, such as React, JSX, CSS, and JavaScript.\n\nThe webapp has been deployed to Netlify and is now available for you to try. Click the link below to visit the live demo.\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n* React / Redux\n* JSX\n* CSS\n* Javascript ES6\n* Visual Studio Code\n* Jest\n* React Testing Library\n* Node.JS\n* ESLint\n* Stylelint\n* Webpack\n* Babel\n* External API (REST Countries)\n\n\u003c!-- Features --\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\nThe key features of this project include the following.\n\n- **Fetchs and displays data from API, which lists almost 200 countries and territories.**\n- **Displays the estimated population of the world on the homepage, also directly from the API.**\n- **Displays the country detail with their Area, Population, Coat of Arms, Flag, Capital City, Continent, Time Zone, and a 3-letter Country Code.**\n- **Uses a mobile web responsive layout format that looks good and are easy to use on mobile devices.**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- [Live Demo](https://benevolent-crostata-5c4bea.netlify.app/)\n- [Video Presentation](https://www.loom.com/share/5aa00e1311db43879505ce828a033304) \n\nDue to the fact that it is a web app that is not optimized for desktop use, the live demo link is best viewed in mobile mode.\n\nTo change the resolution into mobile, you can use the Inspect method which is available in Google Chrome or Microsoft Edge. Here are the following steps:\n\n- Open the live link of the website (listed above). \n- Right click and select *\"Inspect\"* from the dropdown menu. \n- In the *Inspect* section, select the mobile device you want to simulate from the list.\n- You can also change the dimension to **830 x 630** by customizing it on the *Responsive* section.\n- The website will now be displayed in the mobile view of the browser.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\nGet ready to explore Mini World Atlas Webapp with these steps:\n\n### Prerequisites \u003ca name=\"prerequisites\"\u003e\u003c/a\u003e\n\nEnsure you have:\n - A Web Browser such as Microsoft Edge or Google Chrome 🌐\n - Git 🐙\n - A code editor such as Visual Studio Code 👨‍💻\n\n### Setup \u003ca name=\"setup\"\u003e\u003c/a\u003e\n\nUse `git clone` to get your local copy of the project.\n\n```bash\ngit clone https://github.com/katarighe/capstone-metrics-webapp.git\n```\n\n### Install \u003ca name=\"install\"\u003e\u003c/a\u003e\n\n Run `npm install` to set up the required packages.\n\n```bash\nnpm install\n```\n\n### Run Tests \u003ca name=\"run-tests\"\u003e\u003c/a\u003e\nTo run tests run the following command in your terminal\n```\n npm test\n```\n\nCurrently, there are no test scripts available, but the libraries (React Testing Library and Jest) are set up.\n\nYou can also check linter errors by running this commands:\n\n```\nnpx stylelint \"**/*.{css,scss}\"\n```\n\n```\nnpx eslint \"**/*.{js,jsx}\"\n```\n\n### Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nLaunch the app with the following command\n\n```\n  npm start\n```\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## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 **Mohamed Aden Ighe**\n\n- GitHub: [@katarighe](https://github.com/katarighe)\n- Twitter: [@katarighe](https://twitter.com/katarighe)\n- LinkedIn: [@mighe](https://linkedin.com/in/mighe)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\nHere are *some future features* that could be added to the Mini World Atlas Webapp in the future.\n\n- **Interactive maps:** The maps in the Mini World Atlas Webapp will be made more interactive, allowing users to zoom in and out, pan around, and explore different countries in more detail.\n\n- **More detailed country profiles:** The country profiles in the Mini World Atlas Webapp will be expanded to include more information about each country, such as its history, culture, economy, and government.\n\n- **New languages:** The Mini World Atlas Webapp will be translated into more languages, making it accessible to a wider audience.\n\n- **More data sources:** The Mini World Atlas Webapp will be powered by more data sources, providing users with the most up-to-date information about countries.\n\n- **Collaboration tools:** The Mini World Atlas Webapp will be made more collaborative, allowing users to share information and collaborate on projects.\n\nMoreover, here are some other possible features that could be added in the future:\n\n- A **search bar** to make it easier to find information about specific countries.\n\n- The ability to **add notes and comments** to country profiles.\n\n- The ability to **create custom maps**.\n\n- The ability to **export data** from the Mini World Atlas Webapp.\n\nThe following are a few ideas for future features that could be added to the Mini World Atlas Webapp. The specific features that are added will depend on the feedback and suggestions of users.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\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](../../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\nGive a star⭐️ or a thumbs up 👍 if you like this project! You can visit my GitHub profile for more of my projects.\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- Project supervised by [Microverse](https//www.microverse.org/)\n- [Creative Commons 4.0 License](https://creativecommons.org/licenses/by-nc/4.0/)\n- [REST Countries API](https://restcountries.com/)\n- Original design theme is by [Nelson Sakwa on Behance](https://www.behance.net/sakwadesignstudio)\n- [Link to the original design theme](https://behance.net/gallery/31579789/Ballhead-App-%28Free-PSDs%29) by Nelson Sakwa\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](./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%2Fkatarighe%2Fcapstone-metrics-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatarighe%2Fcapstone-metrics-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatarighe%2Fcapstone-metrics-webapp/lists"}