{"id":22618841,"url":"https://github.com/ometman/finmetrics","last_synced_at":"2026-04-16T10:32:23.001Z","repository":{"id":201212136,"uuid":"705413147","full_name":"ometman/FinMetrics","owner":"ometman","description":"This a special react-redux app, that consumes a World Bank Economic Indicator API for Sub-Saharan African countries. The design is from Behance by Nelson Sakwa.","archived":false,"fork":false,"pushed_at":"2023-10-25T12:57:32.000Z","size":360,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-07-28T05:51:13.189Z","etag":null,"topics":["api-rest","axios","axios-react","create-react-app","html-css-javascript","jest","react","react-hooks","react-redux","react-router","reactjs","reacttoolkit","redux-store","redux-thunk","tdd","testing","webpack-react"],"latest_commit_sha":null,"homepage":"","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/ometman.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}},"created_at":"2023-10-16T00:09:18.000Z","updated_at":"2023-10-28T19:48:36.000Z","dependencies_parsed_at":"2023-12-21T16:44:34.018Z","dependency_job_id":"93081131-8b44-4fcf-8dc0-0ccb9863fc22","html_url":"https://github.com/ometman/FinMetrics","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"83e443c27b7686f013ad4a00681046accfc0a626"},"previous_names":["ometman/react-capstone","ometman/finmetrics"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ometman/FinMetrics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ometman%2FFinMetrics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ometman%2FFinMetrics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ometman%2FFinMetrics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ometman%2FFinMetrics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ometman","download_url":"https://codeload.github.com/ometman/FinMetrics/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ometman%2FFinMetrics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31882111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T09:23:21.276Z","status":"ssl_error","status_checked_at":"2026-04-16T09:23:15.028Z","response_time":69,"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-rest","axios","axios-react","create-react-app","html-css-javascript","jest","react","react-hooks","react-redux","react-router","reactjs","reacttoolkit","redux-store","redux-thunk","tdd","testing","webpack-react"],"created_at":"2024-12-08T21:10:18.358Z","updated_at":"2026-04-16T10:32:22.975Z","avatar_url":"https://github.com/ometman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FinMetrics: Ometman\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./ometman-logo.png\" alt=\"logo\" width=\"140\"  height=\"auto\" /\u003e\n  \u003cbr/\u003e\n  \u003ch3\u003e\u003cb\u003eFinMetrics Application: by Ometman\u003c/b\u003e\u003c/h3\u003e\n  \u003ch5\u003e\"FinMetrics\" is an SPA(Sinple-Page Application) that shows the World Bank metrics on Indicators for Sub-Saharan African countries. It serves information for politicians, journalists and all regional economic data lovers. As a Redux-React app state is manage by Redux. Its functionality consumes a World Bank Indicator API and dynamically populates the home page. Addtionally, detail metrics can be accessed through buttons on the home page for each country. This typically is a way 'prop-drilling'. Currently, it has only two pages, the home page and the details page. On the frontend, the React framework is employed to display contents the components, as Redux manages the consumption of the API coming from the Backend of the World Bank API services.\n\n  It was setup with 'create-react-app' with Redux and employs components, props, routing and Redux states, including Jest testing and other related libraries.\n  Enjoy it!\n  \n\u003c/div\u003e\n\n# 📗 Table of Contents\n- [FinMetrics: Ometman](#finmetrics-ometman)\n- [📗 Table of Contents](#-table-of-contents)\n- [📖 FinMetrics Web Application ](#-finmetrics-web-application-)\n  - [🛠 Built With ](#-built-with-)\n    - [Tech Stack ](#tech-stack-)\n    - [Key Features ](#key-features-)\n  - [💻 Getting Started ](#-getting-started-)\n    - [Prerequisites](#prerequisites)\n    - [Setup](#setup)\n    - [Usage](#usage)\n    - [Run tests](#run-tests)\n    - [Deployment](#deployment)\n  - [👥 Author ](#-author-)\n    - [Authors](#authors)\n  - [🔭 Future Features ](#-future-features-)\n  - [🤝 Contributing ](#-contributing-)\n  - [⭐️ Show your support ](#️-show-your-support-)\n  - [🙏 Acknowledgments ](#-acknowledgments-)\n  - [❓ FAQ ](#-faq-)\n  - [📝 License ](#-license-)\n\n\n# 📖 FinMetrics Web Application \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n\n**A Demo Video: Introduction to this Project**\n--View here\u003e\u003e\u003e\u003e \u003ca href=\"https://www.loom.com/share/b535632d9f8342dd94cd5c3a2e3d59de?sid=69e66a75-1689-479f-ad53-3d4386e193e1\"\u003e FinMetrics Demo \u003c/a\u003e\n\n\u003eThe project includes designs for two different screen sizes.\n\n - Mobile: up to 768px wide.\n - Desktop: 768px or wider, with a maximum width of 600px;\n\n\u003eProject Brief :\n - It is built on a design by Nelson Sakwa on Behance.\n - It is a single page App\n - It displays 2 pages: Home and Details.\n - Content is dynamic, using React components routes and Redux state management.\n - Use of Axios within Redux-ThunkAPI for data fetch.\n - Employed Jest testing framework for testing components.\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\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003ePure JSX\u003c/\u003e\n    \u003cli\u003eCSS\u003c/li\u003e\n    \u003cli\u003eWebpack\u003c/li\u003e\n    \u003cli\u003eBehance-based design from \u003ca href=\"https://www.behance.net/sakwadesignstudio\"\u003e Nelson Sakwa\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003eJest Testing Framework \u003c/i\u003e\n    \u003cli\u003eBase public Economic Indicator API from World Bank\u003c/li\u003e\n    \u003cli\u003eAxios\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eServer\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003eOptionally: Deployable Using GitHub Pages, Netlify, Render\u003c/li\u003e\n    \u003cli\u003eUses API and Github Servers\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003cul\u003e\n    \u003cli\u003eDatabases\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cli\u003eCurrently, utilizes Public API Service entities.\n\u003c/details\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **Conversion of a Behance real design using Pure JSX***\n- **Uses Jest testing and webpack bundled in the 'create-react-app**\n- **Uses Redux for fetching data from API using 'createReduxThunk' and state management***\n- ***A simple home page with 18 countries from Sub-Saharan Africa with flag images**\n- **A details page giving detail metrics on each country accessed through the home page***\n- **Responsive Web Design: Desktop \u0026 Mobile**\n- **Consummes a World Bank Economic Indicator API for dynamic content**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\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### Prerequisites\n\nIn order to run this project you need:\n- Git\n- An IDE (e.g. VS Code)\n- A good modern Browser (eg: Chrome, Edge). \n\n### Setup\n\n- Using Git Bash or any integrated terminal of you choice:\n  - Open your code editor (e.g. VS Code).\n  - At the terminal, clone this repository to your desired directory.\n  - Make sure you have node (www.nodejs.org)\n  - Run npm intall at the prompt\n    - Make sure all dependencies( eg: webpack, webpack dev server, css-loader, sass-loader)\n\n### Usage\nTo run the project locally, execute the following command:\n- Run npm run server (You should see a success result)\n- Now access the app on port 3000 by entering the following in your browser:\n- http://localhost:3000\n\n### Run tests\n\nTo run tests, run the following command:\n\n**************\nInitial Step:\n**************\n- mkdir .github/workflows\n- copy the **linters.yml** file to the directory created above.\n- touch .gitignore if not created already and add **node_modules/** to it.\n- initialize npm to create package.json file by running the command: \n\u003e npm i -y      \n\n(here i for install \u0026 -y for saying yes to all)\n\n**************\nFor Stylelint\n**************\n- Run \n\u003e npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x\n- Copy **.stylelintrc.json** to the root directory of your project.\n\n- Run \n\u003e npx stylelint \"**/*.{css,scss}\" \non the root of your directory of your project.\n- Fix linter errors.\n\n*******\nESLint\n*******\n- Run \n\u003e npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x  @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x  @babel/preset-react@7.x\n- Copy **.eslintrc.json** to the root directory of your project.\n- Copy **.babelrc.json** to the root directory of your project.\n\n- Run \n\u003e npx eslint .  \non the root of your directory of your project.\n- Fix linter errors.\n\n- For functionality testing, Run \n\u003e npm test or npm run test\n\u003e All test must pass without error  \n\n### Deployment\nYou can deploy this project using:\n- GitHub Pages from a specific branch (e.g. main). \n- You can also used any cloud service like gcloud or Azure.\n- A deployed version can be found here:\n[https://https://finmetrics.onrender.com/] \n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 👥 Author \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n\u003e Developed by: Omet Omeni (Ometman)\n\n### Authors\n- GitHub: [@ometman](https://github.com/ometman)\n- Twitter: [@twitterhandle](https://twitter.com/ometman)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/ometman/)\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\n- **Improving voice and setting functionalities**\n- **Improving interactivity**\n- **Adding additional Economic data from another API**\n- **Changing UI - look and feel**\n- **Improved Aesthetics \u0026 Design**\n- **Adding 'help' and contact info pages**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\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/ometman/FinMetrics/issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nAs a tech enthusiast, your support is always appreciated. If you like this project please do let us know with your support in any way you see fit.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\nI would like to thank especially [Microverse](https://www.microverse.org/) for inspiring this project \u0026 project guidelines.\nA special thanks also goes to \u003ca href=\"https://www.behance.net/sakwadesignstudio\"\u003e Nelson Sakwa\u003c/a\u003e for the design on \u003ca href=\"https://www.behance.net/sakwadesignstudio\"\u003eBehance\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## ❓ FAQ \u003ca name=\"faq\"\u003e\u003c/a\u003e\n- **Can I fork this project?**\n  - Yes, feel free to fork and knock yourself out :) . \n\n- **Can I share this project with others?**\n  - Yes, you can share this project for any educational purposes. \n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\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\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fometman%2Ffinmetrics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fometman%2Ffinmetrics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fometman%2Ffinmetrics/lists"}