How I created a Stock Tracker application
Requirements
- Users should be able to enter the stock symbol in a input field
- Users should be able to keep adding the stock
- The application should display stock information
Stock Information Included:
- 10 years chart
- Basic Information
- High
- Low
- Last Price
- Volume
- Company Name
- Display image if possible
- Title of the news
- A short paragraph pf the news
- Click the news box should open a new tab and link to the article
Architecture
Object Oriented Design
Stock
- symbol
- high
- low
- volume
- last price
- company name
Stock Container
- List of the stock
- List of the data for displaying Chart
- Method
- Check if the stock is already added
News
- company
- news
User Flow
User enter stock symbol
— > Call Barchart API
— > Display Stock Information
— > Get Company’s full name from Barchart API
— > Convert time format to correct format
— > Call New York Times API
— > Display News
— > Call MarkitOnDemand API
— > Get 10 years data
— > Destruct the object
— > Push the data (price and date) to two arrays
— > Call High Chart API
— > Display Chart
Problems I encountered
New York Times API need certain String format for date. If the month or day is less than 10, you need to add a “0”, otherwise API will return an error.
Solution
Create two helper function and convert it to correct format.

High chart API needs certain format — An array consist of timestamp and the price.
Solution
Destruct the object, get the data, and push to the array.

Summary
The goal of this application is to display the stock’s history 10 years data, basic information, and the latest news. I applied object oriented design, where I have stock and news objects for the application. The main steps to architect and create the application is:
- Write down the requirements
- Build the wireframe
- Build the MVP
- Get the users feedback
- Beautify the application
