How I created a Stock Tracker application

Thomas Chen
Aug 28, 2017 · 2 min read

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:

  1. Write down the requirements
  2. Build the wireframe
  3. Build the MVP
  4. Get the users feedback
  5. Beautify the application
)
Thomas Chen

Written by

Fullstack Engineer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade