Inspiration

This stock app was initially inspired by our side hobby of investing and just generally following the stock market. We thought it would be cool to see stock prices in real time at work. Once we started working on the project though, we realized that there are actually many practical use cases for a stock tracker app. The biggest use case would be for journalists and just general people working in the finance field. News articles about stocks often have a real time update macro that lists the stock price the news article is talking about. Similarly, this macro enables journalists and finance workers to easily spin up a similar feature in their confluence document that they use in their workspace.

What it does

The Stock Ticker uses the Yahoo Finance API to pull stock information so it can easily be displayed within Confluence. Using the forge infrastructure, type in To display information, all one has to do is to input their desired stock symbol.Then general information for that stock( such as price, asset profiles, price changes in both dollar and percentage amounts) will appear as a macro.

How we built it

The macro app is built on three states: input, success, and fail. Input is the text box screen Success is where the correct stock is displayed Fail is when the stock symbol does not exist. Within the Success screen, we were able to fetch Yahoo API using Forge API functions. Then the json data is stored within an Typescript interface and is called upon when the UI declares the different individual elements.

Challenges we ran into

It was very tough to work without React Components and CSS stylings as it is not supported by the Forge API. Therefore, we had to find an alternative way to make styling changes (such as font size, color, and font-weight). Our solution for that is creating text SVGs from scratch. They may generally be used for icons and logos, but SVGs behave very similar to HTML + CSS styling. In the end, we were able to import the SVG as a Image, which is one of the components within the Forge API.

What we learned

This section heavily overlaps with the previous section because our biggest challenge forced us to learn SVGs and how it works. Once we got the hang of it, it is basically like playing around with CSS: doing minor adjustments via forge tunnel till the user interface looks right. Another learning process was getting used to React components within Typescript, as we have not experienced this type of development.

Accomplishments that we're proud of

This section also overlaps with both of the previous sections. We were pretty proud of the way it turned out despite all the limitations within the Forge UI. However, using SVGs to change the colors of price changes was a big deal as that is essential within a stock application.

What's next for Stock Tracker

This was a pretty cool small project to do. Since we only just started our experience with SVGs, we would like to add in a chart for the stock if that is possible in the future. Also, we could implement a live update feature for the stock.

Share this project:

Updates