AniHub

My last devlog on Flavortown! This is a pretty bittersweet moment, I made a lot of progress, learned a ton, and had good memories with this amazing event. This is my last update on AniHub before I ship the project, and because I don’t have a lot of time I’ll just briefly describe what I did in this update. Added the new page that shows the 15 most popular currently airing series for you to explore, added a power search bar on the nav bar and the explore tab that shows the results’ posters, names, and short descriptions. Added responsive design to improve accessibility to all screen sizes and everyone, and added SEO and a logo as well to make the app feel more official and complete. Added a sorting and ascending/descending order dropdown to each explore genre page that helps you sort the different series better. Added additional homepage content of your anime series, and fixed some visual and API bugs. That’s it, I need to ship now and go to sleep :) (sorry for just putting a random screenshot, I genuinely don’t have time)

Added an episode tracking feature so the app now helps you track what you’ve watched better. If you add a series to your anime list as currently watching, a new section will appear where you can input the number of episodes you’ve watched (with input validation of course) and you can see the percentage of episodes in the series you’ve completed. I think this is a super cool way to visualize data and makes tracking series more meaningful and interesting. Your progress on currently watching series also shows up on your profile page, so other people can also see your progress, making this app more social. Also added an average rating per season number on the episodes tab of each anime page, so you can see which seasons are peak and which seasons are filler, making it more informative. Updated some styling and content as well.

Added the explore tab that lists 8 different popular anime genres, and the page makes it a lot easier to browse for new anime series or specific ones you’re looking for, because all the series are categorized into one of the genre pages, sorted by popularity. The explore page has different cards for different genres, each with a description and an icon. Clicking on a genre takes you to the page, which also has a short description of the genre, a powerful search bar that shows how many entries are in the genre, and a load more button that loads 50 series at once to prevent being rate limited and optimize performance. Added a 404 not found page as well so you can easily navigate back home, go back to the last page you visited, or submit a github issue if a page isn’t found. Updated anime series data fetching algorithm (involves so many apis and fetch requests, super annoying) so it’s a bit cleaner and accurate for the top page. The top page now correctly lists the top anime series in order, and the homepage displays 10 of the most popular ones of all time. Updated some code and styling as well to make sure the entire site is fast and smooth as well.

Added a ton of stuff in this update (not nearly enough, gotta really lock in these few days to end flavortown strong and finish the lock in sidequest)! Added the people tab on each anime page so you can see the users that favorited the anime, are currently watching, have finished watching, or are planning to watch it! You can see their profile icons and clicking on them takes you to their profile. This makes the site more engaging and interesting as you can see who are watching what and their interests. This means the anime page is basically done, all the tabs are now functional and working. Also added the about tab, which is just a small page talking about AniHub’s features. Added a section that shows the latest comments from across the platform, with their respective series page linked, so newcomers and people can see the latest discussion right on the homepage, making the site even more engaging. Also added some navigation buttons to different pages to make the homepage more useful and navigation easier. Added smooth animations between pages for a better experience using the site, and added SEO as well to ensure accessibility. Updated some styling and content as well to make sure everything on the site is up to date and working well.

It’s the last week of flavortown, and I’m finally coming back to AniHub to finish this and ship it as my last project on flavortown! I’m locking in this week (literally for the lock in sidequest) to get 12 hours on this project and finish it officially. In this update, I added public profiles for every user so people can actually see which anime series you’ve watched, want to watch, and are currently watching. They can also see your favorites, bio, name, join date, profile picture, and link on the sidebar on the left. I also added a following feature to make this app more social and let users feel a sense of community. You can follow other people and see your own lists of followers and following accounts on your profile. Added comment likes and ratings as well so when you comment, you can optionally rate the anime series out of 5 stars and let other people see how much you like the anime! Other people can also like your comments, making the discussion tab more engaging and fun to use. Also added a favorite button on each anime page so you can add it to your list of favorites, showcased on your profile! Updated styling and content as well to make sure everything works correctly.

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.