Personal Anime/Manga tracker and development learning application
On the surface Kaizen Archives is just a website that lists the Anime/Manga I have watched/read with filtering options. BUT! It’s SOOOOOOOO much more! It’s on version… 170ish? I don’t know anymore. It started in 2006, right after I completed my 2nd web development course at Red River College. I had fallen in love with web development (and still do to this day!) and my mind goes to: Wouldn’t it be awesome to have a website that lists and tracks all the anime I watch?
Thus, the journey of Kaizen Archives began!
The Never Ending Journey
There have been so many iterations, I forget them all and due to not being taught or understanding code versioning in many years into my career don’t accurately have everything. Most of the time a iteration was a “file new” and re-build of the entire thing. Yes I learn the long, hard way, lol. But, in each iteration I am able to see my progress as a developer, cleaner code, newer techniques, updated package versions, ect.
2006 - It Begins
After completing the HTML/CSS/JavaScript and a Asp.Net course from Red River College, it all began:
- Asp.Net 2.0
- Original Name: Shinseiki//Cubed
- Went through 3 or 4 different UI’s, learning CSS/HTML structure, the good old days of table layouts
- There was no database in the first 2 versions, everything was a physical webpage.
- The 3rd version added a Sql Server database
- A WinForm Application for CRUD of SQL Server Database (100% manually created and managed all data)
- All images were manually found and cropped from Google Images and physically stored within the website
2012 - Static HTML, CSS, JavaScript
At some point during this era the name changed to Kaizen Archives.
- Who know how many UI’s I did during this era.
- No more Database, started learning APIs/Json using MyAnimeList as the database.
- Went heavy on the jQuery.
- PhoneGap (now Apache Cordova) app to try and make it mobile.
2014 - BlackBerry 10 WebWorks App
I was a BlackBerry fanboy. There were jokes at conferences as I was the only one in the room with a BlackBerry still. But more importantly BB10 OS came out with a WebWorks Framework which was a way to package a website/webapp as a native app. Think PWA specifically for BB10.
- Browser based IndexDB that sync from the MyAnimeList api.
- Vanilla JavaScript for everything, I was on a “Get rid of JQuery kick”.
- First build to support actual updating of my watch progression, status and score through the MyAnimeList API
- I did publish and use this app on my BB Z10 and BB Passport (god I miss that phone, lol) till 2016ish when I finally caved and converted to Android, all because I wanted to play Pokemon Go…
2016 - NPM & Web API
Well my BlackBerry was gone so back to the website and first entry into “compiling” web things, welcome Gulp, TypeScript and at some point NPM.
Website:
- Ya, JQuery was out, 100%.
- TypeScript with Gulp build process, wow I thought I was cool and advanced, lol!
- At some point also got into npm for things like Axios.
Rest API:
- This was where I really started figuring out what API’s actually where and built mine with Asp.Net Framework Web API which just called the MyAnimeList API.
Database:
- Started with a physical JSON file… because… I thought it was faster?
Other:
- There is this amazing repository technology called Git… Yep took me 10+ years to finally learn repositories, and I started with: Azure Dev Ops.
- These were the golden years of really learning CSS: 980 grids, bootstrap and lots of custom stuff.
MyAnimeList No More API:
- In 2017 (I think it was) MyAnimeList removed all access to its API due to security and access issues. There was still a way to access a endpoint that would return a users Watch/Read listing with limited data that I continued to use but could no longer post watch/read status, progressions or scores to the site.
2018 - Ritsu is born
Everything up to know was all local development, as in I would open Visual Studio and hit “Debug”. I had never published anything (except the BB10 app) to an actual web server. This is where things got, well for me, real, enter Azure App Services and “Ritsu”.
Ritsu: the idea here was to build a single Asp.Net Web API hosted with Azure App Services and that would be the last “API” I ever built for Kaizen Archives. I could keep iterating the web app with new designs all I wanted and that would be it… Didn’t end up that way but was a cool idea.
- Asp.Net Core.
- Used a simply client/secret authentication model (super low tech).
- Azure Table Storage (enter NoSQL) as the database/cache.
Website:
- Still just standard HTML/JS/CSS with NPM and Gulp build.
2019 - Vue.js & Nuxt.js
Through PerByte I was introduced to vue.js and fell in love, so of course I had to re-do Kaizen Archives.
- Vue 2 TypeScript app for a couple versions and then found Nuxt (omg I fell in love all over again, lol).
- Moved to native window.Fetch for everything instead of Axios.
- Continued to use existing Ritsu api.
2021 - Azure Static Web Apps
Microsoft released Azure Static Web Apps and I had to try it out.. and well… I LOVE Azure Static Web Apps!!
Client:
- Nuxt Static Site. Was Nuxt 2 for a couple versions until Nuxt v3 was released and of course had to immediately upgrade.
- Fist time with a custom domain: archives.chunter.me
API:
- Azure C# Functions app, stated as Asp.Net 3.1 and eventually became .Net 6.
- This was a bit of a learning curve as were not a web api anymore, were agnostic individual functions.
- MyAnimeList released it’s API v2 after 4ish years of no API.
- A couple versions were able to post watch/read values back to MyAnimeList.
Ritsu:
- Became it’s own Azure Static Web App.
- Nuxt.js, Azure C# Functions with Azure Table Storage as the Database.
- Used the built in Azure AD authenticate for access.
- Took on more than just MyAnimeList, also became my backup database for all my web scraped data for my fake association: AMFA project.
Vault Files:
- Finally invested in a NAS drive with 16TB.
- Moved all of my Anime/Manga files to the central NAS drive. (good by 5 external hard drives :p)
- Create a console app that could scan all the files and upload the details into Ritsu.
- Fuzzy search system to auto connect the value files to the actual anime.
- Didn’t go any farther and still needs lots of work.
2023 - Back to Relational Database with Supabase
NoSQL has been fun, but… I really wanted relational back and I’ve been wanted to use Supabase for a project since it I found out about them in 2021. But I still wanted to use Azure Table Storage as the Cache for the site so now we got an Azure Static Web App using Azure Table Storage for the compiled cached objects and Supabase as the relational SQL database.
Ritsu: Having a totally separate application was fun. But… ya no more. combined all the Ritsu stuff into the Kaizen Archives project so it’s all in one.
- Authentication is all done using Azure Entra ID using the msal.js library.
Client:
- Nuxt 3 with TailwindCss, Headless UI, and Primevue components.
Azure Functions:
- .Net 6 C# Azure Functions apps.
- Syncs MyAnimeList data to Supabase database
- Compiles Supabase data into complex objects and saves to Azure Table Storage
- Caches the complex objects from Azure Table Storage to MemoryCache.
MyAnimeList:
- Can finally again post my watch/read progressing, status and score data to MyAnimeList
- Which then immediately syncs to Supabase and then re-caches in Azure Table Storage.