How I saved $25/month with caching

My app "Above Average" was making 100+ API calls on every client visit. This was costing me $25 every month. Here's how I eliminated that cost.

First Iteration: When a user would visit “Above Average”  the frontend would directly make API calls to the API service. I was on a paid tier of $25/month. I'd get 300 API calls per minute. My app's API calls were being made in 2 stages:

Firstly, I'd get the list of all stocks that constitute the Nasdaq stock index. Then, I'd loop through these stock symbols, and make an API call for each stock to get the stock's historical prices. These calls totalled to 103 on each client visit. With 300 API calls/minute, 3 quick reloads could exhaust my limits.

Second Iteration:  The first issue I noticed was that my API key, stored as an environment variable, was getting exposed in the network requests in the browser. No matter how I stored my API key, if the frontend was making these API calls, the API key would get exposed. So I made a proxy API server using Express. Meaning, now my frontend would make calls to my backend, my backend would relay the requests to the API service and in turn, relay the responses to the frontend. This way, the API key never had to live in my frontend and hence, was now secure. I added a CORS policy in my server that only allowed the frontend's domain to send requests to the proxy server.

Third Iteration: Finally, the $25 charge started feeling alot every month given that my app was only working with “End of Day” data. In simple terms, the data would only change once a day. So I explored different solutions. I first thought of implementing client side local storage and it'd be simple but then, 3 unique client visits (3 * 103 API calls) would still exhaust my API calls limit (300 calls per minute). So the solution had to be in the proxy server. Some good google searches and a few hours later, I incorporated in-memory caching in my proxy server using “Node-Cache”.

Now, if the frontend client made a request to the server and there'd be a cache miss (cache not found), the API service would be called, and the cache would be updated. The next time a client would make a request, there would be a cache hit on the server and the cache is what the server would respond with. The API service would not be called in this case.  This enabled me to switch to the free tier which allowed me 250 API calls per day. Thanks to the caching, it was no longer a problem. 

So that was my experience! 

From tiptoeing with 300 calls/minute to free usage with 250 calls/day It was now unexplainably exciting to refresh my app 30 times in a minute and not have my dry humour error show up. It's quite empowering to actually save $$ (albeit a low amount) due to knowing a thing or two.