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
Смотрите видео Next.js 14.1.3 Full Stack 2024 | Create A Fullstack Blog With Next.js 14.1.3 for Beginners онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь CODING ACADEMY 18 Март 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,88 раз и оно понравилось 6 людям.