MacVG is the best online gaming platform with more than 500 free web games! The site has a lot of features such as searching, favoriting, filtering, sorting, and managing games. I’ve been developing this platform for around 2 years, and I’m using this project to rewrite the entire app to integrate backend and advanced features with Next.js, MongoDB, and other modern technologies.
Finally rewriting MacVG to be a full-stack online gaming platform from scratch with Next.js, TypeScript, and MongoDB! Finished implementing all the features from the original old React Router build, added all 450 games, added cross domain auth system integration with the MacWeb account system, a ton of different settings and customizations, responsive design, comments, search, and more! Bought the official macweb.app domain and configured MacVG as a subdomain at macvg.macweb.app!
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment
This reason this major update only took 2 hours is because I spent most of the time working on the MacWeb landing page (not MacVG) to make sure signin and auth work properly across all subdomains.
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!
Log in to leave a comment
And yes, the hollow theme is a jjk reference
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment