Devlog #11

Hello everyone (˶ᵔᗜᵔ˶)ﾉﾞ,

Welcome to Devlog #11 of AniSuffle.

Hope you all are doing great. (≧▽≦)

In this devlog, I’ll be sharing the recent changes and improvement i have mad on the site.

Ummm.. This devlog will be abit longer, but I want to make sure I explain everything correctly. (ᵕ—ᴗ—)

Soooo lets start~

SVG Animation

The first update is the addition of SVG animation beside the title.

I have also replaced the placehodler (those book and video like emoji) that was displayed on the poster card with the same svg (but the animation will be different). (｡•̀ᴗ-)✧

Also about the source of the svg, For the “anime” svg, I got it from AnimeJs and i asked AI to make another svg “manga”, honestly it was quite difficult to make AI understand what I really wanted on the svg, and its still not perfect but ummm its fine and I hope you like those. (￣▽￣*)

LocalStorage

Also I have now integrated localStorage so, now you wont have to be logged in to save anime and manga anymore. (๑˃ᴗ˂)ﻭ

It works in this way, lemme explain in simple:

If you are logged out and you saved few anime/mangas and then you signned in, then all your localStorage saves will be automatically be transfered to the database (and your localStorage will be empty, I had to do this so that There is no duplicate data). ( •̀ ω •́ )✧

Email Verification

And the most time consuming, I have integrated email verification which means now, the email you signup with should be a valied email (you can nomore login/signup with anything@anything.com).

And currently i have used brevo for sending emails and i m on free trial so it has the limit of 300 emails per day, And I assume its more than enough for me right now,also the code expires in 1 hour. (╹◡╹) . [I had to keep authorizing my ip address while setting it up and i thought it was error on my code and I was searching it for hours (╥﹏╥)]

I will tell you how you can get a dummy email (just in case you dont know how to get one) if you want to check the authentication system without using your personal email [especially if you are a reviewer reading this.] but anyone willing to test it, you can use that method.

But I will be doing that in the next devlog… probably, as In this devlog i might upload the video of showing current updates. (=￣ω￣=)

---

I guess I will keep this much for this devlog.

I hope I made things clear. [You might have seen manga on the save list even though i didnt add that in this video , and lemme make things clear, it was imported from the localstorage , which i have saved while checking my project =]

If anything was unclear then please do tell me. (◕‿◕)♡

Helper tools

• SVG : https://animejs.com/documentation/svg/createdrawable
• SMTP : https://www.brevo.com/

---

Thank you so much for reading. (≧▽≦)♡

Have a nice day! (˶ᵔᗜᵔ˶)ﾉﾞ

Devlog #10

Hello everyone (˶ᵔᗜᵔ˶)ﾉﾞ,

Hope you all are doing great.

Welcome to Devlog #10 of AniSuffle.

Ok this time I will keep the devlog abit shorter maybe… (ᵕ—ᴗ—)

Lets start

The first and main change for this devlog is the Ripple like animation when you click the image. (Its just like the circle expanding from a point when you throw a stone on a still lake or pound.) Hope you like it! (๑˃ᴗ˂)ﻭ . Also a little bit change in brightness near the cursor ;)

I will keep a video of the clip.

As I told in previous devlog, I have finally seperated the Anime and Manga section in the save list, and also I kept the Sign In and Login option in the hamburger menu (the three horizontal lines). (｡•̀ᴗ-)✧

A small optimization, I have added the APIs in the head section of HTML with rel="preconnect", so that the connection is established as soon as the site loads. (Just keeping APIs ready for fetching data from them.) ( •̀ ω •́ )✧

Also just to avoid confusion , you will not need to signin to save the anime/manga when i finally ship the project , I am still working on it . (ó﹏ò｡)It is just a sample and doesnt represent the final product =)

Also the save button on Manga section didnt worked before refreshing the site , and I will be transparent , that it was fault of my site and I am still trying to figure it out (ó﹏ò｡)

In the video I have wrote a random email , they might not work when I ship it, its just a dummy after all. (￣▽￣*)

---

I will like to end the devlog now. (ᵔᗜᵔ)

If anything was unclear please comment, I will try to explain again there. (╹◡╹)

Thank you for reading!

Have a nice day! (≧▽≦)ﾉ

Devlog #09

Hello everyone(˶ᵔᗜᵔ˶)ﾉﾞ,

Hope you all are doing great.

Welcome to Devlog #09 of AniSuffle.

In this devlog I will be sharing you all the recent changes I made on my site.

Okay… lemme explain. (๑˃ᴗ˂)ﻭ

---

Auth(Login & SignUp) is finally working

Soooo…

Finally the Auth(Login and SignUp) feature is working. (≧▽≦)

You can now login and save your info on the database and you would be able to login into another device and access your list / saves.

I am planning to work on the email verification system as well, but dont worry I will be explaining you all how you can get a disposable email if you dont want to use your personal email, (I respect your Privacy(ᵔᵕᵔ)).

---

Save Feature

Also the save feature is now working just like I mentioned earlier.

But for now you would have to login to use it.

But dont worry.

Before I ship this site, I will integrate the localstorage feature, to make the save feature work even without the signing in.

I know signing up is kind of annoying sometimes… at least to me it is. (￣▽￣)

So I wanted everyone to still be able to use the save feature even without making an account.

---

Saved Anime & Manga

Currently the stored anime and manga are stored in the same place[To be more specific they will be displayed on the same save list ].

But I guess I will make a seperate list for them.

I will update in the upcoming devlog about it if I do make that change. (•̀ᴗ•́)و

---

UI Changes

Becuase of the sign up and login option the Anime and Manga buttons are on the center for now.

I dont really like how it looks either. (ᵕ—ᴗ—)

So I am planning to move those buttons back to the right side again.

And also add a Hamburger menu (just in case you dont know… It’s The three horizontal line menu, actually i didnt know either before googling it just before writing this devlog (╹ڡ╹ )).

That menu will probably contain more features as I continue working on the site.

---

Backend Debugging

Most of my time actually went into debugging. (ó﹏ò｡)

For some reason I just couldnt figure out why my data wasnt being stored correctly.

Sometimes it would save.

Sometimes it wouldnt.

Sometimes the stored data just refused to show itself in the list (probably it was abit shy (´꒳`)) .

So… that took quite a bit longer than I thought. (・–・;)ゞ

But yeah, finally things seems to be working [At least for now (・–・;)ゞ]

---

Oh…

The last devlog went incredibly long even though I thought it would be shorter…

Looks like this one also became longer than I expected. (ㅅ •᷄ ₃•᷅ ) . (My apologies)

I dont want to bore ya all. (´▽`)

But still I hope I was able to make everything clear.

If not, please do comment below and I will try my best to explain it there as well. ദ്ദി◝ ⩊ ◜.ᐟ

Thank You all so much for reading.

Have a nice day =)

Devlog #08

Hello everyone(˶ᵔᗜᵔ˶)ﾉﾞ,

Welcome to Devlog #08 of AniSuffle.

Hope you all are doing great.

Okay, now let me explain quickly of my recent changes or update on the site.

I am not sure but maybe this will be abit shorter devlog, maybeeee(ᵕ—ᴗ—)…. since most of the work is about backend (so nothing flashy to explain) also I will try to not bore anyone reading this.[also i try keeping the devlogs raw and unfiltered]

Okay now lemme explain.

---

Save Button & Auth Feature

Sooo, the feature I have recently added to my site, actually not added, am still working on it is the save button and also adding a auth feature (the login and signup feature to be more simple =)).

Its not complete though.

And one more thing, you definitely dont need to login or signup to use any of the features and tools I have made so far beacuse I understand that signing up is such a pain, I mean at least to me it isss.

But there is one feature I want to add, and for this I think the signup is necessary.

Now let me expalin how the save feature is going to work.

It might be abit different as I am still working on it, I will just tell what I am planning to do.

---

** Why am I writing this devlog now?**

And before that If you ask why am I writing a devlog if I have not done the job, then ummm…∘ ∘ ∘ ( °ヮ° )

Actually I am working on the backend and I am scared I might mess anything up, as I am not too confident on backend and storing user data safely is my top priority( ◡̀_◡́)ᕤ whenever I am dealing with the backend and while doing this I didnt realize that I have already 5 or maybe 6 hours I am not sure but maybe its around 6 hours of time logged already so I thought of updating the devlog, even though I am in the middle of the function (I mean the development process(ᵕ ó ᴗ ò)).

I feel like I sound abit unclear (ó﹏ò｡)ummm, lemme just explain properly how the save feature is going to (or supposed to) work.

So there are two scenerios.

---

** When not signed in**

When you are not signed it, you will still be able to access all the feature of the site, even the save button.

But there is a catch.

All your saved animes/mangas will be stored on the localstorage.

Just a small explaination just in case you have no idea of what localstorage is, ummm…

In simple terms you can think it as the browser’s storage area, its typically around 5 to 10 MB i assume, but they should be more than enough to us as we are just storing the anime/manga url, source, id and stuff.. lets not go too deep into itദ്ദി(˵ •̀ ᴗ - ˵ ) ✧.

So you will still be able to save animes/mangas but you would need to be on the same browser with same browser profile to access those info.

---

When signed in

When you are signed in, your saved infos will be stored on the database of the server and you will be able to access them from any device and any browser. and This is the reason I am adding the Singup feature

---

Oh…

The devlog doesnt seems small any more. I’m i’m i’m sorry for that(ㅅ •᷄ ₃•᷅ )

Lemme wrap up quick umm but wait I will drop the screenshot of the site by pointing at the save button.

Currently its with no css, but dont worry I will update that ugly default button design (and maybe position as well) as soon as i finish my backed(・–・;)ゞ

I guess thats it for this devlog , If I forget to mention anything , I will surely update it in the next devlog.

If you didnt understand any of the point , please do comment and I will try to explain you there ദ്ദി◝ ⩊ ◜.ᐟ

Thank You all so much for reading.

Have a nice day =)

Devlog #07

Hello Everyone (•◡•) /,

Welcome to Devlog #07 of AniSuffle.

In this devlog I will be sharing the latest updates and improvements I’ve made to the site.

---

** Back and Forward History**

I have finally added the Back and Forward (a sort of histroy) like feature.

Lemme explain it in simple :

If you generate a recommendation and another and another and again another and suddenly you feel like going back then you can press the Back button (just beside the Recommend Btn [to left]) and you will be able to review that anime or even manga.

And then you can come back to your current one or just click on Recommend Me on the very same point and the new anime will be recommeded to you.

Note: Though the anime ahead of you will be cleared out.

---

** Watch Anime**

I have linked

• Crunchyroll
• Netflix
• AnimeSuge (¬‿¬)

to my site.

Which means when a anime is recommended to you, you will get these options:

• Crunchyroll
• Netflix
• AnimeSuge
• Watch Trailer

Watch trailer on Youtube, it will be displayed only if the trailer link is available on the APIs I used (Jikan,Anilist,Kitsu) for anime.

You can click on them and it will open a new tab and will automaticly search the title of the anime on the corresponding platform. [YouTube trailer is embeded on the site so you wont be redirected just to watch the trailer =)]

Also Credit to the creator for the hover animation of Netflix
Button : https://www.educrush.in/projects/netflix-button-animation

And one more thing,

Even though clicking on that link wont pinpoint the exact anime all the time since it is sending data on the search box of that corresponding site and redirecting you to that link, but still it should work for most of the anime, if the anime is available on that particular site.

---

** Read Manga**

I have linked

• MangaDex
• Viz
• BookWalker

to my site and the working of it also same as that of the manga.

---

One thing I must say （ゝ。∂）

This website is made entirely for entertainment, educational and learning purposes only, and it doesnt support any sort of piracy.

---

That’s it for this Devlog

I guess thats it for this devlog and if you have any suggestions or question that you think I didnt explain well or enough (always sucked at explaining others but i do try😅) then plz comment below, I will reply as soon as possible.

Thank you everyone for reading.

Have a nice day =)

Hello Everyone,

Welcome to Devlog #06 of AniSuffle.

I am very excited (*≧▽≦) to share what I was working on and also what I will be working after this devlog.

The biggest milestone for this devlog might be that I have finally integrated all four APIs I mentioned in the early devlogs. (i.e. Jikan, anilistGenreList, mangadexTagId, Kitsu).

All four of them are backing up eachother ᕕ( ᐛ )ᕗ.

This took quite a while because ya know different APIs has different structure and some return data in so weird format as well.

Anyway, the next change I made is background poster change, lemme explain.

Before, I had a backgorund of some live color gradient (actually thats a ovel with diffetent color on it and is rotating and has blur effect applied on it though ⊙﹏⊙).

But now its changed, at first untill any image from either anime or manga is loaded the backgroundImage remains as the old one but as soon as user clicks on Recommend Me button and image is loaded, the backgorund image changes to the poster image and it looks kinda cool (at least to me ●﹏●).

Also it has some blur effect on it as the direct plane image looked kinda weired without blur and a little bit of brightness lowered.

And The last update for this devlog which I am really exited to share is Trailerssss!!!!.

Now You can also watch the anime trailers, you get the option of Watch Trailer, and when you click the button, it will play the trailer from the YouTube and more importantly you would not even have to leave the site to watch the trailer, which means you wont be redireted to any site, you will stay and watch the trailer on the VERY same site ヽ(⌐■_■)ノ♪♬. (only used Jikan and Anilist as the source of anime Trailer link). and if any Anime doent have trailer integrated then the Watch Trailer button will not appear, it will stay hidden. So, thats not a bug ok =).

I will leave a screenshot below =)

I guess thats it for this Devlog. If I forget to mention anything, I will defenitiely update you all in the next Devlog.

Also, Next I am planning to work on adding forward and backward option, if you dont get it right now, please dont worry I will be explaining it once I have successfully added it. and I am thinging of adding favourite or watch later like section. I guess thats it for this devlog.

Thank you so much for reading.

Have a nice day =)

Hello Everyone , Welcome to Devlog #05 of AniSuffle

Finally some good news to share (>‿◠)✌.

Jikan API Ban Recovery

While working on the site, I ended up sending too many request on the jikan API and it temporarily got my IP address banned and thankfully thats over now \0-0/

and I was still able to make some good progress during that time , as i worked with another API (i.e anilist) and guess what it worksssss!!!!

(the structures of different APIs are so different so its kindaa abit ….. you know..)

Poster Improvement

One of the imporvement is the poster display of the anime.

Now the poster can resize itself as the size of the image changes, with a small transition between them (it looks kinda cool to me)

Also the information is displayed in quite orgainzed way as well (though i removed the scroll on the description as that seemed abit off)

currently it displays title, ratings , released date , status (like its onging or finished releasing ).

Screenshot

I will drop the image below \0_0/

High Rated First

I have also made a little change on how the High reated first feature work ,

before it used to compare among the few fetched and now it displays the anime/manga with ratings higher than 7 and if not found among currently fetched then it fetches or requests for more data .

I also decided to add a name at the bottom right of the API to see which one is fetched from which (i mean the info) .

Notch Change

Also I forgot to mention one thing that the notch (apple like degin will disapear when the image is loaded as that looked abit kind of starnge wit the image but still it will appear while the image is in loading state(or when its not totally laoded).

If I didnt forget to mention anything then thats it for this devlog .

If I didnt make anything clear then please consider commenting , I will Try again to expalin =)

Thank you so much for reading .

Have a nice day =)

Devlog #04

Hello everyone ,

Welcome to the devlog #04 of AniSuffle, (A site which recommends you random anime or manga , you can also choose genre of your choice).

Recently , I have been facing an issue with the Posters. Actually the size of posters of different for different anime (some are potrait , some are landscape , some are square and some are soooo huge and if i compress them to one size the quality of the image is lost and it looks sooo bad (╥﹏╥)) . But I still plan to keep on working on it (I will try…).

A new feature

A new feature , I have added a feature “High rated First” .

Its going to recommend you some of the High rated anime. (Not the highest of all time ,or else if i call for the highest rated anime/manga only then only one might repeat , so i tried making the feature work for high rated animes or mangas). I hope I was able to make you clear , if not plz do comment and I will try again to explain =)

**Info about the API **

Currently I am fetching the data from Jikan API . I will leave the API link below if anyone wants to check it out . also, since its a free API , it has a few limitations. Its abit slow and request limit is also low , and thats why I will be trying to fetch APIs from few more other free APIs , I will provide there link below as well .
I guess thats it for this devlog . If I get any update to share , I will definitely write another Devlog . Thank You so much for reading.

//planning to fetch info from them

jikanBaseUrl = https://api.jikan.moe/v4

anilistUrl = https://graphql.anilist.co

mangadexUrl = https://api.mangadex.org

kitsuUrl = https://kitsu.io/api/edge

Have a nice day (ง︡’-’︠)ง
**Also here is a quick shot of what my site looks right now (╥﹏╥) **

Hello everyone , Welcome to the

**Devlog #03 **

of AniSuffle

Here’s a quick update on what i’ve been working on .Till now I wasnt able to make much progress on the JavaScript side , especially the API integration part .
Instead , I spent most of my time improving the design of the card (in which anime/manga poster will be displayed). I worked on adding some borders and tried to make the card look abit cooler by adding the apple notch (the top part, i am not sure but i guess its called notch,maybeeee…..) . I might still make more changes on it , i m done totally satisfied with it (╥﹏╥).
On the top of that , I added almost every anime/manga genre that I could find online , and the users will also be able to genre on the basis of genre selected .

Thats pretty much everything , for this devlog .

Thank You so much .

Have a nice day (˶ˆᗜˆ˵)
Here is a quick shot of the project :

Hello everyone ,
Welcome to another Devlog #02 of AniSuffle!

I just changed the look of the website (had to write whole html and css as my new design was conflicting with the old one (╥ ᴗ ╥) )

But I am satisfied with the new look (atleast for now (ᵕ—ᴗ—)).
[I might see new design on Insta (⁠｡⁠ŏ⁠﹏⁠ŏ⁠)]

And more importantly I made a seperate section for** Manga** as well which means Not only anime but AniSuffle will be recommending Manga as well (i mean i’ll try). I am currently working on the functionality of the site .

Thank you so much , here is the latest screen shot .
Have a nice day

Devlog #01

Hello, Everyone ! I started working on a project “AniSuffle”. Let me tell you about what I did so far and what I will be doing ahead .

I am planing to make a website where you can get anime any random anime recommendation . I would try to integrate multiple APIs on the same site as one API get exhausted pretty quickly .

Till now , I have learned to make a live gradient like effect for the background and also made animation for the cards and text , whenever the site loads.

Will report again soon . Thank You !

Have a nice day =)