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 :

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.