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

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.

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.

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.

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

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.

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.

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.

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

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.