Stockersa is a visually animated app that provides financial news, data and commentary, including stock quotes, business news, financial statements,expense reports and key information about companies. It uses financial modeling prep API, it supports over 15000 stocks across multiple exchanges. Whole U.S. market, XETRA, EURONEX, TSX, SEDAR, SEHK and more.  

ChartsFMP APIResponsive
View the site
Stockersa thumbnail

What I made 💁‍♂️

I wanted to build a website exploiting third party APIs. After the whole GME hype, I decided to lean towards the stock market and finance. Stockersa is exploiting the FMP stock market API, it allows you to get all the data related to +15000 stocks that includes price quotes, market news, financial statements and more. Some of the data are presented with interactive/animated charts. It's very easy to use, intuitive and completely responsive.

What I used 🔷

  • 1. React/Create React App
    I used Create React App to build user interfaces in this web application.
  • 2. SCSS/Styled-Components
    I used SCSS with Block Element Modifier (BEM) notation and Styled-Components to design this web app.
  • 3. Node.js/ Express.js
    I used Node.js/ Express.js to build a server that will consume the third party APIs calls.
  • 4. Netlify/Heroku
    I deployed the react app on the Netlify cloud and the server on Heroku.

About this production 🥳

After trying multiple free APIs and trying to combine them to get the maximum of data with a decent request rate. I finally decided to redo everything and go with Financial Modeling Prep API I purchased their starter pack for absolute flexibility.

Charts were used to render the data from the API. I mainly used recharts react library and airbnb visx to build those charts. The features users can use in Stockersa :

  • Access real-time stock data, quotes(with price rate of change) and volumes up to 5 years back, with 7 different time periods.
  • Get access to the latest news related to the searched stock or the global market in general.
  • Get important daily key metrics like P/E Ratio, Earnings Per Share (Eps), market cap, average volume and more.
  • Get an overview of the company/corporation of your interests.
  • Get access to the yearly financial statements up to 5 years. Includes net income, gross profit, revenue, ebitda and more.
  • Get also access to the yearly expense information up to 5 years. With metrics like cost of revenue, research and development expenses, general and administrative expenses, selling and marketing expenses and more.
  • Get access to a Google map that tracks the company's headquarter and 65+ global exchanges all over the globe with key information.

Stockersa is fully responsive, please try it on all devices :

Stockersa Responsive

What I learned ✅

Stockersa was probably the most interesting project I have done. It made me explore and experiment many different APIs. In the making of this project, I tried alpha vintage API, tiingo API, finnhub API and news API before settling with FMP API. I learned how to manipulate data coming from the APIs, cleans it and cache some requests.

I went through some CORS issues when trying to call some APIs during development. I tried setting up proxies in react, but it took a while to receive a response. The latency is high enough to make my application appear a bit sluggish, and I had to host it somewhere in the cloud anyways. I went for the best solution which was building my own proxy (back-end server) with NodeJS/Express and adding the necessary headers. I created my own routes and sent the API urls as query params.

I've learned using charts to visualize the data. I had a lot of fun using recharts and visx, learning their features and how to use them according to the data.

I guess the most important thing stockersa has taught me is the importance of reading and understanding documentation.

Finally 😎

I absolutely loved creating stockersa, I didn't know where I was heading, but I ended up doing something decent. It made me realize that there are so many resources out-there for cheap that enables you to build very interesting things.


Apr 5th, 2023


If you like this work, please share.

View the siteGithub code

Other Projects

© by Ilias Allek. All rights reserved.