MacWeb is a collection of web apps that focus on entertainment and productivity. This project only focuses on the landing page that I’m rewriting in Next.js with a proper account system, backend, and posts/information about Macweb and its subapps.
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 $$$)
Log in to leave a comment
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.
Log in to leave a comment
IDK why I forgot to mention this but I bought the macweb.app domain, set up a bunch of A and CNAME records and configured some Vercel config to finally get the root domain, subdomains, routing, env vars, OAuth clients, and everything else working with the new official domain.
hell yeah
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.
Log in to leave a comment
Finally finished rewriting the entire MacWeb landing page with Next.js, TypeScript, Tailwind, and MongoDB! The main focus of this project was adding a proper account and auth system that synced data to the backend and the database. Added proper credential and OAuth login with JWT session tokens and other auth stuff (super complicated to figure out) with NextAuth. Users can create a MacWeb account from many different options and fully customize their profile with a custom profile picture, display name, about information, username, and a lot more stuff coming in the future! The site also fully supports light/dark mode switching and responsive styling to ensure a smooth user experience across all screen sizes and devices. The main landing page also introduces MacWeb subapps and their related informaiton.
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment
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.
Log in to leave a comment