Tony Hsu

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.

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.

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.

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.

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.

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!

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 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 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.

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.

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.

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