Published on

Journey into "how to professionally say" project


Introduction

Sharing my thoughts and learnings from creating a side project as a fun activity over a weekend, which unexpectedly got a lot of traction from the community from Hackernews and Reddit. You can find the project live link here and the source code at here. So let's get started with it.

The Project Idea

The project idea was pretty simple, it was a compiled list of content created by @loewhaley on Instagram with added search feature for making the written content easily accessible.

So once I added the data for it in a JSON object, all I needed to do was to display this information on a webpage. Since I am a huge fan of Next.js, naturally I decided to go ahead with the same stack once again and created a simple site using Next.js and TailwindCSS and started the project with a basic boilerplate

Analytics

I track the analytics of all my side projects using Umami and self-host it on Vercel. For this project, I started noticing a huge spike in the traffic when I posted it on hacker news. For some reason, people started clicking the link and led it to reach the first page and first link of hacker news for a couple of hours.

During this time the traffic of the site peaked at around ~900 live users concurrently. (it may be a trivial number for many but for me, it was a whole new experience). This continued for a couple of hours and within 24 hours, the site registered more than 100k hits.

Some statistics from past 24 hours 1. 100K hits on the website in less than 24 hours
Some statistics from past 24 hours
1. 100K hits on the website in less than 24 hours https://t.co/HgxFuknVkb

The effect of this was that the project was hosted on Vercel (along with my other projects, specifically my portfolio site and my analytics tool), so within 24 hours the outbound bandwidth usage increased to more than 55GB which led to a notification from Vercel stating that I have consumed more than 50% of my bandwidth available.

This was pretty shocking because never had I ever come across this problem so naturally never explored an option to find a solution for it. But I knew that if this momentum continues any longer, the site would go down and take down all other projects as well, so I needed to find some solution and that too in a relatively short time.

I know what you might be thinking, well just add additional bandwidth by throwing in more money at it. I did think of doing just that but I knew it was in that momentum where the site was getting lots of hits but eventually, it was going to slow down, I just need to scale it up only for that duration so that the site and my other projects remain up till the momentum is there.

So I spend some time first to see if Vercel can support this project and provide additional bandwidth till the momentum continues, but that request got rejected (and it makes sense why) but I tried a shot as that seemed to be the straightforward solution for it. And it started to seem that the momentum was getting slow but all of a sudden the traffic increased again as someone cross-posted the link on Reddit and people started using the site once again.

2. Majority traffic came in from @hackernews and @Reddit
2. Majority traffic came in from @hackernews and @Reddit https://t.co/U8M96rtcfR

This is when I knew it won't keep up with traffic and decided to look into other alternatives, during this I found out about Cloudflare Pages and the part where it allows unlimited bandwidth.

Using Cloudflare Pages

So now I needed to figure out how to swap the current deployment strategy to Cloudflare. The first thing I did was since the entire site is just a static page, instead of building the site with next build and having a node server (which Vercel does probably on their backend) to run the site using next start, I swapped the flow to building the site and exporting it with next export, you can read more about next export here.

Once I had done these changes, I created a Cloudflare page by connecting Cloudflare pages to my GitHub repo (as I still needed the automatic CI/CD pipelines) and tested out if the site works fine.

One tip while doing this, Cloudflare by default uses Node 12.x for builds and it required a Node version greater than that, so for Cloudflare to use an upgraded version of Node, we need to set an environment variable called "NODE_VERSION".

Once the site was live, I swapped the domain name so that the traffic can be redirected and served by Cloudflare, once the DNS was resolved, I still waited for a few more minutes for the project on Vercel and then removed the project from Vercel and kept Cloudflare for the deployment of this project.

It is going well with it and if you are interested in the numbers of bandwidth then here it is, till the time the project was on Vercel, it recorded around ~68 GB of Outbound bandwidth and currently (as of today when I am writing this blog) the data on Cloudflare is of around ~54 GB so in total around 112 GB of bandwidth have been consumed with more than 200K total hits on the website.

Some learnings

I had never used Cloudflare but I totally love their product now and looking forward to exploring more of their services. Also, I had learned about the next export command but never tried it on any project so that was a new experience.

I enjoyed the process of experiencing high traffic clicks and what strategy can be deployed to keep the site live and performant on the speed. Looking forward to keeping on learning and building other stuff on the side.

That's it for today, see you some other time.

Updates delivered to your inbox!

A periodic update about my life, recent blog posts, how-tos, discoveries, things I am learning and amazing content for the community!

No spam - unsubscribe at any time!

······ - ······

Share with others