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

Learn Next.js 15 from the ground up by building and deploying a fullstack multi user blog platform (Like Medium or DEV)

What you'll learn

Learn how to build fullstack multi user blogging platform like Medium or DEV in Next.js 15, Typescript and TailwindCSS

Learn how to use the latest Next.js features like the App Router, Server Actions, Server Component and more

Create Complete Auth System Using Auth.js v5 - Email and Password Login, Continue with Google or Github, Email verification, Password reset and more.

Create Blog Editor Using BlockNote - Something similar to the Notion editor

Image Uploads - Upload, Replace and Delete Images.

Blogs' Comment Section - Comment on blogs and reply to comments.

User Profile - User details, user settings (update profile) and user blogs.

Create a Realtime Notification System in SocketIO

Requirements

HTML & CSS

JavaScript and React.js Knowledge

NO prior Next.js Knowledge is required

Description

We will use Next.js 15, TypeScript, TailwindCSS, Auth.js v5, Prisma, and more to build a complete full-stack web application from scratch.This course is project-based and perfect for developers who want to learn by building a real-world app. You’ll gain hands-on experience by creating and deploying a blog platform, something similar to DEV or Medium, with modern tools and best practices.Features we will create in the course project:A complete auth system using Auth.js v5 - Includes credentials login (email and password), continue with Google or GitHub, email verification, password reset, and more.Block Note editor - A rich text editor inspired by Notion, with support for images, code blocks, and more.Blogs' paginations - Server-side pagination for improved SEO and performance.Dark and light theme modes - Seamless switching between themes.Image uploads - Upload, replace, and delete images.Blogs' reactions - Like and bookmark your favorite blogs.Search and filter - Filter blogs by tags and keywords.Comment system - Comment on blogs and reply to comments.User profiles - View and update user settings, and see authored blogs.Follow system - Follow and unfollow users.Realtime notifications - Powered by SocketIO.Admin dashboard - Monitor users and blogs.Deployment - Learn how to deploy your project to production.By the end, you’ll have a powerful, modern blog app ready for the real world.

Overview

Section 1: Getting Started

Lecture 1 App Demo

Lecture 2 Prerequisites

Lecture 3 React vs Next.js

Lecture 4 Creating a Next.js App

Lecture 5 RootLayout and Homepage

Lecture 6 Adding Google Fonts

Lecture 7 The cn Function

Lecture 8 TailwindCSS Intro

Section 2: NavBar, Pages and Layouts

Lecture 9 Initial Setup

Lecture 10 The Container Component

Lecture 11 Theme Toggle

Lecture 12 The Logo

Lecture 13 Shadcn Intro & Search Input Style

Lecture 14 Notifications Style

Lecture 15 UserButton Style

Lecture 16 Adding Pages & Nested Pages

Lecture 17 Adding Dynamic Pages

Lecture 18 Adding Nested Layouts

Lecture 19 Linking Pages

Lecture 20 Push Code to Github

Section 3: React Hook Form

Lecture 21 Intro to Typescript

Lecture 22 Reusable Input Component

Lecture 23 The Login Form

Lecture 24 Button Component

Lecture 25 Heading Component

Lecture 26 Social Auth Component

Lecture 27 The Register Form

Section 4: Prisma and Database

Lecture 28 Setting Up Prisma

Lecture 29 Creating a Postgres Database

Lecture 30 User Schema

Lecture 31 Register Server Action

Lecture 32 Calling The Server Action

Lecture 33 The Alert Component

Section 5: Authentication in Auth.js (Previously Next-Auth)

Lecture 34 Authjs Setup

Lecture 35 Middleware

Lecture 36 Protect Routes

Lecture 37 Login User

Lecture 38 Logout User

Lecture 39 Redirect User

Lecture 40 Update Session

Lecture 41 Continue With Github

Lecture 42 Continue With Google

Section 6: Verify Email and Reset Password

Lecture 43 Auto Verify Oauth Email

Lecture 44 Customize Account not Linked Error

Lecture 45 Generate Email Verification Token

Lecture 46 Send Verification Email

Lecture 47 Email Verification Page

Lecture 48 Send Password Reset Email

Lecture 49 Password Reset Form

Lecture 50 Add User Role & UserId to Session

Section 7: Blogs Create, Edit, List & Filter

Lecture 51 Creating Blog Form

Lecture 52 Setup Edgestore (Image upload in React)

Lecture 53 Upload Cover Image

Lecture 54 Show, Replace and Remove Cover Image

Lecture 55 Select Tags

Lecture 56 BlockNote Editor

Lecture 57 Set Editor Content to React Hook Form State

Lecture 58 Show Blog Form Error

Lecture 59 Publish Blog

Lecture 60 Save Blog As Draft

Lecture 61 Get Published Blogs

Lecture 62 Style Blogs List and Details

Lecture 63 Edit Blog and Filters

Section 8: Blogs Reactions

Lecture 64 Clap Blog Server Action

Lecture 65 Optimistic UI Update

Lecture 66 Bookmark Blog

Lecture 67 Fix Navigation Issues

Lecture 68 Bookmarks Page

Section 9: Comments Section

Lecture 69 Comments Schema

Lecture 70 Comments Server Action

Lecture 71 Comments Form

Lecture 72 Adding Toast Message

Lecture 73 List Comments

Lecture 74 Comments Card

Lecture 75 Comments Reaction

Lecture 76 Add Replies

Lecture 77 List Replies

Lecture 78 Delete Comment

Lecture 79 Clap Comments

Lecture 80 Show Comments Count

Lecture 81 Delete Blog Part 1

Lecture 82 Delete Blog Part 2

Section 10: User Profile

Lecture 83 User Profile Server Action

Lecture 84 Get User Blogs

Lecture 85 User Profile Blogs Pagination

Lecture 86 Edit User Server Action

Lecture 87 Edit User Form

Lecture 88 Edit User Email

Lecture 89 Delete User Part 1

Lecture 90 Delete User Part 2

Section 11: Follow & Unfollow Users

Lecture 91 Follow Prisma Schema

Lecture 92 Follow API Route

Lecture 93 Run Prisma Generate

Lecture 94 Follow Button (Make API Request)

Lecture 95 List Followers and Followings

Section 12: Realtime Notifications & Deployment

Lecture 96 Notifications Schema

Lecture 97 Create Notifications

Lecture 98 Get Notifications

Lecture 99 List & Open Notifications

Lecture 100 Mark Notifications as Read

Lecture 101 Setup Socket Server

Lecture 102 Send Notifications

Lecture 103 Simple Admin Dashboard

Lecture 104 App Deployment

Lecture 105 How To Run The Source Codes

React developers who would like to learn how create fullstack apps in modern Next.js ( app router, server actions and more)