{"id":17524306,"url":"https://github.com/elijahdre/metrics-webapp","last_synced_at":"2026-04-05T21:32:40.322Z","repository":{"id":129084830,"uuid":"545453926","full_name":"Elijahdre/metrics-webapp","owner":"Elijahdre","description":"Microverse React Capstone Project: This educational project is to build a mobile web application to check a list of metrics (numeric values) using React and Redux. Built with React, Redux Toolkit, API, Css and JavaScript.","archived":false,"fork":false,"pushed_at":"2022-10-27T07:47:00.000Z","size":812,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2024-05-28T22:10:43.398Z","etag":null,"topics":["css3","html-css-javascript","html5","javascript","metrics","microverse","microverse-projects","microverse-students","react","react-hook","react-router","react-test-renderer","react-testing-library","reactjs","redux","redux-toolkit"],"latest_commit_sha":null,"homepage":"https://cryptometrics.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Elijahdre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-10-04T11:59:22.000Z","updated_at":"2024-05-28T22:10:43.399Z","dependencies_parsed_at":null,"dependency_job_id":"af539c72-8694-4663-bcb4-cae5fc11d92e","html_url":"https://github.com/Elijahdre/metrics-webapp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"microverseinc/readme-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elijahdre%2Fmetrics-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elijahdre%2Fmetrics-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elijahdre%2Fmetrics-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elijahdre%2Fmetrics-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Elijahdre","download_url":"https://codeload.github.com/Elijahdre/metrics-webapp/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246122205,"owners_count":20726822,"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","html-css-javascript","html5","javascript","metrics","microverse","microverse-projects","microverse-students","react","react-hook","react-router","react-test-renderer","react-testing-library","reactjs","redux","redux-toolkit"],"created_at":"2024-10-20T14:23:04.710Z","updated_at":"2025-12-30T23:19:10.169Z","avatar_url":"https://github.com/Elijahdre.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://img.shields.io/badge/Microverse-blueviolet)\n\n\n# METRICS WEB APP\n\n## *Microverse React Capstone Project*\n\n\u003e This educational project is to build a mobile web application to check a list of metrics (numeric values) using React and Redux.\n\u003e An API is selected that provides numeric data about a topic and then build the web app around it. The web app will have several pages:\n\u003e - a home page with a list of items that could be filtered by some parameters.\n\u003e - another page for the item details\n\n## Learning Objectives 🔖\n- [x] Use React documentation.\n- [x] Use React components.\n- [x] Use React props.\n- [x] Use React Router.\n- [x] Connect React and Redux.\n- [x] Handle events in a React app.\n- [x] Write integration tests with a React testing library.\n- [x] Use styles in a React app.\n- [x] Use React life cycle methods.\n- [x] Apply React best practices and language style guides in code.\n- [x] Use store, actions and reducers in React.\n\n## Project Documentation 📄\n- [x] Here is the presentation video [link](https://www.loom.com/share/87092be77bf942c795edf7436ef9f588)👈\n\n## Built With 🛠️\n\n- [x] Languages: HTML, CSS, JavaScript\n- [x] Linters: Stylelint and ESLint\n- [x] Front-end library: React with Redux Toolkit\n- [x] API:\n- [x] Code Editor: VSCode\n\n## Website Mockup 📱 💻 🖥️\n![app_screenshot](app_screenshot.png)\n\n## Screenshots 📸\nScreenshots can be found in the repository.\n\n## Live Demo 🔗\n\nCheck the live demo [netlify](https://cryptometrics.netlify.app/)👈\n\n## Getting Started\n\nTo get a local copy up and running follow these simple steps.\n\n### Prerequisites\n\n- [x] A web browser like Google Chrome.\n- [x] A code editor like Visual Studio Code with Git and Node.js.\n\nYou can check if Git is installed by running the following command in the terminal.\n```\n$ git --version\n```\n\nLikewise for Node.js and npm for package installation.\n```\n$ node --version \u0026\u0026 npm --version\n```\n\n### Setup\n\nClone the repository using the GitHub link provided below.\n\n### Install\n\nIn the terminal, go to your file directory and run this command.\n\n```\n$ git clone git@github.com:Elijahdre/metrics-webapp.git\n```\n\n### Usage\n\nKindly modify the files as needed.\n\n### Run tests\n\nTo check for linters, use the files provided by [Microverse](https://github.com/microverseinc/linters-config). A GitHub action is also set to run during pull request.\n```\n$ npm install\n```\n\n### Deployment\n\nThis app is deployed in the GitHub Pages for easy viewing upon merged on the main branch.\nPlease find the link in the Live Demo section.\n\n\n## Author\n\n👤 **Elijah Odjegba** \u003cimg src=\"https://emojis.slackmojis.com/emojis/images/1531849430/4246/blob-sunglasses.gif?1531849430\" width=\"20\"/\u003e\n\n  - GitHub: [![GitHub Badge](https://img.shields.io/badge/-Elijahdre-white?logo=GitHub\u0026logoColor=181717\u0026style=plastic)](https://github.com/Elijahdre)\n  - Twitter: [![Twitter Badge](https://img.shields.io/badge/-kingglijah-white?logo=Twitter\u0026logoColor=1DA1F2\u0026style=plastic)](https://twitter.com/kingglijah)\n  - LinkedIn: [![LinkedIn Badge](https://img.shields.io/badge/-Elijah--Odjegba-white?logo=LinkedIn\u0026logoColor=0A66C2\u0026style=plastic)](https://www.linkedin.com/in/elijah-odjegba)\n\n## 🤝 Contributing\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/Elijahdre/metrics-webapp/issues).\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n\n## Acknowledgments\n\n- [Microverse](https://www.microverse.org/)\n- Code Reviewers\n- Original design idea by [Nelson Sakwa in Behance](https://www.behance.net/sakwadesignstudio)\n  ![Designer_Cindy_Shin](https://user-images.githubusercontent.com/98527559/162937760-e8f46c98-e5b0-4a56-b268-4bb0cb6a61b9.png)\n\n- under the [Creative Commons license](https://creativecommons.org/licenses/by-nc/4.0/)\n  ![License_Creative_Commons](https://user-images.githubusercontent.com/98527559/162938258-ca5c702c-41a6-4364-adc2-20d4bc10c27e.png)\n\n## 📝 License\n\nThis project is [MIT](./MIT.md) licensed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felijahdre%2Fmetrics-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felijahdre%2Fmetrics-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felijahdre%2Fmetrics-webapp/lists"}