Next.js 15 , Node.js & Supabase : Build Real-Time Projects

Set up authentication UI by creating public login and register routes, adding a dashboard placeholder, and applying a shared auth parent background with a centered 450px card layout.

Create a register page with a form built from a component, validated by a Zod-based schema via react-hook-form, with name, email, and password fields and login link.

Create a login page by replicating the register form design in a Next.js project, simplifying the form to email and password, and wiring navigation from login to register.

Set up a new Supabase account and project, then integrate the project with a Next.js app by installing @supabase/supabase-js, configuring environment variables, and creating a Supabase config file.

Create a user profiles table in Supabase, add id, createdate, name, email, profile pic, password, and is active, enforce a unique email, and enable create, read, update, and delete permissions.

Implement a Next.js 15 user registration server action that hashes passwords with bcryptjs, checks for existing emails, inserts new profiles, and issues jwt tokens stored in cookies via js-cookie.

Build the login api by fetching the user by email, validating the password, signing a JWT with a secret key, and storing the token in cookies for the user dashboard.

Fetch and display the logged in user by decoding the JWT from browser cookies in a Next.js server action, then retrieve and return the user data from Supabase.

Implement logout in a Next.js app by removing the user token from cookies and routing to the login page, using a reusable logout button component and a loading state.

Protect private routes by using Next.js middleware to redirect unauthenticated users to login and redirect authenticated users from public pages to the dashboard.

Build the private route layout in a Next.js project by creating a custom private layout with a header and dynamic page content, wrapping private routes and preserving a consistent UI.

Build a header that shows the logged-in user by fetching once and storing it in a global zustand store for app-wide access, with lucid icons and a hamburger menu icon.

Implement a Qaqun sheet sidebar to display logged-in user menu items (dashboard, blogs, my blogs, profile) with active item styling and a logout button, plus router navigation.

Convert the static loading text into a dynamic spinner component to indicate asynchronous API activity, and center it within the private layout.

Create the blocks table in the Supabase project with fields title, category, image, description, active, likes count, comments count, and author, then define the author relation, and configure rls policies.

Implement server actions to perform CRUD operations on blocks using Supabase, including add blog, update blog, delete block, and get blocks by author or id with error handling.

This lecture builds the UI folder structure for blocks CRUD in a Next.js front end, creates add and edit blog pages, and a reusable page title and blog form.

Create a blog form in a Next.js and Node.js app with real-time features using socket.io, a simple react wysiwyg editor, and fields for title, description, category, and content.

Implement the add blog server action in the blog form and handle onsubmit logic. Navigate to the blogs page on success and verify the workflow with form filler data.

Upload blog images by selecting a file in the blog form, preview it, then upload to Supabase storage, obtain a public URL, and attach it to the new blog entry.

Show created blogs by rendering a dynamic table for the logged-in user, fetch blocks by author, and format creation dates with dayjs, including edit and delete actions.

Learn to edit a blog block by fetching the block by id, pre-populating the form with title, description, category, content, and image, and submitting updates.

Implement delete block functionality on the blogs page, with loading states, success and error messages, and real-time status updates via a select field for active or inactive.

Build blocks page in a Next.js 15 app to display blocks from authors in a four-column grid, showing image, title, description, author from user profiles, and created date via socket.io.

Build the blog info page by fetching blog data by id, show a loading spinner, render title, image, and content with dangerously set HTML, and display author and date.

Create a likes table linked to blogs and users, configure permissions, and implement server actions to like or unlike a blog and update the blog’s likes count.

Implement like and unlike functionality on a blog page by calling server actions, fetching likes by blog id, and updating real-time like counts and heart color in the UI.

Create a comments table in supabase with blog_id, user_id, and content, link to blocks and user profiles, and implement server actions to create and delete comments and update counts.

Implement add comment and like features with a modal input, load comments, and update the comment count using Supabase, while setting up for Node.js and Socket.IO real-time work.

Set up a Node.js backend with express and socket.io, initialize npm, create an index.js entry point, install nodemon for automatic restarts, and run a server on port 5000.

Compare rest APIs with socket.io for real-time 1-to-1 communication, using emit and on to send and receive events like instant likes notifications, with separate node.js and next.js servers.

Install and import socket.io, create an http server, establish the socket.io backend connection with IO on connection, and prepare for front-end integration in the next video.

Set up a real-time front-end socket.io client in a Next.js project, configure the backend URL, and emit a hi event with user data to test server receipt.

Learn real-time server-to-client communication with socket.io by broadcasting to all connected clients or joining a user-specific room to emit messages to a single user.

Implement real-time server-to-client communication with socket.io by broadcasting messages to all connected clients and routing targeted messages to a specific user using rooms joined by user ID.

Enable real-time notifications in a Next.js app with a Supabase notifications table, trigger on blog likes, and display unread counts in the header bell.

Implement real-time notifications in a Next.js app using socket.io, emitting and listening for events between client and server with payloads containing user IDs and notification content.