Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ometman/finmetrics
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.
https://github.com/ometman/finmetrics
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
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ometman/finmetrics
- Owner: ometman
- License: mit
- Created: 2023-10-16T00:09:18.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-10-25T12:57:32.000Z (about 1 year ago)
- Last Synced: 2024-01-28T23:10:40.987Z (12 months ago)
- 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
- Language: JavaScript
- Homepage:
- Size: 352 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FinMetrics Application: by Ometman
"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.
It was setup with 'create-react-app' with Redux and employs components, props, routing and Redux states, including Jest testing and other related libraries.
Enjoy it!
# 📗 Table of Contents
- [FinMetrics: Ometman](#finmetrics-ometman)
- [📗 Table of Contents](#-table-of-contents)
- [📖 FinMetrics Web Application ](#-finmetrics-web-application-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [💻 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Author ](#-author-)
- [Authors](#authors)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [❓ FAQ ](#-faq-)
- [📝 License ](#-license-)
# 📖 FinMetrics Web Application
**A Demo Video: Introduction to this Project**
--View here>>>> FinMetrics Demo
>The project includes designs for two different screen sizes.
- Mobile: up to 768px wide.
- Desktop: 768px or wider, with a maximum width of 600px;
>Project Brief :
- It is built on a design by Nelson Sakwa on Behance.
- It is a single page App
- It displays 2 pages: Home and Details.
- Content is dynamic, using React components routes and Redux state management.
- Use of Axios within Redux-ThunkAPI for data fetch.
- Employed Jest testing framework for testing components.
Client
- Pure JSX>
- CSS
- Webpack
- Behance-based design from Nelson Sakwa
- Jest Testing Framework
- Base public Economic Indicator API from World Bank
- Axios
Server
- Optionally: Deployable Using GitHub Pages, Netlify, Render
- Uses API and Github Servers
- Databases
- **Conversion of a Behance real design using Pure JSX***
- **Uses Jest testing and webpack bundled in the 'create-react-app**
- **Uses Redux for fetching data from API using 'createReduxThunk' and state management***
- ***A simple home page with 18 countries from Sub-Saharan Africa with flag images**
- **A details page giving detail metrics on each country accessed through the home page***
- **Responsive Web Design: Desktop & Mobile**
- **Consummes a World Bank Economic Indicator API for dynamic content**
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
- Git
- An IDE (e.g. VS Code)
- A good modern Browser (eg: Chrome, Edge).
### Setup
- Using Git Bash or any integrated terminal of you choice:
- Open your code editor (e.g. VS Code).
- At the terminal, clone this repository to your desired directory.
- Make sure you have node (www.nodejs.org)
- Run npm intall at the prompt
- Make sure all dependencies( eg: webpack, webpack dev server, css-loader, sass-loader)
### Usage
To run the project locally, execute the following command:
- Run npm run server (You should see a success result)
- Now access the app on port 3000 by entering the following in your browser:
- http://localhost:3000
### Run tests
To run tests, run the following command:
**************
Initial Step:
**************
- mkdir .github/workflows
- copy the **linters.yml** file to the directory created above.
- touch .gitignore if not created already and add **node_modules/** to it.
- initialize npm to create package.json file by running the command:
> npm i -y
(here i for install & -y for saying yes to all)
**************
For Stylelint
**************
- Run
> npm install --save-dev [email protected] [email protected] [email protected] [email protected]
- Copy **.stylelintrc.json** to the root directory of your project.
- Run
> npx stylelint "**/*.{css,scss}"
on the root of your directory of your project.
- Fix linter errors.
*******
ESLint
*******
- Run
> npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected]
- Copy **.eslintrc.json** to the root directory of your project.
- Copy **.babelrc.json** to the root directory of your project.
- Run
> npx eslint .
on the root of your directory of your project.
- Fix linter errors.
- For functionality testing, Run
> npm test or npm run test
> All test must pass without error
### Deployment
You can deploy this project using:
- GitHub Pages from a specific branch (e.g. main).
- You can also used any cloud service like gcloud or Azure.
- A deployed version can be found here:
[https://https://finmetrics.onrender.com/]
> Developed by: Omet Omeni (Ometman)
### Authors
- GitHub: [@ometman](https://github.com/ometman)
- Twitter: [@twitterhandle](https://twitter.com/ometman)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/ometman/)
- **Improving voice and setting functionalities**
- **Improving interactivity**
- **Adding additional Economic data from another API**
- **Changing UI - look and feel**
- **Improved Aesthetics & Design**
- **Adding 'help' and contact info pages**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/ometman/FinMetrics/issues).
As 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.
I would like to thank especially [Microverse](https://www.microverse.org/) for inspiring this project & project guidelines.
A special thanks also goes to Nelson Sakwa for the design on Behance.
## ❓ FAQ
- **Can I fork this project?**
- Yes, feel free to fork and knock yourself out :) .
- **Can I share this project with others?**
- Yes, you can share this project for any educational purposes.