MERN vs Next.js + Supabase: Build & Compare Fullstack Apps

Set up a new Next.js blog app with the latest version, TypeScript, Tailwind, and the app router inside a src directory. Run npm run dev to view at localhost:3000.

Connect a Supabase project to a Next.js app by creating credentials, configuring environment variables, and building a Supabase config for client and server access, then prepare Tailwind CSS.

Learn to install and configure tailwind CSS in a react app created with vite, add the tailwind plugin, update config, and apply tailwind classes in react and next.js.

Learn the routing approach in a MERN stack React app by installing the React Router Dom library and creating login, register, and home routes with proper 404 handling.

Learn how Next.js file-based routing creates pages without libraries or custom code; define routes by folder names and page.tsx files, then access them at domain/login or domain/register.

Leverage the Shadcn UI component library to implement authentication UI in a MERN stack app, building register and login forms with ready-made components for faster development.

Design a register page UI for a mern stack app using react hook form and zod validation, with a centered card and fields for name, email, password, and confirm password.

Repurpose the register page UI to build the login page in the Mern stack app, keeping email and password, removing name and confirm password, and provide navigation to register.

Create a user model in the Mern stack server using a mongoose schema with name, email (unique), and password, enabling timestamps, and export the model for the upcoming registration API.

Build a MERN register API by creating a users route, hashing passwords with bcryptjs, validating unique emails, and wiring the route to the backend index for future login with jsonwebtoken.

Implement a login API endpoint with a post route to verify user existence. Validate passwords with bcrypt, then generate a one-day JWT token and return user id and token.

Integrate a user registration API in the MERN front end using Axios and React hot toast. Set up an env for the backend URL and manage loading state during submission.

Install js-cookie and store the token in cookies during login API integration. Handle responses from user/login and navigate to home via React Router.

Build a get current user API that reads the token from cookies, decrypts it with JWT to get the user ID, and fetches the user data from MongoDB via middleware.

Integrate the getcurrentuser API in the frontend to fetch and display the user’s id, name, and email on the home page using axios with credentials.

Create two layouts, private and public, and wrap private routes with the header plus content while rendering only the page content for public routes based on login or register keywords.

Create a reusable spinner component in the app, render it in the private layout, style with borders and spin animation, and toggle visibility with a loading state.

Store the logged in user information in a global zustand store instead of local component state, enabling access across the app (header, home) without prop drilling or extra API calls.

Protect private routes by checking a token in browser cookies and redirecting unauthenticated users, implement logout by removing the token, and prepare to adapt authentication for Next.js with Supabase.

Build and refine the login and registration user interfaces in a Next.js app, wiring authentication with Supabase and libraries like js-cookie, json web token, and bcrypt.

Compare MongoDB and Supabase while building a Next.js register server action that creates a users table in Supabase and hashes passwords with bcrypt js before insertion.

Integrate the register new user server action on the register page, validate passwords, handle loading and toasts, and create users in supabase authentication for the next js app.

Build login API with server action in Next.js, validate user from Supabase, compare passwords with bcrypt, generate a JWT token, store in cookies, and navigate to the home page.

Fetch and display the logged-in user on the home page by validating the token with JWT, querying Supabase for the user profile, and rendering user id, name, and email.

Implement private and public layouts in a Next.js app by wrapping pages in a custom layout, routing with path names, and loading current user via cookies and a spinner.

Create the blog model in the MERN stack backend by defining a MongoDB schema with title, content, and category, and reference the posting user to enable CRUD.

Implement a blocks API in the MERN stack by creating the blocks route, validating tokens, and using the block model to create, read, update, and delete blocks.

Create the blocks table in the Next.js app with fields title, content, category, and user_id. Link blocks.user_id to user profiles and enable full permissions for crud operations.

Implement six server actions to perform blocks CRUD in the Next.js backend, with token validation and user-id extraction, and complete backend functionality in MERN and Next.js.

Master routing and folder structure in a MERN app by implementing blocks pages, private routes, and navigation from home to blocks, add block, and edit block views.

Build a reusable blog form and page title component for a MERN stack app, enabling add and edit blogs with title, content, and category fields.

Integrate the adblock API in a MERN stack app by posting a block with title, content, category, and the logged-in user id to the blocks collection.

Fetch and display blogs posted by the logged-in user in a MERN stack app using Axios to retrieve blocks by user and render blog cards with title, content, and category.

Demonstrates editing a block: fetch block data by ID, populate edit form, manage loading state, and conditionally call add or update APIs with dynamic messages, preparing for delete operation.

Demonstrate delete block functionality in a MERN app using axios delete, manage loading and success states, and filter client data after deletion, with created date formatting.

Create and organize next.js routes, routing, and folders to support a blog CRUD UI, implementing pages for ad blocks and edits, and wiring navigation with next/link and router.

Implement the add block feature in a Next.js app by building a blog form, wiring Next Navigation, and creating block categories constants for client-side state and posts.

Fetch and display the logged-in user’s blogs by user id, implement a client component to access user state, support delete by id, and navigate to edit, showing latest first.

This lecture explains editing a blog by using the blog id to fetch data, pre-populate the form, and compare client versus server component approaches for values and updates in Next.js.

Implement search and category filters on the home page of the MERN app, track input state, render category options, and apply query parameters to fetch data.

Build and refine the filters API in a MERN stack app by applying regex-based title search and category filters in MongoDB. Master clear filters with state to refresh results accurately.