Full-Stack Next.js 15 Course - Multi User Blog Platform

Create a reusable navbar and layout in a Next.js app, wrap pages in a main tag, and use flex with min-h-screen to push the footer, styled with Tailwind CSS.

Create a stateless container component in tsx to enforce a max width across devices, wrapping the navbar with responsive tailwind styles for centered layout. Prepare for a future theme toggle.

Implement a dark and light theme toggle in a Next.js app using next-themes, a theme provider, and a use theme hook to switch modes.

Design the course logo by adding a note icon from React Icons, installing react-icons, importing MD note alt, and styling the text in bold at size 24.

Explore shadcn intro by installing and using a lightweight search input component in a Next.js app, styled with tailwind via CDN, with responsive positioning and theming options.

Create a notification dropdown triggered by a bell icon using drop down menu components to display notifications with a header and a mark all as read option.

Build a user button with a Chakra UI avatar, wire a drop down menu of profile, create post, bookmark, and sign out, and style borders for light and dark mode.

Learn to create pages with Next.js file-based routing, including login and register pages, and organize nested pages under auth to structure a multi-user blog platform.

Add dynamic routes in Next.js 15 to create user profile pages from a dynamic URL id. Read the params in a server component and fetch data for the user profile.

Explore nested layouts in Next.js 15, sharing a root layout across pages and adding segment-specific layouts with layout.tsx and per-page metadata for titles, icons, and fonts.

Explore navigating between pages in Next.js using the inbuilt link component and the use router hook, noting how server and client components affect routing for login and register flows.

Create a GitHub repository, connect the local repository to the remote, commit changes, and push to main branch to safeguard progress, while ignoring node_modules and using package.json to manage libraries.

TypeScript is a strongly typed superset of JavaScript that catches errors early, using interfaces, types, and generics to define data shapes and speed up development in Next.js projects.

Create a reusable form field component in a Next.js app, define an interface for id, type, disabled, placeholder, and label, and integrate react-hook-form register with error display and className styling.

Build the login form using a reusable form field component, React Hook Form, and Zod validation to register inputs, validate email and password, and connect to the login page.

Learn to build a reusable client side button component in a Next.js 15 app, with label, type, disabled, outlined, small, icon, and optional onClick props, plus dark mode styles.

Create a reusable heading component in tsx with title, center, lg, and md props, rendering h1, h2, or h3 as needed while supporting client and server components.

Create a reusable social auth component with GitHub and Google buttons, styled as outlined buttons with icons, ready for login or registration forms.

Build a register form by reusing the login form, adding name, email, password, and confirm password with a zod-based register schema and use form hook integration.

Set up Prisma as an orm to connect to your database, install Prisma and Prisma Client, initialize a db client, and prepare for a Neon database.

Set up a free Neon Postgres database, sign up and create a project, then configure Prisma with schema.prisma and a .env file to connect the database for user schema development.

Build a user schema using next auth (auth js) with prisma and PostgreSQL, generate types with Prisma client, and push schema to the database to create user and account tables.

Create a server action for user registration that validates form data, hashes the password with bcryptjs, checks email uniqueness, and creates a new user with prisma db.

Apply a signup server action in a Next.js 15 multi-user blog, call it from the register form, and handle success, error, and loading states with use transition and useState.

Create a reusable alert component in Goat Components using TSX, accepting success, error, and message props, and render state-specific icons and styles for use across forms.

Install auth js in your next.js app, set a strong AUTH_SECRET, and configure the auth config, api routes, and Prisma adapter for edge compatibility with PostgreSQL.

Learn how to implement a Next.js middleware with next-auth to control page access based on login status, read request data, and configure a matcher.

Protect routes by defining public routes array and private paths, guarding them with middleware that redirects to login or profile, while treating api auth prefix as separate for authentication.

Learn to implement email/password login with the credentials provider in a Next.js 15 app, validating input, checking user existence, bcrypt password verification, and server actions for sign-in and redirects.

Sign out a user from the client with next-auth's signOut, attach an onClick handler, and ensure server actions are used to enable correct post-sign-out redirect.

Implement and test a login redirect in a multi-user blog app using useRouter and router.push to send authenticated users to a redirect and guard access to login and register pages.

Conditionally render the navbar by session state using next-auth, the session provider, and the use session hook, then update the client session with use effect to reflect login and logout.

Configure the GitHub provider for NextAuth by updating auth.config.ts, reading client id and secret from env vars, and wiring a sign-in button to authenticate via GitHub.

Enable Google authentication for the Next.js 15 multi-user blog by configuring the next-auth Google provider, updating env vars, and setting Google client id, secret, and redirect URLs.

Automate email verification for OAuth signups by updating the user’s email_verified field on link account in auth.ts, using Prisma to set the verification date for Google or GitHub.

Customize the OAuth account not linked error by reading the URL error parameter with use search params, show a tailored login message, and replace the URL with the sign-in route.

Create an email verification feature by defining a Prisma token schema, generate a uuid v4 token with a one-hour expiry, and ensure a unique token per email before storing it.

Implement email verification in a Next.js 15 multi-user blog by sending verification tokens via Recent and building a magic link workflow with an API key and environment variable setup.

Build an email verification page in Next.js 15 that reads a token from the url, verifies it via a server action, and updates the user's email verification status.

Implement a password reset flow by creating a password reset token model, generating and emailing a reset link, and building a form and server action to dispatch the token.

Build a password reset flow in a Next.js 15 app by creating a reset form, reading token from the URL, validating with a schema, and updating the password with bcrypt.

Extend the session to include the user ID and role by updating the Prisma schema and NextAuth callbacks. Retrieve and display the user image from the session for authenticated users.

Create a blog post page and form for a multi-user blog platform next.js 15. Build a blog schema with title, content, cover image, and tags, validated with zod and react-hook-form.

Learn to implement blog cover image uploads with edge store, including configuring the server, react client, and environment variables, plus a backend client to delete images.

Build a client component to upload a blog cover image to an edge store, support replace URLs, track upload progress, and integrate with the create blog form.

Learn how to display an uploaded cover image in the blog editor, pass the image URL via props, and provide replace and remove options to manage the cover image.

This lecture teaches adding a select tags feature to the create blog form, rendering checkboxes from a tags array while excluding all and limiting to 3–5.

Build and integrate a BlockNote editor into the multi-user blog app, including content state with onChange, JSON content handling, theme support, image uploads via edge store, and editor styling.

Learn to wire block editor content and cover image into React Hook Form state, register fields, and submit to publish or save as draft.

Show blog form errors by displaying content and tags error messages, customize the tags error, and render status alerts while preparing a Prisma schema and server action for publishing.

Define a Prisma blog model with user relationships and tags. Validate input, require email verification to publish or save drafts, and save blogs via server actions.

Save a blog as draft by submitting with publish set to false, preventing it from appearing in the main feed until published.

Fetch published blogs for the feed, add a create blog link, and implement a server action with pagination using Prisma to skip, limit, and count.

Style blogs list and details in a full-stack next.js 15 multi-user blog platform course, building blog cards, pagination, and a details page with cover image and tags.

Learn to implement advanced search and tag filters in a Next.js 15 multi-user blog, including editing blogs, pagination fixes, and responsive URL-driven search and filters.

Implement a clap reaction by defining a Prisma clap model with user and blog relations, enforcing unique user-blog claps, and building a server action that toggles the clap.

Learn to implement optimistic UI for blog claps in a multi-user Next.js 15 app: display real clap counts, track user claps, and revalidate after server actions.

Implement a bookmark feature for a multi-user blog by updating the Prisma schema and server actions, toggling bookmarks in the app, and preparing a bookmarks page.

Fix navigation issues by conditionally rendering the search input on the feed page, refining useEffect, and updating routing to support public feed and blog details.

Create a bookmarks page that lists a user's bookmarked blogs, using a server action with pagination and including blog and user details, reusing the list blogs components.

Define a Prisma-based comment schema with blog and user relations, support one-level threaded replies via parent id, and cascade deletes, plus a server action to add comments.

Implement a server action to add comments and replies, validate input with a comment schema, verify user and blog exist, and revalidate the blog page.

Build a comments form for a multi-user blog in a Next.js 15 course, using server and client components with add and list comments, and session-based permissions.

Add toast messages with React Hot Toast to provide instant feedback for comments in a Next.js 15 multi-user blog, using a bottom center toaster.

Create a server action to fetch comments by blog id with optional parent, include user details and reply counts, then render the comments list for a multi-user blog.

Create a stateless comment card component in a client Next.js 15 app to display a single comment with its user, created date, and content.

Learn to build a comment reactions component with clap and reprise counts, load replies, and a one-level reply form in a Next.js 15 multi-user blog platform.

Shows how to add a reply feature in a multi-user blog app by toggling a reply form and validating login to post replies with blog, user, and parent IDs.

List replies demonstrates client-side fetching and rendering of comment replies using a list component and reply cards, with state, error handling, and transition-based UI updates.

Implement a server action to delete a comment by id, verify the user owns the comment, delete from the database, revalidate the blog details, and return a success message.

Learn to implement clap functionality for comments in a multi user blog using prisma schemas, server actions, and frontend state to track clap counts and whether a user has clapped.

Show how to display accurate blog comment counts by fetching blogs with comments enabled, updating type definitions, and refreshing pages to reflect new comments in a Next.js 15 multi-user blog.

Implement a secure delete blog flow using a server action, validate blog existence and ownership on the server, and wire an edit-mode delete button in the UI.

Delete a blog post and its image, then redirect to the blog feed via next/navigation. Review covers authentication, blog editing, image upload, and upcoming user profiles.

Build a dynamic user profile in a Next.js 15 app, showing user details and paginated blogs, with edit and delete actions, using a server component and a server action.

Learn how to fetch blogs by user id, paginate results, and display a user’s blogs in a multi-user blog platform built with Next.js 15, including drafts, edits, and admin controls.

Resolve the user profile blogs pagination by using params and next navigation to maintain the profile view while paging between pages, wiring links with the user id and current page.

Build a server action to edit a user profile by validating name, bio, and tags with a zod schema, then update prisma after verifying the session user.

Build an edit user page in a Next.js 15 app by fetching the user by id, validating the session user, and editing name, bio, and tags via a reusable form.

Learn how to edit a user email in a full-stack Next.js 15 course by updating the server action to validate the new email, prevent duplicates, and send a verification message.

Delete user part 1 explains cascading deletes, removing a user and related blogs, clubs, bookmarks, and comments, while handling cover images and a server action.

Delete a recently created user to verify the logout behavior after five seconds, and observe how a dev server refresh impacts sign-out and user not found results.