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! 👇

Finance Web App

---

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • ⚙️ Setting Up Environment Variables
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 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

• Finance - Project Presentation

---

💻 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:

  cd my-folder
  git clone [e-mail]:ITurres/finance-metrics-web-app.git

• With HTTPS:

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

• With GitHub CLI:

  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 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.

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:

 npm install

Usage

To run the project, execute the following command:

 npm start

Runs the app in the development mode.
Open 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

 npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

(back to top)

---

👥 Authors

👤 Arthur ITurres

• GitHub: @ITurres.
• LinkedIn: Arthur Emanuel G. Iturres.
• Angellist / Wellfound: Arturo (Arthur) Emanuel Guerra Iturres.
• Youtube: Arturo Emanuel Guerra Iturres - Youtube Channel.
• Portfolio: Arthur Iturres - Portfolio.

(back to top)

---

🔭 Future Features

• Select the API.
• Build files structure for React app.
• Prepare routes and navigation in app.
• Make sure that a user can display a list of items and filter them.
• Create the tests for the application.
• Style components to match the design provided.
• Deploy the project and test for final details.
• Record a video for your project.
• 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.

(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.

(back to top)

---

📝 License

This project is MIT licensed.

(back to top)

---