Building Animeccha

Building Animeccha - Prologue

It all started when I saw the DigitalOcean App Platform Hackathon Banner pop up when I open DEV Community. Now I started with open source this year and Hacktoberfest was a brilliant initiative that helped me contribute more and yes I did receive those swags and also planted some trees 😉.

As as soon as I saw the Banner, I was like, whoa another Hackathon. Let's see what do we have here.

Oh so DigitalOcean has a new App Platform that they want us to use and deploy some apps. Sweet!! and man so many prizes.

It's been long since I have created my own project. I have been contributing to other open source projects but creativity demands , well, CREATION !!.

Creation

And so we look for some ideas. As mentioned in the hackathon's post :- https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k One can build a portfolio and I think I should have done that since I have built some projects by now but I don't have a portfolio yet 🤷‍♂️.

Ummm yeah so we aren't doing that. But you know what fascinates me ?

The Apple website with their product pages where each scroll shows those motion pictures in a fancy way. I am always blown away. ALWAYS !!!

Apple site

So that means our app will be a Random Roulette one ! Cool let's google the process and I guess the first link or so was this awesome article on CSS Tricks.

After reading the article, an idea spawned in this tiny brain of mine. Wouldn't it be cool if one can scroll through those awesome anime moments to play them frame by frame 🤔?

will smith

Its POC time !!

Let's hook up a vanilla js project where I do the same that CSS Tricks was doing but instead of fetching Apple's images, use my file system ones, specifically, the DRAGONBALL one.

In a nutshell, we are fetching sequentially ordered images one my one and according to the user's scroll position, drawing them on a canvas.

Let's find more sweet code from StackOverflow to let canvas auto resize on basis of portrait or landscape orientation of my device.

And BAM that works !!!

Well well, now I know exactly what to do. It's time for a React app to take shape and let's leverage my learning.

React App

It took I guess 2-3 days to create routes, folder structure for images and all the components division and we have a fully functioning app , at least, in my localhost.

So the idea was to select an anime from the home page (/home) and then go to Anime page (/anime/:anime) and select a moment to go to Montage page (/anime/:anime/:montage) where the action takes place.

Now this is all good in localhost, but the inception for this came from the App Platform Hackathon right ? Hmm but I am not quite sure I want to learn how to deploy it there yet. Let's deploy it at a place where I have done it before for comfort sake. And here comes Netlify.

DigitalOcean : So just hold on a second. You are gonna use Netlify first to test and deploy your app and eventually explore App Platform ?

Me: Wow you summed it up perfectly.

DigitalOcean :

Crazy Gif

Don't worry, it eventually all adds up and the app is on the App Platform but more on that soon 😋 ...

Building Animeccha - Prologue

Comments

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

More from this blog