Nextjs Fullstack Course (Supablog Ai App)

Build a Fullstack AI-Powered Blog with Next.js 14, MongoDB, Tailwind & OpenAI - Auto-post to medium, dev .to & Hashnode

What you'll learn

All the key features of NextJS

How to build production level apps with NextJS

How to work with AI in NextJS

Nextjs SEO - Search engine optimization

Requirements

Basic understanding of HTML, CSS, and JavaScript.

Familiarity with React.js is recommended

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.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.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 – RESOURCES –

Section 2: Project Setup

Lecture 3 Create Next App

Lecture 4 Styling Options

Lecture 5 Install and Setup Shadcn

Section 3: Server and Client Components

Lecture 6 Server and Client Component

Section 4: AI Coding Assistant

Lecture 7 Setup AI Coding Assistant

Section 5: Header and Footer Components

Lecture 8 Create Header Components

Lecture 9 Logo Component

Lecture 10 Header Search Component

Lecture 11 Nav Menu and Dark Mode

Lecture 12 Dropdown menu

Lecture 13 Make the Header Sticky

Lecture 14 Mobile Menu 1 - Menu Slide

Lecture 15 Mobile Menu 2 - Nav menu

Lecture 16 Mobile Menu 3 - Search 1

Lecture 17 Mobile Menu 4 - Search 2

Lecture 18 Footer Component

Lecture 19 Footer Links Component

Section 6: Auth Components

Lecture 20 Loading Components

Lecture 21 Create Auth Routes

Lecture 22 Login Form - Validation With React Hook Form & Zod

Lecture 23 Google & GitHub Login Button

Lecture 24 Register Form

Lecture 25 Forgot Password Form

Lecture 26 Reset Password Form

Section 7: MongoDB Setup

Lecture 27 Setup MongoDB

Lecture 28 Connect MongoDB

Lecture 29 Create User Model

Section 8: Auth Logic - Next Auth

Lecture 30 Create Google and Github oAuth Apps

Lecture 31 Setup Next Auth - 1

Lecture 32 Setup Next Auth - 2

Lecture 33 Add Session Provider to app

Lecture 34 Register User Action

Lecture 35 Get Error Message Function

Lecture 36 Register User - Component Logic

Lecture 37 Login User

Lecture 38 Logout User

Lecture 39 Login with Google

Lecture 40 Login with GitHub

Section 9: Profile Page

Lecture 41 Profile Page

Lecture 42 Page Title Component

Section 10: Protect Pages

Lecture 43 Protect Pages with Middleware

Lecture 44 Protect Links with Custom Functions

Section 11: Admin Dashboard

Lecture 45 Create Admin Page Layout

Lecture 46 Admin Navbar - Part 1

Lecture 47 Admin Navbar - Part 2

Section 12: Category Section

Lecture 48 Page Loading Indicator

Lecture 49 Category Page

Lecture 50 Category Model

Lecture 51 Create Action Moda

Lecture 52 Create Category Form

Lecture 53 Create Category - Server Action

Lecture 54 Create Category - Component Logic

Lecture 55 Get Categories - Server Action

Lecture 56 List Categories - Component Logic

Lecture 57 Delete Category - Server Action

Lecture 58 Delete Category - Component Logic

Lecture 59 Update Category - Server Action

Lecture 60 Update Category - Component Logic

Section 13: Post Section

Lecture 61 Post Page

Lecture 62 Post Model

Lecture 63 Create Post - Server Action.

Lecture 64 Create Post Form - 1

Lecture 65 Create Post Form - 2

Lecture 66 Create Post Form - 3

Lecture 67 Upload Image - 1

Lecture 68 Hide Footer in Admin Pages

Lecture 69 Upload Image - 2

Lecture 70 Upload Image - 3

Lecture 71 Get All Post - Server Action

Lecture 72 Fetch All Post

Lecture 73 Action Select Component

Lecture 74 Search Component

Lecture 75 Display Posts

Lecture 76 Posts Pagination

Lecture 77 Search Posts

Lecture 78 Delete Post

Lecture 79 Delete Post - Component Logic

Lecture 80 Get Post - Server Action

Lecture 81 Update Post - Server Action

Lecture 82 Update Post - Component Logic - 1

Lecture 83 Update Post - Component Logic - 2

Lecture 84 Update Post - Component Logic - 3

Lecture 85 Feature Post - Server Action

Lecture 86 Feature Post - Component Logic

Lecture 87 Delete Many Post - Server Action

Lecture 88 Delete Many Post - Component Logic - 1

Lecture 89 Delete Many Post - Component Logic - 2

Lecture 90 Update Many Post Status

Lecture 91 Post to dev.to - API Logic

Lecture 92 Post to other blog - Modal

Lecture 93 Post to Dev.to - Component Logic

Lecture 94 Post to Medium - API Logic

Lecture 95 Get Medium Author Id - API Logic

Lecture 96 Post to Medium - Component Logic

Lecture 97 Post to Hashnode - API Logic

Lecture 98 Post to Hashnode - Component Logic

Lecture 99 Setup OpenAI - Server Action

Lecture 100 Chat UI - 1

Lecture 101 Chat UI - 2

Lecture 102 Chat UI - 3

Lecture 103 Chat UI - 4

Lecture 104 Chat UI - 5

Lecture 105 Chat UI - 6

Lecture 106 Send Query To ChatGPT

Lecture 107 Type writer Effect

Lecture 108 Display out Latest Response

Lecture 109 Scroll to bottom after new response

Section 14: Promo Section

Lecture 110 Create Promo Page

Lecture 111 Create Promo Model

Lecture 112 Create Promo Server Action

Lecture 113 Create getLoggedInUser Functioin

Lecture 114 Create Promo Component

Lecture 115 Promo Form Component

Lecture 116 Preview Promo

Lecture 117 Create Promo - Component Logic

Lecture 118 Get all Promos - Server Actions

Lecture 119 List Promo Component

Lecture 120 Update Promo Server Action

Lecture 121 Update Promo - Component Logic

Lecture 122 Delete Promo Server Action

Lecture 123 Delete Promo Component Logic

Lecture 124 Activate Promo Server Action

Lecture 125 Activate Promo Component Logic

Section 15: User Section

Lecture 126 User Profile Component

Lecture 127 Get Users Server Action

Lecture 128 Display Users Component Logic

Lecture 129 Change User Role - Server Action

Lecture 130 Change User Role - Component Logic

Lecture 131 Delete User - Server Action

Lecture 132 Delete User - Component Logic

Section 16: Dashboard Home Page

Lecture 133 Get Blog Stats - Server Action

Lecture 134 Get Blog Stats - Component Logic

Lecture 135 Get Active Categories - Server Action

Lecture 136 Get Active Categories - Component Logic

Lecture 137 Get Popular Posts - Server Action

Lecture 138 Get Popular Posts - Component Logic

Section 17: Home Page

Lecture 139 Hero Section

Lecture 140 Hero Section

Lecture 141 Featured Post Section

Lecture 142 Featured Post Layout 1

Lecture 143 Featured Post Layout 2

Lecture 144 Recent Post Section

Lecture 145 Single Post Component

Section 18: Post Page

Lecture 146 Create Posts Page and Component

Lecture 147 Header Search

Lecture 148 Create PostDetails Component

Lecture 149 Get Active Promo and Count Promo Clicks - Server Action

Lecture 150 Post Details Layout

Lecture 151 Post Content - Part 1

Lecture 152 Post Content - Part 2 - Display Promo

Lecture 153 Post Content - Part 3

Lecture 154 Add DisQus Comments to blog posts

Lecture 155 Protect Comment Section From Suspended Users

Lecture 156 Featured Post Sidebar

Lecture 157 Categories Sidebar

Lecture 158 Popular Post Sidebar

Lecture 159 Blog Metadata

Lecture 160 Categories Page

Section 19: Conclusion

Lecture 161 Conclusion

React developers who want to master NextJS