• Post category:StudyBullet-14
  • Reading time:8 mins read


AI Image & Tweet Generation, Chatbot, Chat App, Next.JS SEO – Portfolio Site, Vercel (Build everything from scratch)

What you will learn

Using Open AI Models for Image, Tweet & ChatBot Generation

NextJS SEO & LightHouse Performance Optimization

Deploy NextJS/ReactJS App to Live

Setup CD/CI Pipeline on GitHub

Converting Template to NextJS Website

Fetch & Axios: To send HTTP Requests

+BONUS: JavaScript Refresher

+BONUS: Handling CSV Files in ReactJS

Description

What is this course about?

In this course, you will build four brand new NextJS hands-on projects, including a RealTime Group Chat, AI Tweet Generator, Chatbot, AI Image Generator, and a Portfolio site. You’ll learn how to integrate OpenAI into your applications, which will allow you to build real-world applications faster and more efficiently.

Why is this course different?

– While there are plenty of courses on Udemy that teach you about authentication, routing, and basics of Next.JS and ReactJS, this course offers a unique approach by introducing you to OpenAI and demonstrating how to integrate it into your applications.

– If you are someone who has recently started learning front-end development using ReactJS or NextJS then this course is definitely for you!

– In case you want to add some projects to your portfolio as a Beginner then onboard with me on this exciting course where you’ll get introduced to the most popular concept of real-time communication, OpenAI and at the end of the course you’ll learn how to create a portfolio site and deploy it to production.

How will you get benefit after you join?

By joining this course, you will have access to free updates and new projects with exciting features that will be added over time. At the end of the course, you will have four projects in your portfolio, including a Real-Time chat application and three AI-based applications. You will also learn how to create a portfolio website and deploy your apps using Vercel for free.

Who is this course for?

– This brand new course is ideal for university/college students or beginner level front-end developers looking to build their portfolio and gain confidence.

– If you have tried learning ReactJS and NextJS but have not yet gained the confidence to build real-world applications, this course is perfect for you.

What will you learn?


Get Instant Notification of New Courses on our Telegram channel.


In each project, you will learn how to implement different features such as real-time communication, AI-based functionality, and how to deploy your app to production. Each project builds on the previous one, and you will gain experience and confidence with each new project.

What will you gain at the end of this course?

– 5 Projects with a Real-Time chat application and 3 AI based Applications in your portfolio.

– Portfolio website to showcase your work to recruiters and companies worldwide.

– Finally, you are going to learn how to deploy your apps using vercel for FREE.

About me:

My name is Tofiq, I’m the Founder of DevelopersHive and have over a decade of experience in Software Engineering and Training. I will be your instructor and answer any questions you may have in the Q&A section

Course Structure:

Each project can be completed in any order, and you will have access to all course materials from the beginning. As you progress through each project, you will gain the knowledge and experience needed to complete the final project, which is the portfolio site.

Certificate:

Upon successfully completing this course, you will receive a certificate that acknowledges your consistency and hard work throughout the course.

Join me on this exciting journey to learn NextJS with OpenAI and build real-world applications!

English
language

Content

Getting Started

Course Introduction
Join our Online Learning Community
What we will Build in this NextJS/ReactJS Course?
Who is this Course for?
How can you derive most value out of this course?
OpenAI API Pricing and Free Trial Credits

JavaScript Refresher (Optional)

Spread Operator
Destructuring Expressions in Javascript
ES6 Arrow Function

Setup Development Environment

Installing NodeJS
NodeJS Resources
Installing Visual Studio Code
VS Code Resources

Realtime Group Chat Application

Creating a New NextJS Project
Setting Up Project Structure
Installing Bootstrap in NextJS
Installing Socket.io for WebSocket
Setting Up Server
Setting Up Client
Creating a User To Join Room
Building Chat UI Components
Creating a Chat Room
Socket.io Events Documentation
Sending Messages In Room
Cleaning up Socket.io & UI Enhancement
Resources
Now what can you do next?

AI based Chatbot in ReactJS

Creating a New ReactJS Project
Getting OpenAI API Key
Important Reminder
Implementing Chatbot UI
Setting Up API for Chatbot request
Resources

Twitter Next Tweet Generator

Axios: Introduction and Installation
UI Implementation for Tweet Generator
Using AI to Generate Next Tweet
Resources

Generate Image Based on Instructions using AI

UI Implementation for Command and Image
API Implementation for Image Generator
Resources

Building a Portfolio Website

Portfolio Resource
Implementing Portfolio Website in NextJS
Optimizing Performance of Our NextJS Application
Resources

Deploying NextJS Applciation

Resources
Publishing Code on GitHub for CD/CI
Deploying Website to Live