Mainichi

NextJSTailwindCSSFirebase

Mainichi

Track what anime is airing in Japan. Keep track of what you're watching this season.

Project Inspiration

I'm one of the people that view anime seasonally. If there's a show that interests me that season I definitely take a look. If there isn't something that interests me, than I look what's airing that season and see if something interests me. Back in the day this was done by using charts and sometimes they were difficult to read. I wanted to make something simple and streamlined. Here is what anime is airing on this day. The purpose of this site was to make things simple, not overload the user with anime that isn't airing that season.

Tech Stack

The tools of choice were NextJS, TailwindCSS and Firebase. I bootstrapped the project with the T3 Stack but I didn't use everything included. The best thing about the T3 stack is the flexibility and type safety. So even though I did't use an ORM or TRPC, I still got the benefit of everything else being setup and configured.

t3 stack options
T3 Stack Options

NextJS and Tailwind

NextJS and Tailwind is just the way I normally develop. Recently the official React docs even recommended on using NextJS as opposed to the old Create React App. Tailwind is just normally how I use to style my react projects. Once I got used to the utility classes I noticed how much faster I can style things. The best part is that Tailwind isn't part of a style system like a Material UI or Bootstrap. Everything can be custom, which is a huge plus.

The Jikan API

Data for anime all came from the Jikan API. It is a lot easier to use compared to the Anilist api which I have used for a project similar to this. However Anilist relied on GraphQL which was great for choosing the payload but I didn't know what queries were available. The docs for Jikan were great.

Firebase Suite

For authentication I used Next Auth when first deploying than tried out Clerk dev. Both were a great experience, Clerkdev especially. However Clerk wasn' compatible with a vercel.app domain because you have to configure routes on deployment. so once I picked Firebase for Firestore, moving auth to Firebase just made sense.