Tony Hsu

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 🥹✌️