In this lesson, we will build a Fullstack Blog wih Next.Js / React / MUI / MongoDB suitable for beginners
👉 Github link: https://github.com/emmannweb/Nextjs-b...

TIMESTAMPS:
0:00 Intro
5:31 Next.js Installation
7:58 packages installation
10:46 Folder structure / Route / Nested Route.
21:30 Navbar with MUI
38:37 Login page with validation
46:08 Register page with validation
53:44 Load demo data in blog page
57:12: Create database with Mongo DB Atlas
1:00:58 Connect to MongoDB
1:02:46 User and Post models
1:15:24 client side data fetching (SWR)
1:31:16 Metadata: Dynamic information
1:46:40 Admin Layout page
2:02:15 Datagrid
2:46:45 Authentication process
2:54:20 Middleware
2:59:03 SignIn
3:04:49 SignOut
3:07:25 Authorization
3:10:30 User Role

CONTENT
Next Js folder structure and Routing
UI interface with form validation
API
CRUD operation with Mongo DB / Mongoose
Encrypt password
Authentication
Authorization
Middleware
Protected Route
User role
Notification
Dashboard / active link

STACKS:
Next Js 14.1.3 and Next Auth 5
Mongodb
MUI (Material UI), Formik, Yup
Datagrid
Hooks (SWR : client side data fetching)
VS code

👉 Membership:    / @emmannweb  
☕ Buy me a coffee: https://www.buymeacoffee.com/codingac...
👉 Source code and blog: https://webtechbloginc.com


YOUTUBE TUTORIALS
- Worpdress Tutorial:    • Wordpress tutorial - how to convert h...  
- Custom post type and taxonomy filter:    • Custom post type with taxonomy filter...  
- Cloudinary CRUD operation:    • Cloudinary update image in backend - ...  
- HTML and CSS Website design tutorial from scratch:    • html and css website design tutorial ...  
- MERN Stack from scratch:    • mongodb express react node js - Learn...  
- MERN Stack with Redux Toolkit:    • Redux Tutorial / Redux Toolkit  from ...  

Next.js 14.1.3 Full Stack 2024 | Create A Fullstack Blog With Next.js 14.1.3 for Beginners

CODING ACADEMY is a programming channel that aim to teach programming stuff in a simple way.
If you are looking for Wordpress tutorial, React, MongoDB, ect this is the right channel for you.
Don´t forget To Subscribe and Share with other Friends
Subscribe To Coding academy :    / @emmannweb  

You Can Follow on Facebook :


CODING ACADEMY is an online media that was created to teach programming to any person around the world who feel the need to learn programming. We teach in a simple way and make it easy to understand.
Our community ( CODING ACADEMY) fans greatly appreciate this initiative,


#coding academy #next #nextjs14 #blog #fullstack