Building Animeccha - Going live but not really !!!

So continuing from my prevfsdfdsfious post, the app was ready enough to test on the Internet and I hooked the github repo's main branch to Netlify.

Cool now let's test these changes on the Internet. The home page shows fine, the anime page shows fine and now the loading almost 500 images moment.

nail biting

Tiktok Tiktok Tiktok .... Damn this is taking a lot of time. I forgot about latency that going live on Internet brings for assets.

Okay after a good amount of seconds, the montage is loaded. So I started scrolling expecting the below:-

Scrolling

Instead what happened:-

Lag gif

The images weren't scrolling smoothly as on my localhost. And yes they wouldn't dude, COZ I AM MAKING REQUEST EACH TIME WHEN THE USER SCROLLS !!!!!

So now what ?? Well just store the loaded images in React state 😎 and re-deploy.

After few seconds, THIS WORKS!!

Smart

(Eventually instead of state, I chose Ref since I really didn't need a state update-render cycle)

So currently all the images are a part of my Git repo in anime specific folders and they become part of the build. Hmmm if only there was a dedicated service that could store those assets and even allow Image transformation on the fly...

Well that's where Netlify's Large Media Service (LMS) comes into picture. It used git's LFS (Large File System) to store only pointers to the assets in my github repo and the actual assets are stored by Netlify.

And the plus point is the image transformation parameters I am getting to append to each image request and get as per the given width and height which is good to reduce network bandwidth utilisation and thus also the time.

proud baby

Now comes the interesting part:- Netlify LMS allows 2500 transformations per month in their free tier. But I have like 500 images in just one single scene and it only took loading 5 montages to break that limit. So instead of asking me to upgrade my tier to paid plan for more image transformations, Netlify upgraded it to 100,000 transformations per month and I was happy that how generous they are, only to later realize that I am now being charged and if not paid within 28 days of their billing cycle, my account gets suspended.

pikachu suprise

So well, it was time to revisit the hackathon's requirement i.e. hosting my app on the App Platform by DigitalOcean. But that means loosing speed in images delivery or is it ??

Catch you peeps in the next part where we are going to leverage DigitalOcean's Spaces before we head for App Platform.

Building Animeccha - Going live but not really !!!

Comments

Hackathon Experience

Tee or Tree fest ? - Hacktober dilemma

More from this blog

Scoring the Hat-Trick: Milestones at Hashnode

Twofold Journey: Leveling Up At Hashnode

Performance Analysis : NextJS Script Component for Google Analytics

Code Reviews: A Zoomed Out Approach

Crafting a Twitter like sticky sidebar

Command Palette

Comments

Hackathon Experience

Tee or Tree fest ? - Hacktober dilemma

More from this blog