Next JS & Open AI / GPT: Next-generation Next JS & AI apps
Course description
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
| # | 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 |
Comments
0 commentsSimilar courses
Next.js From Scratch 2024
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress
React Node AWS - Build infinitely Scaling MERN Stack App
NextJS & OpenAI - 2024 Edition
Want to join the conversation?
Sign in to comment