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
Watch video Next.js 14.1.3 Full Stack 2024 | Create A Fullstack Blog With Next.js 14.1.3 for Beginners online without registration, duration hours minute second in high quality. This video was added by user CODING ACADEMY 18 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,88 once and liked it 6 people.