Next JS & Open AI / GPT: Next-generation Next JS & AI apps

5h 8m 46s
English
Paid

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

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!

Watch Online Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Join premium to watch
Go to premium
# Title Duration
1 Course intro & project demo 03:25
2 Project setup 04:14
3 Udemy ratings and reviews 00:39
4 Set up all required routes for our app 05:29
5 Set up auth0 for authentication 07:49
6 Set the auth state & user information if logged in 09:26
7 Implement protected routes that are only accessible if logged in 04:22
8 Create the basic AppLayout component 05:32
9 Implementing the sidebar & styling with Tailwind CSS 09:32
10 Implementing the sidebar footer 05:10
11 Create the sidebar header & roll out the AppLayout for all relevant pages 08:29
12 Create the app logo component using Google Fonts & FontAwesome 08:44
13 Create the homepage / main landing page, and finish off the sidebar header 07:57
14 Setting up our project to work with GPT 11:47
15 Refine the OpenAI prompt and render the results 09:10
16 Pass topic and keywords to the generatePost API endpoint 07:54
17 UPDATE: Using the gpt-3.5-turbo model 15:57
18 Set up MongoDB 04:54
19 Implement add tokens functionality and store in MongoDB 10:28
20 Save generated post data to MongoDB 10:01
21 Load the post data for a particular post page 07:55
22 Auto-navigate to a post after it's generated 06:02
23 Render the post content for a particular post page 11:47
24 Render list of available posts in the sidebar 15:18
25 Set up stripe 12:42
26 Implement stripe webhooks 14:51
27 Fix Font Awesome flash of massive icon on load in production 01:43
28 Styling updates & loading icon 09:28
29 Validating form data when generating new posts 08:22
30 Create posts context and retrieve first 5 posts 11:51
31 Create getPosts endpoint 12:24
32 Hide "load more posts" button and fix disappearing posts in sidebar 03:52
33 Fix posts in sidebar on initial post load 06:42
34 Create deletePost endpoint 04:34
35 Create delete post UI & call deletePost endpoint 08:24
36 Delete post from sidebar 03:43
37 Refactor posts context to use reducer instead of state 06:21
38 Deploy on DigitalOcean 11:48

Similar courses to Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Next.js 14 Real-Time Chat App using Socket IO

Next.js 14 Real-Time Chat App using Socket IOudemy

Category: Next.js, Socket.IO
Duration 12 hours 22 minutes 25 seconds
ChatGPT - The Complete Guide

ChatGPT - The Complete GuideAcademind Pro

Category: ChatGPT
Duration 15 hours 37 minutes 58 seconds
Building a Full-stack Multilingual Blog with Next.js 13.4

Building a Full-stack Multilingual Blog with Next.js 13.4udemy

Category: Next.js
Duration 9 hours 15 minutes 4 seconds
Magic UI Pro

Magic UI ProDillion Verma

Category: React.js, Next.js, Other (Mobile Apps Development)
Duration
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejsudemy

Category: React.js, Next.js, Node.js, MongoDB, Socket.IO
Duration 13 hours 2 minutes 12 seconds
Build A Finance Platform

Build A Finance PlatformCode With Antonio

Category: Next.js
Duration 13 hours 43 minutes 45 seconds
ChatGPT Masterclass: A Complete ChatGPT Guide for Beginners!

ChatGPT Masterclass: A Complete ChatGPT Guide for Beginners!udemy

Category: ChatGPT
Duration 6 hours 59 minutes 26 seconds
Build a Youtube Clone

Build a Youtube CloneCode With Antonio

Category: React.js, Next.js
Duration 23 hours 42 minutes 10 seconds
The Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds
Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)udemy

Category: React.js, Next.js
Duration 13 hours 5 minutes 9 seconds