Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/iturres/finance-metrics-web-app

⚛️React-Redux-App⚛️ | A web app providing comprehensive company data, including financial metrics like 52-week high, 52-week low, and market capitalization. Features include personalized watchlists, Mobile-friendly, easy to use, and modern design. Powered By the 🔗FMP Web API. 🧪Tested with Jest🧪. Check it out! 👇
https://github.com/iturres/finance-metrics-web-app

Last synced: 28 days ago
JSON representation

Host: GitHub
URL: https://github.com/iturres/finance-metrics-web-app
Owner: ITurres
License: mit
Created: 2023-07-31T16:25:50.000Z (over 1 year ago)
Default Branch: development
Last Pushed: 2024-05-16T01:13:14.000Z (8 months ago)
Last Synced: 2024-10-09T12:01:51.225Z (3 months ago)
Language: TypeScript
Homepage: https://iturres.github.io/finance-metrics-web-app/
Size: 3.64 MB
Stars: 14
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        



    

    Finance Web App



---

# 📗 Table of Contents

- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [⚙️ Setting Up Environment Variables](#env-setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [📝 License](#license)

---

# 📖 Finance Web App 

- This project is a user-friendly web app providing comprehensive company data, including financial metrics like 52-week high, 52-week low, and market capitalization. Features include personalized watchlists, Mobile-friendly, easy to use, and modern design.

  Access companies profile (Price, Beta, Volume Average, Market Capitalization, Last Dividend, 52 week range, stock price change, stock price change in percentage, Company Name, Sector, website and image link).

---

#### Learning objectives

- Follow a designated [design]().

- Use React documentation.

- Use React components.

- Use React props.

- Use React Router.

- Connect React and Redux.

- Handle events in a React app.

- Write integration tests with a React testing library.

- Use styles in a React app.

- Use React life cycle methods.

- Apply React best practices and language style guides in code.

- Use store, actions and reducers in React.

## 🛠 Built With 

### Tech Stack 

  


    

      

      TypeScript

    

    

      

      React.ts

    

    

      

      Redux

    

    

      

      Jest

    

    

      

      SASS

    

    

      

      React-Bootstrap

    

    

      

      HTML5

    

  


---

### Key Features 

- **Use of Hooks**

- **Use of State**

- **Use of Redux Toolkit**

- **Use of React Router**

- **Use of React Bootstrap**

(back to top)


---

## 🚀 Live Demo 

- [Finance - Live Demo Link](https://iturres.github.io/finance-metrics-web-app/)

- [Finance - Project Presentation](https://drive.google.com/file/d/1L7tZ9wsICwrWNL_xhhQSJvOQZExxn_Az/view?usp=sharing)

---

## 💻 Getting Started 

To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need:

### Setup

Clone this repository to your desired folder:

Example commands:

- With SSH:

```bash

  cd my-folder

  git clone [email protected]:ITurres/finance-metrics-web-app.git

```

- With HTTPS:

```bash

  cd my-folder

  git clone https://github.com/ITurres/finance-metrics-web-app.git

```

- With GitHub CLI:

```bash

  cd my-folder

  gh repo clone ITurres/finance-metrics-web-app

```

---

### ⚙️ Setting Up Environment Variables 

In order to see and play with the [FMP API - Company Information](https://site.financialmodelingprep.com/developer/docs#company-profile-company-information) in this project, you'll need to set up your environment variables. I've provided a `.env.sample` file that you can use as a template. Follow these steps to configure your environment variables:

1. **Create a Copy of `.env.sample`**

   - Duplicate the `.env.sample` file and rename it to `.env.development.local` or `.env.production.local` depending on your environment.

2. **Replace Placeholder Values**

   - Open the `.env` file in a text editor.

   - Replace the placeholder values (e.g., `FMP_KEY`) with your actual [FMP API key](https://site.financialmodelingprep.com/developer/docs).

3. **Save the Changes**

   - Save the changes to the `.env` file.

4. **Usage in the Project**

   - The project will now automatically pick up the environment variables from the `.env` file during runtime.

### Important Notes:

- **Security:** Keep your `.env` file secure and never expose it publicly, as it may contain sensitive information.

- **Git Ignored:** Ensure that the `.env` file is listed in your `.gitignore` to prevent accidental commits of sensitive information.

(back to top)


---

### Install

Install this project's dependencies with:

```bash

 npm install

```

### Usage

To run the project, execute the following command:

```bash

 npm start

```

Runs the app in the development mode.\

Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\

You may also see any lint errors in the console.

### Run tests

```bash

 npm test

```

Launches the test runner in the interactive watch mode.\

See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

(back to top)


---

## 👥 Authors 

👤 **Arthur ITurres**

- GitHub: [@ITurres](https://github.com/ITurres).

- LinkedIn: [Arthur Emanuel G. Iturres](www.linkedin.com/in/arthuriturres).

- Angellist / Wellfound: [Arturo (Arthur) Emanuel Guerra Iturres](https://wellfound.com/u/arturo-arthur-emanuel-guerra-iturres).

- Youtube: [Arturo Emanuel Guerra Iturres - Youtube Channel](https://www.youtube.com/channel/UC6GFUFHOtBS9mOuI8EJ6q4g).

- Portfolio: [Arthur Iturres - Portfolio](https://iturres.github.io/iturres-reactive-portfolio/).

(back to top)


---

## 🔭 Future Features 

- [x] Select the API.

- [x] Build files structure for React app.

- [x] Prepare routes and navigation in app.

- [x] Make sure that a user can display a list of items and filter them.

- [x] Create the tests for the application.

- [x] Style components to match the design provided.

- [x] Deploy the project and test for final details.

- [x] Record a video for your project.

- [x] Migrate to TypeScript.

- [ ] Enhance Desktop UI/UX.

- [ ] use D3.js for data graphics.

(back to top)


---

## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/ITurres/finance-metrics-web-app/issues).

(back to top)


---

## ⭐️ Show your support 

Give a ⭐ if you liked this project!

(back to top)


---

## 🙏 Acknowledgments 

I thank the Code Reviewers for their advice and time 🏆

Original [design]() idea by [Nelson Sakwa on Behance](https://www.behance.net/sakwadesignstudio).

(back to top)


---

## 📝 License 

This project is [MIT](./LICENSE) licensed.

(back to top)


---