Tony Hsu

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.

Pretty big update but I don’t really have a lot of time to write a good devlog, so here’s a short overview of the changes I made:

• Added a backend that connects to a prisma postgres database to store interest form signups and accounts
• Users can create an account on the website with credentials, Google, or GitHub

Added the sponsors page and the about page to the site. For the sponsors page, there’s a hero section describing the page, 3 different tiers (gold, silver, bronze how original) with placeholder sponsor cards listed with dashed borders that redirects you to our non-existent email if you are a sponsor that wants to reach out to us. Because it’s still pretty early, we haven’t started sponsor outreach yet so this page is pretty much useless. For the about page, there’s a short paragraph talking about the hackathon with links to the interest form on the homepage and the faq page that’s coming soon. There’s also a section of cards for the team on the page, each with their slack profile image, name, and roles listed, as well as the link to their personal website if they have one. Added SEO to all the functional pages as well so our site can actually be discovered by sponsors (please do), and updated some styling.

Added a section on the homepage with a bunch of cards, each with an icon, heading, and description for an aspect of the hackathon so you can get to know the event better, including prizes, categories, sidequests, and more. This lets the user instantly understand what the hackathon’s about without reading through too much. Also added a simple footer with our social links (the accounts haven’t been set up yet) and logo. Added a 404 not found page as well that redirects you back to the homepage or the last page you visited. Updated some content and styling as well to ensure the site is responsive and functions properly across all screen sizes.

This is my first time hosting a hackathon with a team of 5 other people, and I’m super excited to get the website set up as quickly as possible since we need to start looking for sponsors and sending out interest forms. This is basically a game dev themed hackathon with a lot of mini games and sidequests to make it as engaging, fun, and memorable as possible. Since our name is 8-Bit Jam, I decided to design the site with a retro 8-bit style and font. It turned out really clean and it’s a really fun experience trying out this new design style. In this update, I set up the basic Next.js project with all the boilerplate and dependencies configured, added a cool nav bar with our logo, links, and sign up button, as well as a hero section with important information regarding the event and an input form for email RSVP interest signup (currently doesn’t work). Added responsive design to ensure the site works well across all screen sizes, improving navigation and accessibility. Also deployed the site to Vercel so people can actually see it.

Pretty big update: finally added backend and database to the site so you can actually make comments or leave messages on the site, and I can directly update the site’s content and data with the admin page that will soon be implemented! Spent some time reading and the docs for Prisma and Better Auth, the Postgres database ORM and the auth library respectively, and refreshing my memory with them since I haven’t used them in quite a bit. But got everything set up, configured, and migrated pretty quickly and finished writing all the basic models to make commenting work. Also added a checkbox that lets you choose whether to post the message publicly or only send to me if you want to contact or message me personally. All the comments are sorted by date, show your username, and date. Also added an entire account system (a complete overkill) that only lets me log in with my Google account and no one else’s (obvious reasons), and redirects me to the admin page where more things will be added. Currently the auth blocks everyone except for me, and I can only log in and log out, but at least this works. Had to set up and configure Google OAuth and everything, so it took a bit. Also updated styling, added responsive design for comments, added SEO for the new pages, and updated the README.

Added a section of “testimonials” or just random quotes my friends said about me with their profile picture, username, and the quote. These aren’t real professional testimonials but just something fun and interesting for you to read about if you wanted to. Also added a comment section with a form/box where you can submit a comment (no login or anything required) with a custom username, optionally an email address for me to contact you, and a textarea where you can leave your message! This will probably make the website a lot more engaging and interactive since you can actually chat with me here or see what other people have said. Since backend still hasn’t been set up yet, only the frontend template is done and posting/submitting a comment doesn’t do anything. Also fixed some issues with the search bar menu not going away, added a smooth color transition for switching between dark/light modes, and updated some styling and animation effects to make sure everything is as smooth and functional as possible.

Added blog post search on the blog tab to help you find blog posts more easily. It searched both the title and the actual content of the posts to ensure the results are relevant and useful. Also added dynamically generated SEO metadata for blog posts so my site and blog posts specifically can actually get discovered by search engines and read by people. Also added a sun/moon icon on the top right of the nav bar that toggles between dark and light modes to ensure accessibility and customization to everyone. Spent a ton of time tweaking tailwind colors and other stuff to ensure the styling works great and consistently across all pages in both modes. The icon also toggles between sun and moon (with a smooth transition animation) depending on what mode you’re currently on. Also fixed some visual issues and updated styling as well.

Added an interactive widget that displays different stuff about me (movies, books, food, tools, and other things) according to the 2 dropdowns that the user can select so I’m basically doxxing myself pretty hard. The first dropdown lets you choose the broad category while the second filters what I do with the category, and the results show up (animated as well of course). If there is a link to a tracking service that I use, it will also be displayed on the interactive widget. Also added a pretty powerful search bar to the nav bar that lets you search across all my projects and miscellaneous stuff by their names and descriptions! The matching results are links to the projects themselves, making navigation and accessibility significantly better. Added some responsive styling on the sorting/filtering components and other newly added stuff to make everything work well on all screen sizes! Also fixed some styling/visual bugs, as well as improving some animation effects to ensure everything is smooth.

Added sorting and filtering to the misc projects page, the skills page, and the blog posts page so you can browse and search through my projects, skills, and blog posts easily! You can sort by date, name, category, progress, and many other options and the elements will get sorted correctly (with smooth animation and nice UX of course). The same thing goes for filtering, and you can also filter by dates so the list of filters don’t get too long (unlike the old version of my portfolio). The sorting dropdown is on the left, the filters in the center, and a new smaller search bar is on the right that lets you search through the currently sorted and filtered projects/skills/posts. Also, the chips for the roles/skills interactive component on the homepage hero now automatically rotate (with a cool animated progress indicator) so you can see all my roles and skills without needing to click on the chips! If you just hover over the container, the rotating (and the indicator) pauses until your cursor leaves, ensuring good UX and proper timing. Also added new animations and interactive effects throughout the entire site to make everything smoother and more aesthetically pleasing.

I got a pretty disappointingly low multiplier from my first ship, and a lot of people were saying the site wasn’t responsive at all. I was kinda rushing to ship for the first time since I’m submitting this project for the lockin sidequest, so I just rushed to at least make every page work and function properly without worrying about other stuff like responsive design and accessibility. Now that the week has reset and I got 7 days to work on my site properly, I decided to perfect the site’s responsiveness so it looks aesthetically pleasing and works well on any device/screen size to maximize accessibility, UX, and ease of use! Other than just adding a bunch of media queries to tailwind, playing around with flexbox, and hating css for an hour, I didn’t do anything else except for improving the readme a bit. Also fixed some visual glitches as well.

Finished making and implementing all the major tabs and pages for my personal website! Added individual blog post pages that has a sidebar listing all my blog posts where you can easily see and navigate to each of them. The page also has the blog post’s title, author, date, and the actual text content of the blog. There’s also two buttons on the bottom that lets you navigate back and forth between my blog posts to make navigation easier and more accessible. Also coded a table of contents component for the blog post page, but currently none of my posts have headings (will add soon), so the component isn’t displayed. Also directly added 5 actual blog posts instead of the previous placeholder posts from my old portfolio. Also updated some data types and logic to make sure blog posts have all the information they need and everything works well. Also fixed some deployment and visual bugs, as well as updated styling and content.

Big update!!! Added 3 different new tabs: skills, blog, and about! You can see all my skills (mainly technical and programming related) displayed in a nice grid each with its name, description, icon, and progress bar/percentage displayed so you can understand my skillset better. The blog tab displays all my blog posts (I hate writing and I barely write anything, plus right now there’s only one non-existing placeholder blog post) each with its name, date, and content preview displayed, and clicking on it will take you to the actual blog post page (doesn’t work yet). You can also search my blog posts by name, although I probably won’t have more than 5 in the future. On the about tab, you can see my current status (what I’m developing/watching/reading) with their related links, images, and other stuff displayed on the left, and a few paragraphs/sections of text about me and my contact information on the right. I mostly just copied a ton of stuff from the old version so I spent most of my time making the actual site, components, routing, and styling and not writing the text. Also added a fun 404 not found page where you can go back or go home, and it’s also mostly copied from my old site. Added SEO and metadata to each page and updated some styling and content of the site as well.

Added featured projects that are more large-scale and technical/complex to the projects tab, which displays detailed information about these projects including a demo screenshot/thumbnail so you can understand what the project does, dates, name, demo and repo links, tech stack icons, detailed description, and tags that organize the different projects. You can also search for these projects using the search bar. Also added a ton of projects to the misc page that were originally in the projects tab of the old version of my personal website. I had to rewrite a lot of data structures, fields, and manually change a ton of values (no AI) to make sure the types are compatible and modular, and the process was pretty time consuming and tedious, but the result was worth it. The misc projects are now also sorted by date nicely with their relevant information displayed as well. Also improved some content and styling to make the entire site look better.

Added a placeholder page for the project tab with a hero that has a title and description about the page, as well as a link that takes you to the misc page. I’m planning to put only a few of my large scale serious apps to be displayed on the projects tab, while dumping all my other smaller coding and non-coding school/personal projects in the misc tab to keep everything organized and accessible. Added a hero with description, search bar that searches misc projects, and cards that display a misc project’s name, skills, tags, and date for the misc page. The cards are supposed to be links but since I only migrated the project data and changed some stuff into React icons without migrating the actual projects, the misc project cards/links don’t work yet. Added some styling, custom data types, and additional content so the misc page is functional and looks nice and consistent with the rest of the site.

Added a pretty nice looking Lanyard Discord widget to the hero section so now you can spy and stalk my Discord status and profile! It shows my profile picture, display name, server tag (Frieren is so peak), username, pronouns, and my online status with a proper icon/indicator displayed. The widget also shows my current activities, and if I don’t have any, my custom status will be displayed. The current activities support different apps like VS Code, desktop games, and Crunchyroll with relevant details displayed so my entire life is exposed to the internet, how fun :) It can also display multiple activities at once. Spent some time configuring Lanyard and getting to know the Discord CDN API but the result was super worth it, it actually looks like a real Discord widget. Also updated some styling, icons, recategorized some roles, and added a footer with all my social accounts and links displayed.

This will probably be my last project on Flavortown, as it would probably take me a bit to completely rewrite my entire personal website/portfolio from scratch (again, for the fourth time)! I am overengineering this simple website yet again by turning it into a fullstack platform with an account system, functioning backend, and other stuff that a portfolio doesn’t need to have. Of course I’m also doing this in my favorite stack: Next.js, React, TypeScript, Tailwind, Prisma, and Postgres. I’m determined to make this the last rewrite, so I spent a ton of time coding and designing the smallest details to make sure everything will still look good in a few years. The main reason I wanted this rewrite was probably because Next.js is just so much better than React Router for multi-page websites and SEO, and I got tired of manually changing/updating the code to update my skills/projects/status, so I’ll be able to do these directly on the website by logging into it. For this update, I just set up the project, added the dependencies, added a simple nav bar with links and a search bar, and a hero section with a randomly generated fun greeting, title, description, logo, and an interactive section of my roles and skills with some super cool animation transitions so people can get to know me better. I’m really proud of this sleek modern design, I hope the finished site will look as good as it is so far, super excited to keep working on this :)

Last devlog: finally finished developing Subtrack, the online all-in-one subscription, account, and project management platform! In this update, I finally implemented the upcoming renewals widget for subscriptions to the homepage dashboard, so you can easily see and prepare for your upcoming renewal dates, see their prices, and the services without forgetting or missing anything! Also added project insights widget to the homepage dashboard that shows the total amount of active projects you currently have, displayed conveniently on the dashboard. Also updated README to make sure everything is up to date and added a demo screenshot of the app’s homepage dashboard working.

Added project management and additional info fields to each project so you can manage and keep track of all your projects more effectively with detailed information for each project! On the add project page, you can fill in the name, description, demo/production link, people, start/end dates, and GitHub repo link (some are optional) to help you find, sort, and manage your projects better! You can sort by each category and edit a project’s information with the same modal too. When you click on a project, it takes you directly to the demo/production link, and if you click on the repo field it takes you to the github repo, making it even more convenient, especially for coding related projects.

I’m finally back to developing Subtrack after taking a super long 3 month break from it! I’ve been pretty busy with a ton of other projects, school, and other stuff and I kind of just forgot about this project. Now that Flavortown’s ending in a month, I feel like now’s a good time to start wrapping all my projects up and reshipping them again to get as many cookies as possible :). Took some time for me to get familiar with the app, UI, project architecture and code again since this is my first Next.js/TypeScript/Tailwind project and I was pretty bad at all 3 back then, so it was pretty interesting seeing my terrible code from before (I’m not refactoring anything bro) and seeing how much I’ve grown in just 3 months because of Flavortown. I basically just copied the entire Accounts tab to projects, and changed some data types, models, UI, and other stuff to make everything compatible with projects. You can now create projects from a modal with a name and description, view them, save them (both guest mode and database work properly), and edit them. I’ll implement a few more fields and stats to projects, and I’ll finally be done with Subtrack!

Added an image gallery carousel of Yosemite scenery and wildlife to the about section with 10 highly detailed quality photos! It also has a pretty cool animation transition for when you’re browsing the different photos and it feels super nice, like an actual image gallery carousel. Added two colorful widgets about Yosemite Falls and the Grizzly Giant sequoia tree as well. Also added responsive design for the entire page and a warning that only pops up on tiny screens saying bigger screen is recommended, because I’m too lazy to perfect and optimize all the animations, components, and effects. Added a more descriptive and informative README, as well as updated styling and page content. Updated favicon and page metadata and fixed some deployment issues too.

Added an absolutely beautiful (but not performant or realistic if you consider the physics and math behind it, but who cares, it looks nice) waterfall animation using pure vanilla CSS and JavaScript for the hero background! It comes out slowly at first from the top left corner, and gradually accelerates and changes course to simulate the real Yosemite Falls on one of the peaks. I spent a ton of time tweaking different values and formulas to make everything look smooth and as realistic as possible while still keeping the individual water drops for a cool aesthetic. Encountered a weird Tailwind bug after pushing to production so spent some time fixing that as well. This wasted a ton of time but the result was definitely worth it, and the waterfall also fades nicely into the rest of the page. Also added two paragraphs describing Yosemite and its wildlife, as well as a half-finished photo gallery/carousel thing with framer motion. The page actually looks pretty cool right now, and I think I’ll be done with this project after finishing the rest of the widgets.

Added edit and delete so you can now manage your blog posts better with these super basic CRUD operations! The edit/delete buttons only show up on blog posts you created and take you to a different route if you’re editing the post. Had to reconfigure some forms and models to make this work smoothly, but everything was pretty simple because it’s Django and Python. Also improved layout and routing for profile management and navigating the app. Added Google OAuth so people can now actually easily sign in to use the app and create posts! Also reconfigured some git and github repo stuff and updated styling.

Added profiles, foreign keys, new blog post fields, and other account related stuff to the app! Since SQLite is a relational database, I just had to set up a profile model and get the foreign key to match to easily display all the blog posts a user created and who created which blog post. You can also click on the top right button once you’re logged in to see your profile, where you can see all your blog posts, log out, or delete your account entirely. Also added some styling but because this is just a learning/practice project I didn’t spent too much time on the layout or styling so it might be a bit buns. But other than that my blog app is now basically finished, you can create accounts and blog posts, view them, and do different things with the account. CRUD stuff for blog posts coming soon!

Sorry guys I was busy again this past week with school and other stuff but it’s finally spring break and I got 10 whole days to grind Flavortown! I’m starting this small, very simple blogging app as a learning project for the Python fullstack web framework Django, as well as the basic database SQLite and the Python ecosystem. As someone who’s used JS/TS and its ecosystem for more than 3 years, I genuinely don’t really like Django or the Python ecosystem, but I’m still building this to improve and expand my tech skill stack and experience. I spent a ton of time configuring the environment, getting familiar with Python and Django’s (weird) folder structure and conventions, learning the essential commands and concepts, and implementing different views, routes, and templates to make the app functional. Integrated forms and models to directly save blog posts to the SQLite database thanks to Django’s convenient architecture. Also added styling with Tailwind cdn and the basic page layout for the app.

Added two actual statistics widgets that link to NPS pages to the landing page so now they’re not just placeholders! The first one is the park’s annual visitors and the second is its wilderness land area. Spent a ton of time making my custom odometer simulation/animation engine (because I was too “lazy” to leverage framer motion’s hooks and other stuff that literally would have saved hours) that animates both the widgets’ digits going up at slightly different speeds that makes it look super satisfying and cool when the widget enters the viewport. Also had to do some prop drilling and annoying math to make the changing gradient work with all the digits (and their shadows) smoothly as well. Added a second type of hovering effect for the bottom 2 widgets (coming soon, they will be animated differently) that matches the overall gradient theme. Also updated some styling, effects, and scrolling animation issues. Encountered a pretty weird bug with the intervals because of strict mode and cleanup functions but fixed it with proper math.

Added widgets (with placeholder text for now) under the beautiful scenery section that will display icons, stats, and other info about the national park. Spent some time tweaking the cool random color gradient spinning hover effect/animation of the widgets to make sure Tailwind and everything work properly. The entire section pops out when scrolled into view Also added a paragraph that slides in from the side when in view. Also added a small simple footer at the bottom and updated the fonts used on the page to make everything more aesthetically pleasing and just look nicer. Updated some styling and layout stuff as well to make everything work together better. The amazing animation library Framer Motion was a huge help here with scrolling, hovering, and page load animations as well.

I’m taking a short break to work on this simple webpage about Yosemite National Park meant to be a challenge for CSS animations, effects, and interactivity! In this update, I spent some time setting up the project with React, TypeScript, Tailwind, Vite, and other libraries/dependencies needed. Added the classic text/symbol matrix glitch effect on the page hero title that glitches between characters until it slowly becomes legible. The algorithm was fun to implement and it looks pretty cool too. Added the Yosemite cliffs as the middle ground with a background that transitions between a gradient for moonlight and a gradient for sunrise. You can toggle day/night by clicking on the toggle button, and the sun/moon icon gets animated smoothly and realistically as well. Setting and animating the gradients was kind of annoying since browsers don’t support direct transitions so I had to use some workaround methods, but everything still turned out alright. Because this is a challenge for myself, I did not use AI at all whatsoever and all the ideas and code are completely original, and the result turned out pretty good, actually better than I expected since I thought implementing more complex animations than just CSS transition was going to be harder.

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.

Finally spent some time to make a half decent simple logo for Herded that’s basically just a green letter H on a simple sheep graphic (totally not stolen off from stock image site btw trust). The logo shows up as the favicon of the tab and on the nav bar and the footer of the site. Added both static and dynamically generated SEO and OG metadata information for every page of the entire site so it hopefully actually shows up on Google and looks good when sharing quiz links on social platforms. To make quizzes easier to share with other people, I added a share button on the results page of the quiz page that copies the link and opens a popup modal. Spent some time rewriting a ton of Tailwind utility classes to finally incorporate responsive design/styling to ensure every page on the entire site works and looks aesthetically pleasing on all screen sizes to make it more accessible and usable to everyone. Updated some styling and layout while adding responsive design as well.

Added the quizzes and about pages so you can browse public quizzes more easily and learn more about the website! You can search all the public quizzes by their names and descriptions using the search bar with a clear search button, and browse and access the top 4 most played/popular quizzes, the 4 most recently created quizzes, and all the public quizzes other users created in 3 different sections on the page. The about page shows more information including the pages, features, and directions of using Herded, as well as why I made it and other stuff. Added the most popular and most recent quizzes sections to the homepage as well, with a button that links to the quizzes page. Added a rounded footer to every page with very basic links and copyright too. Added GitHub OAuth so now you can create a Herded account with either Google or GitHub and both will work perfectly fine with the app! Also fixed the issue of quizzes not refreshing on the create page, optimized some backend code, and updated the overall styling and content of the app.

Added quizzes that display on your profile so you can easily see, test, and manage all your quizzes! If you go to your profile, you will see a “Your quizzes” section that has all your quizzes presented as cards each with its name, description, total plays, creation date, and creator information listed. If you’re the creator of the quiz, you can see a delete button that lets you delete a quiz permanently after confirmation. The left sidebar now no longer lets you update your bio/about (since your profile isn’t intended to be public), and only has your profile icon, name, a short description, join date, sign out button, and a new delete account button. Once you click on the delete account button, your account (but not the quizzes you’ve created) will be permanently deleted after confirmation as well, and you’ll get signed out and get redirected to the sign in page. Also added a total plays counter that keeps track of how many times the quiz has been played (whenever someone clicks on the start button) in total. Updated some styling, code, and the navigation bar as well.

Added comments that appear at the end of a quiz where you can create comments using a custom nickname (even if you’re logged out) and view other people’s comments on the quiz! On the results page of a quiz, you will see a comment section box with two input fields, one for your display name and one for the comment. After you’ve filled out both, you will be able to post the comment. Comments are sorted chronologically, with newest comments appearing near the top, and you can see each commenter’s display name, their trait (white, gray, or black), the trait’s description that appears when hovered over, and the date they posted the comment. Also updated some styling and improved the code’s performance by breaking things into smaller components and using cache and stuff. Added new types and updated models and backend server actions as well to incorporate these comments.

Added the quiz page so you can finally take custom would you rather quizzes you or other people made, see how many people voted for each option, and find out about your trait and herdedness at the end! Once you create a quiz successfully, you’ll be redirected to the public quiz link where anyone who visits it can take the quiz! After you select an option for a question, you can’t change it (watch out conformists >:) ), and the numbers and percentages for how many people voted for each (including you) will appear as well as a visual indicator to help visualize the data. You can easily navigate between different pages of the quiz, and once you finish it a results page will display with your trait (black sheep being unique, gray sheep, or white sheep being an NPC), herdedness (how many questions you sided with the majority), and a fun little description for the trait. Two buttons will also appear at the end where you can either go home or go back and view the questions. Spent a ton of time updating the quiz types and models to make sure votes work but it was worth it at the end, and updated styling as well.

I kinda forgot to make a devlog for my last commit because I pushed it at 3AM and was too tired to do anything else, so this devlog is going to cover quite a bit for these 2 commits. I added a create button on the nav bar that shows up if you’re logged in, and clicking on it redirects to the quiz creation page. This is a paginated screen with 3 different pages/steps and back/next navigation buttons for creating a custom would you rather quiz. You can enter the name and description of the quiz on the first page, add multiple questions with a question sentence and two options and delete questions on the second page, and give the quiz a custom ID, copy its URL, and set its visibility to public or unlisted on the third page. Once you click submit (that only shows up when every field is filled in), all the data for the quiz gets synced to the backend MongoDB database, and if everything works properly you’ll get redirected to the homepage (haven’t implemented actual quiz UI), but if the ID is already taken or something else happens, an error message displays on the third page. Also added actual user data to the database that gets created/updated whenever you sign in. Whenever you create a quiz, your user data is also updated with the quizzes’s IDs you’ve created recorded to keep track of all the quizzes you made. For this devlog, I updated the backend stuff (server actions, models, auth, types) a lot to make sure everything’s optimized and syncs to the database correctly. I also updated styling and some environment variables as well.

Added the UI for the sign in page with an icon, header, description, and two buttons for Google and GitHub OAuth sign in options with their icons. Once you log in with a Google account, your profile image along with your name will appear on the right of the navigation bar, and clicking on it redirects you to the profile page where you will be able to see and edit more information about you and view/create your quizzes. For now you can only see your profile picture, name, date joined, some placeholder layout blocks, and a sign out button that signs you out on the profile page. Added a 404 not found page with links for you to either go back home or submit a GitHub issue. Updated styling as well to better incorporate the overall design across all pages.

Started developing Herded, a fullstack platform for users to create their own would you rather quizzes and share it with other people to take it together! Since this is a pretty fun idea/website, I decided to try using neo brutalism as the design style for the first time and I’m really liking the engaging style and it’s easy to design in Tailwind as well. Added a hero section, call to action buttons, and some bento cards showcasing the website’s features along with relevant icons. Added a navigation bar with a signin button that redirects to the signin page as well. Added some very basic backend, MongoDB database, NextAuth auth, and Google OAuth so you can now go to the signin page and log in with a Google account and get redirected to the profile page. Since this is a pretty common pattern I just copied a lot of boilerplate from my other projects over, so it was pretty easy to implement auth. Added the README, the dependencies the app will be using, and interactive smooth animation to improve the UX. Added environment variables for auth too.

Added a progress bar with smooth animation that shows the reader’s current progress on the text to give you a rough idea of how much of the text you’ve finished. Added estimated time remaining for the reading session below the word count (not 100% accurate since it doesn’t account for longer pauses on commas and periods) that displays the time in minutes and seconds. Added responsive styling for the entire app to ensure the app is easily accessible and usable on all screen sizes for everyone to use! Finally added a logo that only serves as the tab favicon because I couldn’t figure out (or just too lazy) how to put the logo without ruining the design. Added SEO (but still absolutely not a single soul will use this app) as well.

Added themes dropdown functionality to the settings modal so you can select different color/UI themes to read more comfortably and customize the site even more! Currently there are 5 different themes for you to select: midnight (default dark neutral), ocean (dark blue), rust (dark orange/red), forest (dark green), and daylight (light neutral)! I spent a lot of time rewriting a ton of Tailwind utility color classes of different CSS/Tailwind variables to make sure all the different colors from the different themes work well and fit together across the entire app. Also spent some time converting annoying color values from hex to oklch and hsl because Tailwind is annoying to make sure the color palette is consistent everywhere. Whenever you choose a different theme, the site colors update instantly with a smooth transition animation so your eyes don’t burn out. The settings are automatically saved as well. Also updated styling and base colors to fit the themes better.

Finally added the import feature so when you click on the import text button, you can upload either a .txt, .doc, or .docx file to Speadr and it’ll parse the raw text and import it into the text area so you can start speed reading it instantly. .txt files are easy to parse since they’re simple but Word documents are more complicated because it’s wrapped in XML and stuff so I had to import the Mammoth.js library to extract raw text from Word files. Added an esc key shortcut to exit out of reading mode and go back to the text input page. Pressing esc with zen mode enabled will exit out of zen mode, and if you press it again it will stop and exit out of the reader. Also updated a bit of styling to make sure long words are properly contained and centered when the focal point option is enabled. Speadr is now pretty close to complete, I just need to implement different themes, and I’m really excited to ship this and share it with all of you!

Added a GitHub button that takes you to the Speadr GitHub repo and an about Speadr button that makes the reader display or demo information about how Speadr works and its features. Added a restart button that restarts the reader to the beginning of the text as well as its keyboard shortcut, the r key. Added an option in the settings modal to reset all the settings back to default and added credits to the modal as well. Added a live word count display that shows the reader’s current progress on the text. Added a bunch of tool tips to improve UX and fixed some annoying keyboard shortcuts and browser defaults bugs. Updated styling and the UI layout as well.

Updated the UI so the app is a bit wider and makes it easier to read and click on the different buttons. Added an import text button that currently doesn’t do anything and a settings button that opens a settings modal with options for reader speed (WPM), font size (3 options: small, default/medium, and large), theme (currently doesn’t work), and toggle focal point, as well as their icons and smooth animation for opening/closing the modal. You can close the modal by clicking outside of the modal for easy UX. If the focal point option is unchecked, the reader won’t highlight a letter red for focus or provide center guiding lines to help your eyes focus. All the settings and customizations are automatically persisted in local storage, so you don’t need to worry about your settings not saving!

Added controls to the speed reader so you can read however you want! You can start, pause, resume, exit, go back/skip forward 10 words, change WPM speed, and activate zen mode all while the speed reader is active to make navigation super easy and customizable. I also added a ton of keyboard shortcuts (ctrl + enter for quick start, space for resume/pause/exit, and left/right for back/forward) as well as tool tips for them to make everything even faster and easier to use. Added zen mode to help you focus while reading by hiding everything except for the text when the reader is active. Keyboard shortcuts still work in zen mode, and the UI comes back after the reader finishes. Updated the reader so it pauses longer when there’s a period or comma to simulate natural speech and made it more optimized, more performant, and doesn’t glitch when WPM is set to fast. Updated styling and improved overall performance of the app as well.

Started developing Speadr, the all-in-one web app with tools like speed reader and zen mode to help with your reading! For this devlog, I set up the basic React Vite app since this is a frontend only single page application, and set up some boilerplate for Tailwind, TypeScript, and GitHub Pages deployment as well. Made the basic layout for the app with a heading, description, zen mode and speed reader speed in WPM options, textarea for the text you’re reading, and a start button that starts the reader. When the speed reader starts, a word will briefly appear in the center with a highlighted red letter aligned to keep your focus on it. The app will flash the words quickly for the entire piece of text and this helps with reading speed a lot since you don’t have to manually move your eyes and scan each sentence. I’m super excited about this project, and I have a ton of really cool features planned that I can’t wait to implement!

Added responsive styling so the platform looks and functions well on all screen sizes, making the site more accessible for everyone to use. Updated styling for some components as well so everything looks consistent and nice. Reorganized some files and code to make the code easier to manage and maintain, and added a few missing MacVG posts to the JSON data. This will probably be the last devlog before I ship again as I’ve finished everything I planned for the MacWeb landing page and completed all the todos.

Added static and dynamically generated SEO for all pages on the root domain and updated routing stuff to handle edge cases and redirects while improving routing efficiency. Also added a not found 404 page that shows whenever the user enters an invalid route. Improved some code and added some comments for future todos as well.

Added posts tab with all the posts, post JSON data, and navigation for posts that aren’t updates or tips. Added the updates tab that displays the 20 most recent update posts and added the roadmap tab that shows MacWeb’s plans/roadmap from summer 2025 to summer 2026. Added different post categories so when you go to each app’s updates and tips route it’s an individual page. Updated routing to handle edge cases, SEO, styling, components, and homepage content. Also added a section on the homepage that shows the 5 most recent posts for convenient access. Added table of contents for each article and a sorted/grouped sidebar for easy navigation as well. Fixed some styling and display issues too.

Major update!!! Originally I wanted to make another separate app/project called MacBlog that would be the information hub for the entire MacWeb platform like update logs, blog posts, and tips/documentations as this was what I did with the original platform built with React Router. Later I realized putting all these directly here on the root domain would make more sense since it already has all the different apps, and would make it less confusing for new users to navigate around. I added the basic structure for the article/blog post system, including routing, pages, params, JSON post data, styling, sidebar, other UI components, and SEO. Now you can easily navigate between different posts for each app. Also updated content, some auth stuff, components, and styling. (hopefully this would make Google Adsense realize my platform isn’t some random low-value site and approve it so i can get those $$$)

Added interactive quizzes for every unit in the HTML and CSS courses on MacLearn! You can easily access these quizzes from either the sidebar, article navigation buttons, or the course homepage. You can go back/forward between each question and select the correct option. Once you finish the quiz, a result page will display your accuracy, whether you passed/failed, and the correct answers for each question. Most of the logic is the same as the old version’s, so all I did was copy the quizzes’ JSON data and the actual quiz over and modified some Tailwind and TypeScript stuff and improved core logic and state management but overall it was pretty easy and straightforward. The navigation and pagination were actually surprisingly difficult and took me some time to figure out because of all the different types, params, and stuff but I ended up finishing everything! Also added some icons and updated styling to improve UI and UX.

Finally integrated the MacWeb account/auth system to MacLearn as well as a working backend and database system. There’s now a sign in button on the nav bar that redirects you to the main MacWeb landing page, where you actually log in/sign up, and redirects you back to MacLearn logged in. This is basically an identical system with the one I built with MacVG a few weeks ago, so I only had to copy most of the files and edit a bit of stuff to make sure the cross-domain auth cookies and other annoying auth stuff actually work properly and sync to the database too. You can click on your profile picture in MacLearn to view your profile, switch light/dark mode, and log out. Logged in users can also favorite/unfavorite articles that are pinned on the homepage. Updated styling and dependencies as well. Added environment variables for auth stuff too.

Added a powerful and fast nav bar search for all articles across the HTML, CSS, and references courses that displays a list of links to the results that makes navigation across the whole platform and so many different pages a lot easier. Changed article routing params to slugs (words) instead of number ids so the URL is more readable and it boosts SEO as well. Added a share modal that pops up whenever you click on the article share button that shows a link copied message so you can easily share the article link with other people. Updated footer with new and fixed links and updated a bit of styling as well.

Added embedded interactive labs with different tabs for HTML, CSS, JS, and output to articles so you can easily try out the code, experiment with it yourself, and immediately see the output to make learning more effective. Also added code snippets so code pops out more. Added the code playground which is basically just a glorified bigger version of the interactive lab mentioned earlier. Added a bunch of images for the courses so images now work and help with understanding better. The core logic for a lot of these components was basically copied from the old build, and all I had to do was write responsive Tailwind utilities and ensure everything works properly with TypeScript and Next since everything’s frontend React code.

Added a sidebar with all the article links in the selected course listed, grouped by different units for super easy navigation from the article. Also added proper styling for the basic article page layout from the old React Router app so the article is actually readable and usable. Added title, favorite/share/feedback icons (currently only feedback works), and other article metadata to the header as well. There will be interactive labs but they’re replaced by the lab placeholder for now. Also added back and next navigation buttons to jumps to the previous/next article easily after you finish reading the current one. Updated other styling and fixed Inter font not working.

Reorganized some files and folders so instead of hard coded folders for each course the main course tabs now generate content, fetch data, and generate SEO dynamically using router params. Added JSON data for all the courses, metadata, and articles so these pages actually have something to pull from. Added dynamic article pages that pull article content/SEO from the same JSON data, as well as animated accordions that group course articles by unit to make navigation a lot easier. Because these are mostly all server components, the app is extremely fast even with that much data. Added new types, updated styling, and fixed deployment as well.

I genuinely locked in so hard for this project I entered flowstate, finished the basic structure of the app with the homepage, main tabs, nav bar, footer, SEO, dependencies, light/dark mode, UI components, DNS, deployment, and other boilerplate setup all added and working. Because the structure of this app is pretty similar to MacVG, which I spent a lot of time working on a few weeks ago, so I just copied a lot of stuff/boilerplate over and modified accordingly for MacLearn. This is a rewrite as well, so I also copied some stuff from the original old MacLearn written in React Router, making this process a lot faster.

Finally added data import and export options to the settings modal where you can import and export your entire log data as JSON files for backup or other purposes. You can enable and save data to guest mode automatically by importing existing data while being logged out, and it works with logged in accounts too (although it’ll overwrite existing data). Added smooth transition animation to modals so they actually pop up instead of just appearing. Added some quality of life features, updated styling, updated README, and fixed some minor issues as well.

Added responsive styling across the main app page, modals, and different UI components to ensure the app works and looks aesthetically pleasing on all devices and screens! Also updated styling so everything and the design look consistent. Added a landing page with a title and description, as well as better SEO for the app. Improved code and fixed some styling issues as well.

Added a settings modal that pops up when you click on the settings button on the nav bar. There are 4 different options (and credit), but currently you can only log out and delete your Relog account (they work for both logged in and guest mode users). Updated styling a bit and fixed a bug where activities got deleted due to a filtering issue.

Added backend data storing, fetching, and syncing so the logs you add/edit/delete from Relog actually reflect on your account and you can access the same logs with the same account anywhere. Added frontend user auth session to show the actual app UI to logged in users and to check for identity. Added loading states so UX makes more sense and improved/optimized some code.

Finally added a backend and set up Next Auth, OAuth providers, MongoDB database, and some other env variables. Since this is a very simple account system with only logging in and logging out, I copied a ton of boilerplate code for auth and some components from one of my other projects, and it was relatively easy compared to when I first manually set up everything. Spent some time configuring OAuth providers to make sure they work, added a sign in modal that pops up when you click the sign in button with Google, GitHub, and guest mode options. Also reorganized some files and updated styling so the UI actually makes sense and looks good.

Added starring and deleting activities so it’s easier to manage them. Added a filter option to filter the log by starred activities that works with search queries too to make it easier to browse all your activities. Also added an edit button that makes an edit activity modal pop up where you can edit the title, date, and description of the activity. Improved code and fixed some bugs as well.

Added actual working logic for logging new activities to both existing and new dates with a custom title, date, and description that currently only gets saved persistently to local storage since only guest mode is available. Had to use a hack to convert UTC time to local time zone, meaning time conversion might be a bit broken. Also added quality of life features like better keyboard navigation, clear search, and better sorting. Also optimized code and search to make the app faster.

Added guest mode session storage, basic logging logic for adding activities with a title, date, and description (broken because using placeholder data for now), log day/activity components, activity icons, add log button, add activity modal, search that filters only activities with a title containing search (super useful but laggy), basic sorting/filtering layout (they don’t work yet), and structural data types. Also updated some styling to fit the activity log layout. Fixed some visual bugs as well.

First devlog of Relog! Set up the basic Next.js project setup files, installed the necessary dependencies, and set up the folders and files. Added the nav bar with a horribly designed logo (will redesign soon hopefully), nav buttons and icons for GitHub source code, light/dark mode toggle, settings, and signing in (only GitHub and mode toggle work). Also added a 404 not found page and made the README with a custom template. Added signing in and guest mode options on the homepage as well.

Updated some auth stuff to read the cross domain cookies properly. Bought a new official domain for MacWeb at macweb.app, configured a bunch of A and CNAME records and changed a lot of Vercel config and routing to get the domain, subdomains, environment variables, auth, OAuth clients, and everything else all working properly. The official domain is so good it’s starting to feel like an official platform, lowkey super proud of it.

There was this really annoying issue where the root domain’s NextAuth’s getServerSession function kept returning null even when the cross domain sharing auth JWT cookies were perfectly fine and the subdomains were working too. I couldn’t figure out what was wrong about it, tried updating all the environment variables manually, renaming all the cookies, and redeploying multiple times. This wasted a ton of time and was super frustrating but I finally fixed it by passing in auth options to the function and now the cross domain system actually works properly.

Finally finished the MacVG rewrite in Next.js, TypeScript, and Tailwind! Basically migrated/rewrote all the features and content from the original React Router build to the new version except for the ads and analytics. In this update, I added lazy loading of 50 games at a time on the homepage games so the site runs smoothly on potatoes too. Finished making the cloaker so both tab title and favicon update smoothly and persist. Updated the commenting system based on the new account system, and fixed nav bar logged in user icon not displaying issue. Also updated styling and improved the code.

Major update: finally integrated the MacWeb account system to MacVG with proper auth, backend data syncing, and other stuff all implemented so you can actually sign in to MacVG with a MacWeb account! When you are redirected from MacVG to MacWeb to signin using a MacWeb account, the signin modal automatically pops up where you can choose multiple methods to login, and after successfully logging in you will be automatically redirected back to the original subdomain that you came from, properly logged in with all your MacWeb account data synced over! I had to change my laptop’s hosts files and run a certain command to kind of trick the computer into thinking I have multiple subdomains to actually set up the local development server to simulate the actual future production domains. I also spent some time figuring out how this account redirect thing was gonna work and how to share the JWT cookie across subdomains using NextAuth. It was pretty frustrating but when it finally worked after like 2 hours it felt so satisfying. Also updated environment variables for local testing and changed OAuth redirect backlinks and NextAuth options to make sure everything works.

Major update: finally integrated the MacWeb account system to MacVG with proper auth, backend data syncing, and other stuff all implemented so you can actually sign in to MacVG with a MacWeb account! There’s a new sign in button that redirects you to the MacWeb root page (since I’m hosting MacVG on a subdomain) where you can choose multiple methods to login, and after successfully logging in you will be automatically redirected back to the MacVG subdomain properly logged in with all your MacWeb account data synced over! You can only view your account avatar, profile, switch dark/light modes, and log out for now but hopefully more backend features will be added soon. I had to change my laptop’s hosts files and run a certain command to actually set up the local development server to have subdomains working locally. I also spent some time figuring out how this account redirect thing was gonna work and how to share the JWT cookie across subdomains using NextAuth. It was pretty frustrating but when it finally worked after like 2 hours it felt so satisfying. Also added a tab cloaker that changes/disguises tab title across all MacVG pages that’s stored locally and uses custom events and an about:blank embedder for opening websites in about:blank to avoid history getting tracked. Also made some styling and dependency improvements.

Added a search bar to the navigation bar that displays game card results for super convenient and fast game searching with a clear search button and simple UI/UX. Added the recent tab so you can quickly access recently played games (sorted by last played) that are stored locally in local storage with an option to clear your recent games. Added 5 custom color themes for the site that updates the entire color scheme for the platform, including primary colors, backgrounds, text, and the logo! This took a while to figure out and had to reconfigure some Tailwind stuff and manually add hex hue rotation filters for the logo but super worth it and the themes all look really nice!

Finally added a backend database connection to MacVG! Added a MongoDB connection URI to connect to the MacVG cluster of the MacWeb database to store user data, comments, settings, ratings, and more in the future! Wrote a script to prepopulate the database with all 450 games and empty comments so users can view/add new comments. You can add a username along with your comment to post a comment to a game (and the page revalidates automatically). Hopefully I’ll add likes and threading in the future. Also added local favorites (I’m too lazy to implement the MacWeb account system right now) so you can locally store your favorite games and access them quickly on the homepage.

Added the game page that contains an iframe displaying the game, a tool bar with the game’s icon and name and favorite, share, download, report, full screen features, and an about game section containing information related to the game and game description. I copied a lot of layout and logic from the original website so finished this part quickly. Added dynamic SEO for the game page and different MacVG tabs as well so each page has a different title/description. Added a modal component and a button that randomly suggests a game on the homepage. Added a 404 not found page with redirect options and updated styling as well.

Just like with the MacWeb landing page, I’m rewriting MacVG from scratch to be a full stack platform in Next.js, TypeScript, Tailwind, and MongoDB. I copied a lot of components and logic over from the original React code base so I got the basic UI layout set up pretty quickly, all I had to do was translate the CSS into Tailwind. Also set up the basic navigation of the page system and light/dark mode toggle with next-themes, as well as the new and trending tabs and basic SEO. I already have all the games hosted on a different GitHub repository so I just copied the games’ JSON data over to add all the games. Also added some icons and responsive styling so it’s consistent with the main landing page too.

Added responsive design to the landing page so the site works and looks good on any device and screen size! Had to update a lot of Tailwind classes in almost every single component but it was worth it and the site functions very well on mobile devices as well. Also updated some styling to fit with the responsive design better. Added an option to update user account display name as well so you can customize your MacWeb profile better.

Added a public profile page of your profile that’s available for everyone to see even when they’re not logged in. This page displays all your saved information including profile picture, display name, about, achievements, and more. Also added an option that permanently deletes your MacWeb account upon verification and an option to copy and share your public profile URL. Added Next Themes for seamless light/dark mode toggle and added/edited Tailwind config as well so both modes work well everywhere (had to redo a lot of color styling for the components). Fixed some deployment and styling issues as well.

Added the profile page that shows up whenever you click on your user icon. The profile page has a sidebar on the left that displays your profile icon fetched from your OAuth provider, display name, username, email, account creation date, user ID, and provider along with their associated icons to make the UI more intuitive to understand. There are four main sections: about, achievements, favorite games, and favorite articles. Currently only the about section works, and you can edit/save your account’s about/bio. Updated styling and UI layout as well.

Added a bunch more OAuth options from Discord, Facebook, and GitHub and spent/wasted a lot of time researching and configuring out their OAuth application options. Finally got everything to work properly thanks to NextAuth and updated it so every time you log in with an OAuth service, a custom MacWeb account is created on the backend/database and it syncs whenver you log in again with the same service or email. This make it a lot more convenient to sign in with different services and actually store your user data. Also fixed some deployment, display, and styling bugs as well.

I’ve been working on this pretty massive project called MacWeb for about 2 years now and I’ve rewrote it several times with different technologies. After I learned Next.js and backend development a few months ago, I decided to rewrite MacWeb one more time in Next, TypeScript, Tailwind, and make it full stack. This is the landing home page that introduces all its subapps and provides more information about them. I set up the database, Vercel deployment, Google Cloud Console, NextAuth, and several other technologies (it was a pain having to learn all of them and debug through stuff) and finally got a proper account system working with credentials or with Google OAuth, with JWT tokens for session verification provided by NextAuth.

Added account analytics to the dashboard with numbers like total acounts, unique passwords, unique usernames, average password length, password uniqueness, and username uniqueness to help you keep track and manage your accounts better straight from the homepage. Also added four quick action options at the top of the dashbaord for adding a new subscription/account/project and logging out with customized icons. Also updated the layout with some placeholder text and fixed some display bugs as well. Now the dashboard is honestly beautiful I mean just look at the image.

Finally started working on the dashboard where insights, analytics, suggestions, and more about your subscriptions/accounts/projects on Subtrack will be. Added the subscription stats section from the subscription page with an interactive custom insight that compares how many of a certain item you could’ve bought from the money you spent on monthly and annual subscriptions. You can click on the item to change to the next one to put the amount into perspective and hopefully make you cancel some of your extra subscriptions. Also spent some time adding a useful analytics pie chart from Chart.js that displays the proportion of each category of subscriptions you’re paying for, sorted by the number of subscriptions per category with different colors.

Pretty much finished the accounts page! Fixed the Vercel deployment issue (I forgot to add the secret encryption key to the environment) and also fixed the security loophole by requiring account get requests to provide a time stamp that must sync with the database time stamp (I’m still too lazy and noob to add a proper JWT auth token for this) so now the backend with encrypted passwords is more secure. Optimized accounts search, added accounts page and password insights, and fixed display issues as well.

Major update!!! Finally completed the major features for the subscriptions tab by adding most of the popular subscription bundles, pricing plans, and more options. This meant I could finally move on to working on the accounts tab! Because the logic is mostly the same I just copied most of the code from the subscriptions tab over and changed/deleted some things to get the accounts tab working quickly. Added a lot of services and their assets for more accounts, as well as the custom service option so you can create your own account provider service. The accounts page supports both cloud database storage syncing and guest mode local storage, and the page displays the total number of your accounts, add account modal with detailed customization options, account search, edit, and deletion. Because Subtrack is storing very sensitive data like your passwords I had to spend a lot of time researching secure encryption/decription/cryptographic stuff to finally get everything securely encrypted and working (except there’s a major loophole where an attacker can just visit the API endpoint with a MongoDB user id and get all their decyrpted data that I’ll hopefully fix in the future by finally implementing proper JWT that I’ve been too lazy to add). Idk why but I always make dev logs near midnight and this one is way too long so yeah major update ok time to go to sleep now.
Edit: looks like Vercel prod deployment failed holy bro so much to fix tomorrow

The subscriptions tab for Subtrack is almost complete! In this update, I added different categories for the services so it’s easier to browse and filter specific categories while adding a new subscription or when viewing and filtering all your subscriptions with category tags. This makes it a lot easier to manage your subscriptions by category and sort them effectively. Also added a renewal date option so you can select when the subscription is going to renew as a reminder. The app automatically calculates the next renewal date based on subscription duration and current time with helpful renewal notifications that will hopefully get implemented in the future! Updated the data structure, cleaned up redundant code, refactored some inefficiencies, fixed some more bugs, and updated styling as well.

Added a custom service option that appears in the add subscription modal for when you’re adding a subscription from a service that doesn’t have a preset on Subtrack. You can name the custom service subscription whatever you want and completely fully customize it and edit it. This required a bit of refactoring and cleaning up of the add subscription modal so I did it and fixed some bugs related to custom plans and pricing as well. Also updated styling so more services can fit in one page. Added an account username label on the profile popup as well.

Added a lot of services (30+), subscriptions, and memberships from websites and retailers to make subscription options more complete. Also fixed some bugs related to the add subscription modal and updated styling.

I added a statistics section at the top of the subscriptions page that tells you how much you’re spending across your services per month and per year, with the total number of subscriptions. Also, I finally spent time to actually learn Markdown, and with the help of GitHub README examples, I wrote the README file with a lot of sections and information about the app, how to set it up locally, and contribution guidelines. It genuinely looks pretty professional. Also fixed some bugs and improved backend performance.

Merry Christmas guys! In this update, I added backend API endpoints for storing your subscription data to the database everytime you add, edit, or delete a subscription so your data is synced and backed up everywhere. I also added an option to change your account display name and improved some backend logic.

I finally added a proper account system with working (although not very secure) auth and backend API endpoints for logins and signups with both username/password and Google OAuth working. Now, you can use the signin and signup popup modals on the landing page to create an account and access the app. Made a MongoDB cluster that currently only stores user data but will hopefully store actual subscription and app data. Also added the first 10 services for subscriptions with all their plans and correct pricing. Added some quality of life features like a confirm popup warning, logout button, and an option to clear subscriptions. I refactored and cleaned up some code as well.

Reorganized files and folders in my project because it was kind of all over the place (my first time using Next on a big project), added a placeholder logo so things don’t look so boring, added metadata and title for each page, updated sidebar with placeholder tabs, and updated styling (hopefully major redesign will come soon because it looks kinda buns right now)

Added guest mode that stores data in local storage so you can actually use the app instead of being stuck on the landing page, logged in state stored in session storage, profile customization for username and password, subscription sorting with different options, subscription editing with a custom modal, license markdown, and code of conduct markdown for GitHub, updated styling and types, and optimized code so it’s kind of slightly performant.

Refactored code so TypeScript is happy, data is stored properly, and everything works smoothly. Also made a new UI that lists the details of each description with a new option menu to edit and delete the subscription. The site currently only supports frontend localStorage data storage but other than that everything is coming together. Also fixed some bugs and updated styling for the multipage modal for adding a new subscription.

A modal now pops up when you click on add subscription that displays available subscriptions that you can select. You can also move between different pages of the modal and customize the subscription (the modal doesn’t do anyhting yet). Also updated icons, added new subscription services, added a user nav dropdown (that doesn’t work), and updated styling.

My first actual project on Flavortown! I set up basic deployment and Next.js dependencies for the project and added basic frontend UI with icons, cards, navigation, and text for the subscriptions tab.

67 lowkenuinely so tuff 🥹✌️