Building a Full-Stack Social Media App with Next.js, MySQL, and Socket.io - Real-Time Notifications

Build a full-stack social media application with real-time notifications in this comprehensive video tutorial that covers Next.js 15, MySQL, and Socket.io integration. Learn essential development concepts including database design with Prisma ORM, Docker container setup, authentication using Clerk, and implementing server components. Master advanced features like infinite scrolling with React Query, custom sign-in components, and real-time notifications through Socket.io. Follow along to create user profiles, implement friend/follow functionality, handle post creation and interactions, and set up form validation using Zod. The tutorial culminates with deployment instructions for a VPS, providing a complete guide from development to production. Code examples and source repositories are provided for reference throughout the learning process.

Syllabus

00:00 Introduction
03:22 Installation
05:55 Planning a Social Media App & Database Design
10:35 Prisma ORM Tutorial
11:44 Docker Creating a MySQL Database
14:50 Prisma Tables and Relationships Tutorial
17:19 Prisma Social Media App Database Schema
27:58 Prisma migrate, studio, generate, and Prisma Client
36:03 How to Seed Prisma Database
39:08 Next.js 15 Data Fetching on Server Components
40:35 Authentication
41:57 Next.js 15 Clerk Auth Tutorial
50:47 Clerk Elements Tutorial Create a Custom Sign-in and Sign-up Components
01:16:44 Fetching Posts Social Media app Feed Posts
01:24:46 Next.js 15 Infinite Scrolling Tutorial
01:28:48 Next.js 15 React Query Tutorial Tanstack Query
01:33:23 Next.js Infinite Scrolling with React Query
01:46:30 Adding the Post Data to Post Component
01:49:14 Advanced Prisma Queries
02:06:00 Social Media App User Profile Page Data
02:13:57 User Friend/Follow Recommendation Logic
02:19:16 Social Media App Fetching Single Post Page Data
02:22:59 Social Media App Fetching Post Comments
02:26:56 Adding User to Database after the Clerk Authentication
02:27:21 Next.js 15 Clerk Webhooks Tutorial
02:38:12 Next.js 15 Server Actions Tutorial
02:38:59 Next.js Like Button with Server Actions and useOptimistic Hook
02:44:03 React/Next.js useOptimistic Tutorial
02:52:02 Other Data Mutations with Server Actions
02:58:39 Next.js 15 useActionState Hook Tutorial with Server Actions
03:04:25 Next.js Form Validation with Zod, Server Actions, and useActionState
03:10:38 Create a New Post with Server Actions and useActionState
03:26:55 Following a User with Next.js Server Actions and Prisma
03:31:29 Next.js Socket.io Tutorial 2025
03:33:17 Next.js 15 Real-time Notification with Socket.io
03:44:24 Sending Real-time Notifications when Like, Comment or Follow
04:06:28 Debugging and Fixing the Problems
04:11:46 How to Deploy Full-Stack Next.js Application to a VPS
04:22:04 Outro