Git Product home page Git Product logo

etorres-revature / lucky_mountaineers Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 3.48 MB

A web dashboard to provide stock information to users using server side api calls and asynchronous JavaScript.

Home Page: https://etorres-revature.github.io/Lucky_Mountaineers/

License: GNU General Public License v3.0

HTML 28.72% JavaScript 65.85% CSS 5.43%
api portfolio-edge stock-market stock-information stock-news clear-search

lucky_mountaineers's Introduction

PORTFOLIO EDGE ๐Ÿ’ด ๐Ÿ’ต ๐Ÿ’ท ๐Ÿ’ถ ๐Ÿ’ฐ ๐Ÿ’ธ

Financial freedom is one of the main goals for every working person throughout the world. Over time the single best return on your investment can be through the purchase of publicly traded stocks.

Some big reasons to invest in the stock market:

  1. Historically, the stock market goes up (appreciates) over time;
  2. Reinvestment of returns and compounding interest can help your money grow more quickly;
  3. Mitigation of potential risks by diversifying investments across multiple sectors;
  4. Various forms of investment vehicles (ETFs/single stocks/mutual funds/etc.);
  5. Generally, stock market returns beat inflation. [1]

If you are ready to maximize your stock knowledge then PORTFOLIO EDGE is the web app for you.

HOW PORTFOLIO EDGE WORKS

This is the home screen of the PORTFOLIO EDGE web app:

PORTFOLIO EDGE web app home screen

Currently, users can choose to search either the New York Stock Exchange (NYSE) or the NASDAQ exchange.

In this example, a user is searching Coca-Cola on the NYSE:

PORTFOLIO EDGE NYSE

Upon hitting the search button a brief company description is presented as the "Company Profile", a chart with the past 12-month price information is presented, and current and historical price information for the stock as "Stock Information":

PORTFOLIO EDGE NYSE search

Similarly, users can search for stocks on the NASDAQ exchange:

PORTFOLIO EDGE NASDAQ

And, receive "Company Profile"/12-month chart/"Stock Information" for that stock:

PORTFOLIO EDGE NASDAQ search

Each search pulls the top fifteen latest news stories in the "Stock News" section:

PORTFOLIO EDGE latest stock news

Using the "Clear Search" button, users can remove all of the information from the most recently researched stock:

PORTFOLIO EDGE clear search

And then, be ready to start all over again:

PORTFOLIO EDGE new search

Start using PORTFOLIO EDGE today!

STOCK APIs USED IN PORTFOLIO EDGE:

Financial Modeling Prep

PORTFOLIO EDGE uses the Financial Modeling Prep Ticker Search. When the user inputs the company to search, PORTFOLIO EDGE then requests a ticker search from the API to return the appropriate stock ticker.

One limitation of this search is that it is limited to one particular exchange. So, the user has to know if the stock being searched is traded on the NYSE or NASDAQ and enter information into the appropriate input.

Check out the Financial Modeling Prep API documentation.

Alpha Vantage

Once PORTFOLIO EDGE has received the information about the company's ticker symbol, it then uses the Alpha Vantage API for Company Overview; Quote Endpoint; and the Monthly Time Series.

Company Overview is used to pull the following information:

  • Company Description;
  • Company Name;
  • Market Sector;
  • Exchange;
  • Market Capitalization;
  • BETA;
  • 52 Week High/Low; and
  • Last Divident Amount/Date.

Quote Endpoint is used to pull the following information:

  • Price;
  • Change Value;
  • Change Percent;
  • Daily Low/High;
  • Daily Volume; and
  • Last Trading Date.

Montly Time Series returns monthly stock information from the previous 240 months (20 years). This information is distilled into the previous 12 months information and entered into the chart that is displayed on screen.

Check out the Alpha Vantage API documentation.

Intrinio

Finally, each API concludes with a call to the Intrinio API for All News to get the last fifteen top stock stories. This allows PORTFOLIO EDGE users to remain up-to-date with the latest stock market news.

Check out the Intrinio API documentation.

๐Ÿ’ป Technologies Used ๐Ÿ’ป

๐Ÿ“ HTML5 ๐Ÿ“

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. The goals are to improve the language with support for the latest multi-media and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices; and to remain backward compatible to older software. Many new symantec features are included.

HTML5 content borrowed from this page.

๐ŸŽจ CSS ๐ŸŽจ

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in a markup language (such as HTML5). CSS is designed to enable the separation of presentation and content; including layout, colors, and fonts. This separation improves content accessibility to provide more flexibility and control in the specification of presentation characteristics, enabling multiple web pages to share formatting by specifying relevant CSS in a separate file, which reduces complexity and repetition in the structural content (HTML), as well as enabling the file to be cached to improve the page load speed between the pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice, and on Braille-based tactile devices.

CSS content borrowed from this page.

๐ŸŒ€ Tailwind CSS ๐ŸŒ€

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS content borrowed from this page.

๐ŸŽ‡ JavaScript ๐ŸŽ‡

JavaScript (JS) is one of the core technologies of the World Wide Web (along with HTML and CSS). It enables interactive web pages and is an essential part of web applications. JS is a multi-faceted, scripting language that provides versatility through Application Programming Interfaces (APIs) and Document Object Model (DOM) manipulation, among others.

JavaScript content borrowed from this page.

๐Ÿ“ˆ Chart.js ๐Ÿ“ˆ

Chart.js is a free and open source JavaScript library that makes data visualization fun and easy. Use the library in conjunction with the HTML5 canvas tag to quickly add data visualization to your JavaScript projects.

Find out more about Chart.js at this page.

Author ๐Ÿ˜Ž

PORTFOLIO EDGE designed and executed by:

Lucky Mountaineers

  • ๐Ÿช Emmanuel Durand ๐Ÿช
  • ๐Ÿ’Ž Toccara Hicks ๐Ÿ’Ž
  • ๐Ÿ’š Eric D. Torres ๐Ÿ’š
  • ๐ŸŒˆ Telicia Watson ๐ŸŒˆ

Contact: [email protected].

License

GNU General Public License - 3.0

footnote 1: 5 Reasons to Invest in the Stock Market

WARNING: these statements are generalizations and should not be construed as actual financial advice. Please consult a certified professional before investing in the stock market.

lucky_mountaineers's People

Contributors

etorres-revature avatar manu-austin avatar toccara avatar

Stargazers

 avatar  avatar

Watchers

 avatar

lucky_mountaineers's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.