AniHub

Sorry guys, I was super busy these past few weeks with school, tests, and other stuff so I barely had time to code at all (I also went to my first hackathon, HackTJ, and got 0 hours of sleep one weekend so that was pretty cool), plus I was a bit burned out as well. Now that spring break is getting close and hopefully I’ll have more time to code and do flavortown again, I finally back and resumed developing AniHub! In this update, I added comments that show up on the bottom of each anime page where you can see other people’s comments and make your own comments and join the discussion as long as you’re signed in! Each comment has the user profile page, name, comment date, and the actual comment. I’ll implement liking and threading in the (near) future. Also added the core functionality of the app, actually tracking your status for each anime and managing these anime lists on your profile page. There’s a new dropdown on the anime page where you can select watching, finished watching, planned to watch, or remove from list to add/remove the series to its respective list, which you can see on your profile page. Added an edit profile button where you can edit your display name, about, and link, and added the top tab that shows the top 10 anime series by IMDb rating (placeholders for now). Added other stuff, components, and styling as well, and updated the schema and types for the data.

Added more components, layout, and other stuff to the anime page to make it more informative, easier to visualize, and more interactive! Added a comment field that either displays a message and a button for you to sign in if you’re not, or a textarea where you can comment as the display name of your logged in account. After you post a comment, it’ll get displayed below in the discussion/comment section at the bottom of the anime page without you refreshing the page. The comment section has all the comments sorted chronologically, with newer ones near the top. Each comment has its author, their profile picture, date posted, and the actual text content. I’ll incorporate threaded replies and likes to the comments soon. Added more information like the overview, status, Japanese name, and other information from both TMDB and IMDb to make the anime page more comprehensive and informative. Updated the episode display layout so now the episodes are still in a grid neatly sorted by season, with an additional small number on the top left showing the episode number. Added a bunch of new types and fields/relations in the Prisma schema as well to incorporate these new changes. Added some backend and database stuff (Prisma proved to be super annoying but super helpful too), and updated styling as well.

Added the anime page so whenever you click on one of the 8 animes (wow, so much for being a “hub” for anime) listed on the homepage, you’ll see detailed information about the series, its individual episodes and their ratings color-coded, the series’ posters and assets, and other information related to the anime! There is a horizontal poster banner fetched from TMDB on the top, and on the left sidebar, the anime’s vertical poster, name, IMDb ratings, detailed information, official website link, production company and its logo, and its genres are all displayed. On the main page, all the episodes are rectangles arranged in a grid, with their ratings displayed and color-coded. I took a lot of inspiration from SeriesGraph when making this, because I thought this was a very effective, interesting, and aesthetically pleasing way to visualize all the episodes’ ratings. When you click on an episode, you’ll get redirected to its IMDb page to view more information.

Big update: Added a profile page that you can access when you’re logged in, with your information like your profile picture, display name, number of followers & following (with a popup modal that shows up when you click on one of them where actual users will be displayed), an edit profile button, email, and date joined are displayed on the left sidebar. Your anime lists, favorites, and stuff that you can showcase will be displayed on the main panel on the right in the future! When you click on the edit profile button, a popup modal appears with input fields where you can edit your name, bio about description, and put a link to your website (the modal currently doesn’t work). Added a nav user menu that shows up when you click on the nav user icon with options to view your profile and sign out. Spent a ton of time struggling, learning, and setting up TMDB fetch requests and stuff to actually fetch anime data and assets. Because their ratings are kinda buns, I had to find a free IMDB API to fetch ratings from IMDB and spent a ton of extra time on making sure these two APIs work together without going above the rate limit. Had to refactor this multiple times so it was kinda frustrating and took a long time, but the result was worth it. Now, 10 temporary anime cards are displayed on the homepage with their info pulled from TMDB and the right rating from IMDB. Also added some animations and updated styling.

Added the sign in page so you can now actually sign up or sign into AniHub either with credentials (email & password), Google OAuth (spent some time configuring the Google Cloud project to get this working), or GitHub OAuth (fixed the issue where it didn’t work on production URL). Because I’m using Better Auth, it really made a ton of the stuff so much easier like adding/syncing new user data to the database, hashing/comparing passwords for credentials, issuing JWT, and other really technical stuff that I don’t understand. If you’re using credentials, you can choose to either sign up or sign in, and if you choose sign up there will be an additional name field for your display name. The form will prompt you with instructions or errors if something’s not working. Once you successfully sign in, the app redirects you to the profile page where you’ll be able to customize a ton of stuff in the future! Also added some new UI components and icons and updated styling and nav bar to make the UX better and more aesthetically pleasing.

I’m starting a huge project called AniHub, which is basically a fullstack platform for tracking anime series and movies you’ve watched and for providing a place for the community to discuss them. This is my first time using Prisma and PostgreSQL (with Neon as the provider) as the database so I spent some time watching YouTube tutorials and reading the docs to learn about the basics. This is also my first time using Better Auth (genuinely so much better than NextAuth), but it was fairly easy to set up, configure everything, and get auth/signin working because their docs are very well written and easy to understand. In this devlog, I set up the basic Next.js project with all the tech stack and dependencies required. Wrote some basic Prisma schema for Better Auth’s user models and stuff. Added a basic backend to get the auth working (currently only GitHub OAuth works but it kinda doesn’t because it’s still in development mode), added a nav bar with a sign in button, added some UI and layout components, and added the homepage. Also added the README and custom scripts to deploy to Vercel.