Stockbuddy is a web application that aims to help introduce new users to the often confusing world of stocks. The main focus of Stockbuddy is to present the most important data in as straight-forward a way as possible, without cluttering the screen or displaying overly complicated data. Stockbuddy is designed for complete beginners and features a minimal and straightforward user interface to avoid overwhelming the user.
The application includes a search feature where the user can search a stock by symbol. Once a search result appears, it can be pinned to the main workspace with the Pin Button.
The pinned card will display basic information about the stock, and a basic chart showing the stock's performance over the last month. Multiple cards can be pinned and rearranged at will by dragging and dropping if the user wants to compare certain stocks side by side. There is no limit to the number of cards that can be pinned.
Stockbuddy also includes a News feature. Upon clicking the News Button a sidebar will open, presenting the user with a list of ten latest articles related to the business entity the stock relates to.
The user can scroll through the sidebar to view a heading, publish fate, author, and synopsis of each article. Clicking the Link To Atricle Button will open a new tab and display the article on the original website.
As the above image shows, the website is also fully responsive and can be viewed on all devices and screen sizes with no compromise to user experience. Once the user has finished with a particular card, they can click the X Button in the top right corner of every card to remove it from the workspace.
The following APIs and libraries have been used in the creation of Stockbuddy:
- Yahoo Finance API: Used for obtaining all relevant data on the searched stock symbols, including current and historical prices.
- Logo API: Used to display company logos when a stock symbol is searched.
- The New York Times API: Used to display a list of articles related to the stocks the user pinned.
- Bulma: Flexbox-based CSS Framework.
- Chart.js: Used to dynamically create graphs based on historical price data obtained from Yahoo Finance API.
- Sortable.js: Used to create rearrangeable cards.
- Google Fonts: Used to style fonts throughut the site.
- Font awesome: Used for icons throughut the site.