An app that allow investor to do some technical analysis of US stocks. Help them make informed decision before buying the stock.

- React
- React Bootstrap
- React Router
- React stockcharts - Ragu Ramaswamy  @github.com/rrag/react-stockcharts
- Firebase
- Material-UI

- FinancialModellingPrep API
- AlphaVantage API

There are 2 main screens, namely the Dashboard and News

DASHBOARD SCREEN

NEWS SCREEN

• Due to limitations of free API calls, not able to have a stock screening application
• As we need 1 API call for 1 stock and US market has thousand of stocks. Hence not feasible

As for now, there are 4 categories for Dashboard area:-

- Most Actives - 1 API call
- Top Gainers - 1 API call
- Top Losers - 1 API call
- Watchlist - Each stock 1 API call 

• Click on the category item, will list the stocks at the Stock Listing Section Column
• Clicking on stock symbol will bring up the stock chart
• Click '+' icon to add to watchlist
• Click 'i' icon for company info
• Watchlist readme from firebase real-time DB
• At the header, enter a stock symbol, click on 'Add to watch' to add to watch list
• click on 'view' to view the chart or view the news depending on which main page you are in

As for news page:-

• enter symbol and click view will display 5 news
• click on news details will bring you to the news website

• Candlestick chart with 20/50 EMA.
• Daily and Weekly selection
  • Single candle represent daily or wekkly
• Full stochastics indicator (Green line is fast and pink line is slow)
• Volume bar

• React Compononents

- Header
- Category
- Dashboard Column
- Dashboard Row
- Chart
- Watchlist
- Modal - (React Bootstrap)
- News - (Bootstrap Card)

• React Router

- Dasboard/{symbol}
- News/{symbol}

• For wathclist, using promise.all. One API call for each stock
• Firebase database for watchlist
• useReducer for category selection
• useEffect and fetch() method for API request. Will trigger re-render and API request when param or state change
• WindowWidth event listener to resize the chart according
• CSS @media and grid col to resize the column according to window width

• Code Refactoring (DRY stuffs)
• Real-time chart. Inorporate latest data into chart
• Real-time data for watchlist or a button click to update latest price
• Additional Category e.g. Index, Crypto, Screening
• Monthly chart
• Dropdown list for symbol input box
• Responsive for mobile
• Login page
• Error handling

Ragu Ramaswamy  @github.com/rrag/react-stockcharts
AlphaVantage API
FinancialModellingPrep API