Fullstack NextJS Course (SupaBlog AI)
About Course
Course Description:
Unlock the power of full-stack development with the Fullstack NextJS Course. This comprehensive course is designed to equip you with the skills needed to build sophisticated web applications using Next.js, the popular React framework.
Throughout this course, you will dive deep into the world of full-stack development, starting with the fundamentals of Next.js and moving towards advanced topics. You’ll learn how to create dynamic, high-performance applications that leverage server-side rendering, static site generation, and client-side hydration.
Key Features:
- SupaBlog Integration: Develop a feature-rich blogging platform with SupaBlog, utilizing Next.js’s powerful capabilities.
- AI Integration: Incorporate AI functionalities to enhance user experience and automate content creation processes.
- AutoPost Feature: Learn to implement an automated posting system to seamlessly publish content to popular platforms like Medium, Dev.to, and Hashnode.
- Full-Stack Expertise: Gain hands-on experience in both front-end and back-end development, mastering Next.js, React, Node.js, and database integration.
- Real-World Projects: Work on real-world projects and build a comprehensive portfolio to showcase your skills.
Course Modules:
- Introduction to Next.js: Understand the basics of Next.js, including setup, routing, and fundamental concepts.
- Building SupaBlog: Create a blogging platform from scratch, focusing on key features like user authentication, content management, and SEO optimization.
- Integrating AI: Enhance your application with AI-driven features for smarter content recommendations and automated processes.
- AutoPosting Mechanism: Develop an automated posting system to streamline the publication of content across multiple platforms.
- Backend Development: Dive into backend development with NextJS, API creation, server actions and database management using MONGODB.
- Deployment and Optimization: Learn best practices for deploying your Next.js application and optimizing performance for scalability.
Who Should Enroll:
- Aspiring Full-Stack Developers: Those looking to gain comprehensive knowledge in full-stack development using modern technologies.
- Front-End Developers: Developers aiming to expand their skill set to include back-end development and server-side rendering.
- Entrepreneurs & Startups: Individuals interested in building and deploying full-featured web applications for their businesses.
Prerequisites:
- Basic understanding of HTML, CSS, and JavaScript.
- Familiarity with React.js is recommended but not required.
Outcomes:
By the end of this course, you will have the expertise to build, deploy, and manage full-stack applications using Next.js. You’ll be able to create feature-rich web applications that integrate AI functionalities and automated content distribution, setting you apart in the competitive field of web development.
What Will You Learn?
- All the key features of NextJS
- How to build production level apps with NextJS
Course Content
1. Introduction
-
Project Demo
24:40 -
1. Introduction
04:52 -
— RESOURCES —
00:00 -
Extra Info
2. Project Setup
-
2. Create Next App
05:30 -
Styling Options
12:09 -
Install and Setup Shadcn
05:54
3. Server and Client Components
-
Server and Client Component
05:19
4. AI Coding Assistant
-
Setup AI Coding Assistant
01:18
5. Header and Footer Components
-
7. Create Header Components
08:53 -
8. Logo Component
06:21:00 -
9. Header Search Component
09:31 -
10. Nav Menu and Dark Mode
16:37 -
11. Dropdown menu
18:14 -
12. Make the Header Sticky
07:52 -
13. Mobile Menu 1 – Menu Slide
13:28 -
14. Mobile Menu 2 – Nav menu
19:28 -
15. Mobile Menu 3 – Search 1
10:58 -
16. Mobile Menu 4 – Search 2
07:55 -
17. Footer Component
04:58 -
18. Footer Links Component
14:18
6. Auth Components
-
19. Loading Components
08:53 -
20. Create Auth Routes
06:05 -
21. Login Form – Validation With React Hook Form & Zod
27:30 -
22. Google & GitHub Login Button
08:06 -
23. Register Form
11:00 -
24. Forgot Password Form
03:27 -
25. Reset Password Form
06:49
7. MongoDB Setup
-
26. Setup MongoDB
07:13 -
27. Connect MongoDB
03:36 -
28. Create User Model
06:19
8. Auth Logic – Next Auth
-
29. Create Google and Github oAuth Apps
13:33 -
30. Setup Next Auth – 1
12:22 -
31. Setup Next Auth – 2
18:21 -
32. Add Session Provider to app
03:29 -
33. Register User Action
07:48 -
34. Get Error Message Function
05:10 -
35. Register User – Component Logic
09:07 -
36. Login User
09:16 -
37. Logout User
04:58 -
38. Login with Google
07:29 -
39. Login with GitHub
02:29
9. Profile Page
-
40. Profile Pag
07:40 -
41. Page Title Componen
03:41
10. Protect Pages
-
42. Protect Pages with Middleware
03:52 -
43. Protect Links with Custom Functions
07:05
11. Admin Dashboard
-
44. Create Admin Page Layout
08:40 -
45. Admin Navbar – Part 1
17:41 -
46. Admin Navbar – Part 2
15:51
12. Category Section
-
47. Page Loading Indicator
05:49 -
48. Category Page
05:59 -
49. Category Model
05:02 -
50. Create Action Moda
11:54 -
51. Create Category Form
05:45 -
52. Create Category – Server Action
10:24 -
53. Create Category – Component Logic
09:02 -
54. Get Categories – Server Action
02:39 -
55. List Categories – Component Logic
10:28 -
56. Delete Category – Server Action
03:09 -
57. Delete Category – Component Logic
15:56 -
58. Update Category – Server Action
02:30 -
59. Update Category – Component Logic
15:18
13. Post Section
-
60. Post Page
09:29 -
61. Post Model
06:08 -
62. Create Post – Server Action.
10:25 -
63. Create Post Form – 1
14:42 -
64. Create Post Form – 2
14:47 -
65. Create Post Form – 3
19:05 -
67. Upload Image – 1
15:48 -
66. Hide Footer in Admin Pages
03:34 -
68. Upload Image – 2
14:10 -
69. Upload Image – 3
05:38 -
70. Get All Post – Server Action
19:44 -
71. Fetch All Post
09:23 -
72. Action Select Component
08:23 -
73. Search Component
07:14 -
74. Display Posts
10:16 -
75. Posts Pagination
20:28 -
76. Search Posts
11:00 -
77. Delete Post
03:02 -
78. Delete Post – Component Logic
09:22 -
79. Get Post – Server Action
07:40 -
80. Update Post – Server Action
05:00 -
81. Update Post – Component Logic – 1
13:30 -
82. Update Post – Component Logic – 2
09:32 -
83. Update Post – Component Logic – 3
03:00 -
84. Feature Post – Server Action
09:41 -
85. Feature Post – Component Logic
05:31 -
86. Delete Many Post – Server Action
04:47 -
87. Delete Many Post – Component Logic – 1
19:46 -
88. Delete Many Post – Component Logic – 2
05:36 -
89. Update Many Post Status
04:57 -
90. Post to dev.to – API Logic
21:20 -
91. Post to other blog – Modal
21:44 -
92. Post to Dev.to – Component Logic
22:21 -
93. Post to Medium – API Logic
14:24 -
94. Get Medium Author Id – API Logic
09:22 -
95. Post to Medium – Component Logic
09:49 -
96. Post to Hashnode – API Logic
13:06 -
97. Post to Hashnode – Component Logic
03:58 -
98. Setup OpenAI – Server Action
22:22 -
99. Chat UI – 1
11:30 -
100. Chat UI – 2
13:22 -
101. Chat UI – 3
17:49 -
102. Chat UI – 4
11:16 -
103. Chat UI – 5
11:07 -
104. Chat UI – 6
12:49 -
105. Send Query To ChatGPT
12:28 -
106, Type writer Effect
17:03 -
107. Display out Latest Response
14:44 -
108. Scroll to bottom after new response
05:50
14. Promo Section
-
109. Create Promo Page
06:57 -
110. Create Promo Model
02:59 -
111. Create Promo Server Action
09:18 -
112. Create getLoggedInUser Functioin
05:44 -
113. Create Promo Component
10:19 -
114. Promo Form Component
20:35 -
115. Preview Promo
09:52 -
116. Create Promo – Component Logic
13:17 -
117. Get all Promos – Server Actions
03:46 -
118. List Promo Component
25:11 -
119. Update Promo Server Action
02:03 -
120. Update Promo – Component Logic
13:42 -
121. Delete Promo Server Action
02:28 -
122. Delete Promo Component Logic
01:55 -
123. Activate Promo Server Action
08:13 -
124. Activate Promo Component Logic
03:07
15. User Section
-
125. User Profile Component
02:01 -
126, Get Users Server Action
02:30 -
127. Display Users Component Logic
21:13 -
128. Change User Role – Server Action
08:45 -
129. Change User Role – Component Logic
05:06 -
130. Delete User – Server Action
02:19 -
131. Delete User – Component Logic
01:36
16. Dashboard Home Page
-
132. Get Blog Stats – Server Action
07:10 -
133. Get Blog Stats – Component Logic
12:16 -
134. Get Active Categories – Server Action
08:48 -
135. Get Active Categories – Component Logic
14:39 -
136. Get Popular Posts – Server Action
02:10 -
137. Get Popular Posts – Component Logic
09:16
17. Home Page
-
138. Hero Section
22:58 -
139. Hero Section
10:37 -
140. Featured Post Section
07:34 -
141. Featured Post Layout 1
07:01 -
142. Featured Post Layout 2
06:48 -
143. Recent Post Section
05:12 -
144. Single Post Component
06:50
18. Post Page
-
145. Create Posts Page and Component
12:38 -
146. Header Search
04:27 -
147. Create PostDetails Component
08:28 -
148. Get Active Promo and Count Promo Clicks – Server Action
05:33 -
149. Post Details Layout
05:11 -
150. Post Content – Part 1
10:01 -
151. Post Content – Part 2 – Display Promo
11:10 -
152. Post Content – Part 3
11:43 -
153. Add DisQus Comments to blog posts
13:24 -
154. Protect Comment Section From Suspended Users
18:01 -
155. Featured Post Sidebar
07:39 -
156. Categories Sidebar
06:01 -
157. Popular Post Sidebar
03:30 -
158. Blog Metadata
08:52 -
159. Categories Page
12:45