Mô tả

Don't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects!

This course uses the pages router but is currently going through an update to use the Next JS 14 and the app router. Expected release date is November / December 2023. Thank you for your patience.

Welcome to the exciting world of AI-powered, next-generation, Next JS apps!

In this course we will create a fictional Software-As-A-Service (SAAS) product called "BlogStandard". We'll build "BlogStandard" using a combination of Next.js, OpenAI's GPT, MongoDB, Auth0, Stripe, and Tailwind CSS. BlogStandard allows users to create an account (handled by auth0), purchase tokens (handled by stripe), and spend those tokens to generate blog posts, powered by OpenAI's GPT API. User's tokens and generated blog posts will be stored using MongoDB.

In this comprehensive online course, you'll learn how to harness the power of these cutting-edge technologies to build a fast, responsive, and dynamic web application that generates high-quality blog posts using AI. With step-by-step guidance, you'll gain hands-on experience working with each of these technologies to bring your vision to life.

First, we'll dive into Next.js, a popular framework for building web applications. You'll learn how to create fast and responsive pages, manage routing, and integrate APIs to build a powerful and dynamic web application.

Next, we'll explore OpenAI's GPT, the state-of-the-art language generation model, and learn how to use it to generate high-quality blog posts. You'll also discover how to integrate MongoDB, a scalable and flexible NoSQL database, to store and manage data for our application.

In addition, you'll learn how to use Auth0, a powerful identity management platform, to handle user authentication and authorization, and Stripe, a leading payment processor, to handle transactions and payment processing. Finally, you'll learn how to use Tailwind CSS, a modern CSS framework, to style and design your application, bringing your vision to life.

By the end of this course, you'll have the skills and knowledge you need to build your own AI-powered app and unleash the full potential of AI in your web development projects. So what are you waiting for? Join now and start your journey to the exciting world of AI-powered Next JS apps!

Bạn sẽ học được gì

Build your own SAAS products powered by AI and Next JS

Use OpenAI's GPT to implement AI generated content in your apps

Authenticate your Next JS apps with Auth0

Style your Next JS apps with Tailwind CSS

Store data for your Next JS apps with MongoDB

Charge customers using stripe

Yêu cầu

  • Basic understanding of React is required - everything else is covered!

Nội dung khoá học

8 sections

Introduction & project setup

5 lectures
Important! Read this before you begin the course! (Github repo etc)
00:56
Course intro & project demo
03:24
Project setup
04:13
Udemy ratings and reviews
00:38
Set up all required routes for our app
05:28

Authentication & authorization with Auth0

3 lectures
Set up auth0 for authentication
07:48
Set the auth state & user information if logged in
09:25
Implement protected routes that are only accessible if logged in
04:21

Creating the app layout with Tailwind CSS

6 lectures
Create the basic AppLayout component
05:31
Implementing the sidebar & styling with Tailwind CSS
09:31
Implementing the sidebar footer
05:09
Create the sidebar header & roll out the AppLayout for all relevant pages
08:28
Create the app logo component using Google Fonts & FontAwesome
08:43
Create the homepage / main landing page, and finish off the sidebar header
07:56

Generate blog posts with OpenAI's GPT API and store in MongoDB

12 lectures
ISSUES WITH OPENAI
01:42
Setting up our project to work with GPT
11:46
Refine the OpenAI prompt and render the results
09:09
Pass topic and keywords to the generatePost API endpoint
07:53
UPDATE: Using the gpt-3.5-turbo model
15:55
Set up MongoDB
04:53
Implement add tokens functionality and store in MongoDB
10:27
Save generated post data to MongoDB
10:00
Load the post data for a particular post page
07:54
Auto-navigate to a post after it's generated
06:01
Render the post content for a particular post page
11:45
Render list of available posts in the sidebar
15:17

Implementing stripe payments

2 lectures
Set up stripe
12:41
Implement stripe webhooks
14:50

Styling updates, fixes, and data validation

3 lectures
Fix Font Awesome flash of massive icon on load in production
01:42
Styling updates & loading icon
09:26
Validating form data when generating new posts
08:21

Implement "load more posts" and delete post

8 lectures
Create posts context and retrieve first 5 posts
11:49
Create getPosts endpoint
12:23
Hide "load more posts" button and fix disappearing posts in sidebar
03:51
Fix posts in sidebar on initial post load
06:41
Create deletePost endpoint
04:33
Create delete post UI & call deletePost endpoint
08:23
Delete post from sidebar
03:42
Refactor posts context to use reducer instead of state
06:20

Deploy

2 lectures
Deploy on DigitalOcean
11:47
BONUS!
00:52

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.