Full-Stack Social Media App Tutorial with React 19 & Next.js 15 & MySql | React Next.js Full Course

Published: 21 June 2024
on channel: Lama Dev
114,465
3.5k

Next.js 15 full stack app project. Complete social media application tutorial with the new React 19 features. useOptimistic, useActionState, and more.
Get Hostinger Discount: https://hostinger.com/lamadev Coupon Code: LAMADEV

Clerk Authentication: https://go.clerk.com/fj5Jmro 

VSCode Snippets: https://github.com/safak/snippets

If it is valuable to you, you can support Lama Dev.
Join:    / @lamadev  
Buy me a coffee: https://www.buymeacoffee.com/lamadev

Source Code:
Start here: https://github.com/safak/next-social/...
Completed: https://github.com/safak/next-social/...

Join Lama Dev groups

X / Twitter: https://x.com/lamawebdev
Facebook:   / lamadev  
Instagram:   / lamawebdev  
Discord:   / discord  

00:00 Introduction
04:00 Installing the New Version of Next.js
07:00 Social Media App Structure (Backend and Database Design)
12:30 Next.js 15 App Router Pages and Layout
18:09 Next.js Responsive Navbar with Tailwind
22:30 React Next.js Hamburger Menu Design
27:00 Mobile First Design with Tailwind CSS
33:27 Next.js Authentication Structure
36:28 Next.js 15 Clerk Auth Tutorial
50:17 Next.js Social Media App Homepage Design
53:25 User Stories Component Design
58:30 Social Media App New Post Component Design
01:04:50 React Next.js Social Media App Post Card Design
01:13:09 Comments Section Design
01:20:58 React Next.js Rightbar (Menu) Design
01:47:20 React Next.js Lefttbar (Menu) Design
01:58:30 React Next.js Social Media App User Profile Page Design
02:03:10 Next.js MySQL Installation with VPS
02:06:05 Next.js 15 Prisma CRUD Tutorial
02:10:50 Prisma ORM Social Media App Database Design
02:26:45 Next.js Prisma Server Actions Tutorial
02:31:50 Next.js 15 Clerk Webhook Tutorial (How to Add Clerk User to Database)
02:43:36 Next.js 15 Data Fetching on Server Components
03:10:30 Next.js 15 Server Actions
03:19:02 useOptimistic Hook Tutorial
03:31:50 Fetch User Media
03:37:36 Next.js Prisma Socical Media App Following Requests
03:52:13 Next.js Update User Profile with Server Actions
04:07:10 Next.js Server Actions Zod Form Data Verification
04:13:25 Next.js How to Upload Image?
04:20:28 Next.js 15 useActionState Hook Tutorial
04:27:54 Next.js 15 useFormStatus Hook Tutorial
04:30:00 Next.js Social Network App Fetch Friend and Profile Posts
04:40:58 Next.js Social Media App Like Functionality with useOptimistic
04:50:26 Next.js 15 useOptimistic Hook (Add a Post/Comment Optimisticaly)
05:06:12 Add a New Post
05:17:30 Next.js Social Media App User Stories
05:35:24 Next.js Social Network App Delete User
05:42:01 How to Deploy Full-stack Next.js App to a VPS with a database?
05:54:17 Outro


Watch video Full-Stack Social Media App Tutorial with React 19 & Next.js 15 & MySql | React Next.js Full Course online, duration 05 hours 54 minute 41 second in high quality that is uploaded to the channel Lama Dev 21 June 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 114,465 times and liked it 3.5 thousand visitors.