DEV Community

Alex 👨🏼‍💻FullStack.Cafe
Alex 👨🏼‍💻FullStack.Cafe

Posted on

GoldAPI.io - How to build Gold & Silver Prices REST API and Dashboard using Node.js + React in 5 days

Hi guys, I was away from DEV.TO for a long time growing FullStack.Cafe but recently decided to take a break and work a bit on a new product to avoid tunnel vision and get some practice with React.

The new service called GoldAPI.io. It provides historical daily Gold & Silver prices since 1968 (LBMA AM Fix rates in USD) as well as real-time Gold and Silver Spot Rates in 169 different currencies. Targeted audience - mobile/financial app devs, bullion dealers, wealth management firms, traders.

image

  • UVP: The only Gold & Silver Prices REST JSON API you need
  • Value metric: reqs per day. Pricing - free (100 reqs/daily), 19.99$ - 5000 reqs/daily, Enterprise - Unlimited, by request.

image

From development perspective React feels definitely more lightweight than Angular (I was using Angular for FullStack.Cafe and CodeStack.Cafe for 2.5 years so far). My current bundle size is 170kb (after Brottli compression). The best I could get from Angular was 260kb (including Material UI). React builds faster (1 min vs 3-4 mins for Angular 9). Can be improved even further with proper lazy loading (for routes) and hooks refactoring (P.S. see the refactoring results below). Having JS (and not TS) on frontend and backend helps with speed of development and staying in the same language context. Node (Express) rules for simple fast APIs. If you want to horizontally scale API across multiple CPUs use Throng. Cache everything.

In overall I would recommend MERN (Mongo+Express+React+Node) stack for any modern startup/side project. I don't separate frontend and backend solutions for deployment so it's kinda monolithic but that can be refactored easily. From hosting perspective I use Heroku + mLab (for Mongo). Billing - obviously Stripe is a king. CSS - still use Bootrstrap 4 but want to try Tailwind in the future. Deployment - Heroku Git as one simple push.

And this is site speed results from GTMetrix:

image

In overall I spent 5 days (idea came last Friday) on implementation reusing some code from my previous products (including API billing metering and Stripe integration). Launched yesterday, commented on Quora and in 3 hours got my first sign up. So far got 4 users for 24 hours with zero marketing.

If you build APIs as products and interested how I developed and how I plan to market gimme a shout or comment there.

P.S. This is results of refactored version with components lazy loading. BlogPost and Dashboard components are lazy loaded using routing. And this is awesome guys.

Before (for Landing Page):
image

After:

image

image

GTMetrix:
image

Google Site Speed:
image

Stay safe.
Alex @ GAPI

Top comments (6)

Collapse
 
jakesweb profile image
Jacob Colborn

Do you store the historical gold prices in Mongo or do you pull those on request? I would think that would be a good bit of data to store but would provide better performance if you did not have to reach out every time someone requested this.

Collapse
 
aershov24 profile image
Alex 👨🏼‍💻FullStack.Cafe

Hi Jacob, yes we store historical daily Gold (and Silver) prices from LBMA in Mongo and update them daily (using great node-scheduler job scheduler). This data available since 1968 so there are not so many records (around 20k). The reason there is no reliable data source for that data type anywhere to pull them by request and it usually available only as CSV files or published as static HTML data and scattered around internet. We obviously use caching (in memory) once the data is queried (life & historical).

Collapse
 
matbcf profile image
matbcf

Hi Alex, I'm interested in this project and what's your opinion about Node.js and React.
Thanks in advance

Collapse
 
aershov24 profile image
Alex 👨🏼‍💻FullStack.Cafe • Edited

Ok, so React feels definitely more lightweight than Angular (I was using Angular for FullStack.Cafe and CodeStack.Cafe for 2.5 years so far). My current bundle size is 170kb (Brottli). The best I could get from Angular was 260kb (including Material UI). Can be improved even further with proper lazy loading and hooks refactoring. Having JS (and not TS) on frontend and backend helps with speed of development and to stay in the same language context. Node (Express) rules for simple fast APIs. If you want to horizontally scale API use Throng. In overall I would recommend MERN (mongo+express+react+node) stack for any modern startup/side project. I don't separate FrontEnd and BackEnd solutions for deployment so it's kinda monolit but that can be refactored easily. From hosting perspective I use Heroku + mLab (for Mongo). Billing - obviously Stripe is a king. CSS - still use Bootrstrap 4 but want to try Tailwind in the future.

And this is result of site speed from GTMetrix:

image

Collapse
 
aershov24 profile image
Alex 👨🏼‍💻FullStack.Cafe

See my updates after more refactoring (components lazy loading). NO way you can achieve the same with Angular.

Collapse
 
francarranza profile image
Francisco Carranza

Hi Alex, really interesting project! How did you came up with the idea? I'm really interested in building small Saas but I don't really know where to start. Any advice?