Finantier Frontend Software Engineer - Coding Challenge Project

By: Chai Wen Xuan

Tech :

Frontend framework : React.js

CSS framework : Bootstrap

API : TwelveData, Alpha Vantage

Graphing tools : Plotly

Cloud server : Digital Ocean

Project procedure

Preparation

1. Research on APIs (TwelveData, Alpha Vantage,Yahoo Finance)
2. Check data format of data retrieved
3. Research on suitable graphing tools. (AnyChart, Plotly, React-stockcharts)

Design

1. Getting ideas from some stock viewing sites and combining them together. (Yahoo Finance, Etoro)

Developing

1. Fetch API.
2. Choose both TwelveData and Alpha Vantage as Alpha Vantage do not provide real-time data and TwelveData do not provide MarketCap.
3. Reconstruct data to suit the format of the graphing tool parameters.
4. Displaying required data.
5. Set timer to fetch data every 60 seconds due to limited total amount of requests. (800 per day, 8 per minute)(TwelveData), (500 per day, 5 per minute)(Alpha Vantage)
6. *Changed the required bid & ask to high & low as API chosen is not from a broker.
7. *Added Sector to make the data displayed neater.
8. Tried two graphing tools, Plotly & AnyChart and decided to use Plotly as it is more customisable.

Deploying

1. Tried Heroku, which is a free deploying platform.
2. Faced Error => (Javascript Heap Out of Memory)
3. Tried to deploy on GitHub but the page is not showing anything.
4. Choosing Digital Ocean as server memory is more customisable and cheaper.
5. Build app.
6. Deploy.

Challenging part:

1. Debugging the Error stated in Deploying. Where the Heap is Out of Memory.

Solution: Change to cloud server with more memory and limiting the maximum memory size of the app.

User Guide:

1. Enter company code in the search bar above, click Search,the relevant information will be displayed,
2. Regarding the graph, hover above the candle stick to look at the details.
3. Drag to adjust specific range for viewing.
4. Double click to reset axes.
5. Some famous company code: FB,APPL,TSLA,MSFT,AMD

Link to website: Click Me!