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

Next JS & OpenAI GPT3.5: Build an SEO-friendly blog post gen app with auth0, GPT, stripe payments, tailwind, & MongoDB

4.67 (194 reviews)
Udemy
platform
English
language
Web Development
category
Tom Phillips
instructor
Next JS & Open AI / GPT: Next-generation Next JS & AI apps
1,681
students
5 hours
content
Jun 2023
last update
$74.99
regular price

What you will learn

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

Description

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

** PLEASE NOTE - The Next JS app directory is NOT used in this course, but the course WILL be updated to use the app directory once all libs support it **

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!

Content

Introduction & project setup

Important! Read this before you begin the course!
Course intro & project demo
Project setup
Udemy ratings and reviews
Set up all required routes for our app

Authentication & authorization with Auth0

Set up auth0 for authentication
Set the auth state & user information if logged in
Implement protected routes that are only accessible if logged in

Creating the app layout with Tailwind CSS

Create the basic AppLayout component
Implementing the sidebar & styling with Tailwind CSS
Implementing the sidebar footer
Create the sidebar header & roll out the AppLayout for all relevant pages
Create the app logo component using Google Fonts & FontAwesome
Create the homepage / main landing page, and finish off the sidebar header

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

Setting up our project to work with GPT
Refine the OpenAI prompt and render the results
Pass topic and keywords to the generatePost API endpoint
Set up MongoDB
Implement add tokens functionality and store in MongoDB
Save generated post data to MongoDB
Load the post data for a particular post page
Auto-navigate to a post after it's generated
Render the post content for a particular post page
Render list of available posts in the sidebar

Implementing stripe payments

Set up stripe
Implement stripe webhooks

Styling updates, fixes, and data validation

Fix Font Awesome flash of massive icon on load in production
Styling updates & loading icon
Validating form data when generating new posts

Implement "load more posts" and delete post

Create posts context and retrieve first 5 posts
Create getPosts endpoint
Hide "load more posts" button and fix disappearing posts in sidebar
Fix posts in sidebar on initial post load
Create deletePost endpoint
Create delete post UI & call deletePost endpoint
Delete post from sidebar
Refactor posts context to use reducer instead of state

Deploy

Deploy on DigitalOcean
BONUS!

Reviews

Henry
March 7, 2023
awesome course! I like how this course is short yet still covers everything you need to build a fullstack application.
Anthony
March 7, 2023
This course covers a wide range of topics, from setting up a Next.js application to creating responsive UI designs using Tailwind CSS. The course also includes a section on integrating an OpenAI chatbot into a Next.js application, which is a valuable skill for building modern web applications. The instructor provides clear and concise explanations of each topic, and the course includes numerous hands-on exercises and projects to reinforce learning. The production quality of the course is excellent, with high-quality videos and well-organized course materials. Overall, I highly recommend this Udemy course for anyone interested in learning Next.js, Tailwind CSS, and OpenAI Chatbot development. The course provides a solid foundation for building modern web applications with these technologies and is well worth the investment.
Philip
March 7, 2023
Outstanding course. One of the best code-along courses I've taken. A useful introduction to Next.js, OpenAPI, Stripe and MongoDB.
Miguel
March 5, 2023
I want to take a moment to express my gratitude to Tom for his amazing skills as a teacher. His passion for the subject and his ability to explain complex concepts in a way that is easy to understand have made a significant impact on my learning journey. His dedication to helping his students succeed is truly inspiring, and I feel fortunate to have had the opportunity to learn from him. Thank you for your commitment to your students and for sharing your knowledge with us!"
Terry
March 5, 2023
Fantastic course, with easily digestible, short videos and plenty of explanations and a very attentive/responsive instructor.
Milo
February 22, 2023
One of the best "real world / practical" courses I have followed on this platform. Everything is well explained even if you are not used to nextjs, and the instructor is very reactive in the Q and A section, he takes time to answer all questions about the course posted by students. If you want to touch the Openai API and have an idea about launching a SaaS project, invest in this course it is worth it!
Claudio
February 20, 2023
I was looking for a course on GPT-3, but this one taught me so much of building a full product. It is way more than I was expecting.
Jejomar
February 19, 2023
Tom is very clear on his explanations and is very quick to reply on questions posted in the Q&A. Looking for more tutorials from this guy even though I'm only halfway through this course. :)
Carol
February 14, 2023
Another great course thanks Tom. So much info packed in 4 hours and having AI so accessible now is mind blowing

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

MongoDB
Next.js
Tailwind CSS
Comidoc
Comidoc

Want FREE online courses ? Our CHROME extension lists Udemy freebies in realtime !

Free
Comidoc
Comidoc

Want FREE online courses ? Our CHROME extension lists Udemy freebies in realtime !

Free
4941480
udemy ID
10/23/2022
course created date
2/22/2023
course indexed date
Bot
course submited by