Side Project #1 - Crypto FOMO 😱

Introduction

I recently rediscovered my passion for coding after taking a Node.js course and decided to create a fun little side project called Crypto FOMO. You can view it below:

👉 Crypto FOMO 😱
💻 Front End Source
💻 Serverless Source

The idea is to make the user wonder how much money they would probably have if they had invested in a cryptocurrency such as Bitcoin a couple years back instead of buying an item such as an Apple Macbook. I actually did not come up with this idea and saw a site similar to this a couple years back but unfortunately do not remember the original site or creator 😢.

Tech Stack

Here are the technologies that I worked with for the first time ever 👶:

• GatsbyJS - This was my first time working with GatsbyJS and I was intrigued with its server side rendering capabilities and ease of setup.
• Node.JS & Express - The whole point of me creating this project was to practice my Node.js skills since I come from a front end background. Turns out, I only had to create one endpoint and ended up putting more development effort on the front end lol.
• Netlify - I really enjoyed working with Netlify and how easy it was to deploy my applications. They practically made deployment dummy proof! One thing that I really liked was that I could link my Github account and trigger automatic builds for every change I made.
• Netlify Serverless Functions - After completing the backend, I started looking into more about serverless functions and realized that it would have been more appropriate to just create a serverless function in the first place. To be fair, this was a new concept to me but ya live and ya learn 🤷‍♂️ I did actually end up converting it to a serverless function without changing too much :)

My Development Process

1. The first step was to find a reliable and free cryptocurrency API (ya boy is trying to ball on a budget). I tried a couple of them but ended up going with nomics.com because it had the best historical data for Bitcoin, starting at around 2010. Also, the API was free and I could make an unlimited amount of requests but the only downside was that I could only make 1 request / second 😞.
2. Once I had found my API, I began to create the backend service with Node.js and Express. This part was pretty straight forward: when I hit the endpoint passed in with the coin's ticker, I receive back a response that contains the current price of the coin, how much of the coin the user would have, and how much those coins would be worth in USD. I say coins because the application is able to currently handle BTC, ETH, and DOGE.
   • I also created a Mongo collection and added some items that contained their name, price, release date, and an image url (I ended up not using this field). Every time a user would hit the endpoint, it would return a random item from the database. Keep in mind that the item's release date had to come AFTER the coin's initial release date. The item's price would then be used to calculate how much coins the user would potentially have. Right now, there's only around 30 items in the database. Finding an item's release date as well as their initial release price is pretty time consuming...
   • Unfortunately, this request would take at least 2 seconds because it had to hit the API the first time to get the current price of the coin and then hit the API again to get the price of the coin at the item's specified release date. Keep in mind guys this is a free API!!! It is what it is 😤
3. Once I had finished creating the endpoint, I began working on the front end. I had heard a lot about Gatsby and Next.js so I decided to give Gatsby a try first. Everything was super simple to set up and even though I had a single page for my application, I thought the way that Gatsby handled routing was really cool as well. I actually haven't touched React in a bit so coding this part was super fun. I stylized everything myself and threw in a lot of ✨ fancy animations ✨. The coolest thing is the theme switcher every time a user selects a new coin. So for BTC it's an orange theme, ETH is a light purple theme, and DOGE is a brown theme.
   • To help alleviate the 2 second wait for each request, I styled the button to say loading and display it as a gray button each time the user would hit the button. Another potential issue I had thought about was what if there were more than 1 concurrent user hitting the button? If that were the case, it would simply display a message saying that the request was rate limited.
   • I actually had created my Node.js server within my Gatsby project using a Gatsby plugin, but then I realized this wasn't feasible for deployment so I ended up taking some time to separate the two projects.
   • I wished I had created a more legitimate mock up design before continuing with this part because I ended up spending a lot of time trying to decide what I wanted the page to look like as I was developing. That's no bueno 👎

Potential Add Ons

• More coins! The endpoint can already handle most cryptocurrency coins. It just needs to be added to the dropdown on the front end. Technically, I could change the dropdown to an input box and allow the user to type in any coin name.

Conclusion

I had a lot of fun creating this project and deploying it! It's been a while since I've created a side project so this project has definitely awakened something in me 🤓 I have more ideas coming along and can't wait to show it to everyone!

✌️ jwaang