Mô tả

Embark on a journey to mastering modern web development with our comprehensive video course on building applications using Next JS 14 and the OpenAI API. This course is meticulously designed for beginners and intermediate developers who are keen to elevate their skills. You'll start from the ground up by learning how to create a new Next.js app, understand its files and folders structure, and explore the intricacies of routing including link components, nested routes, and dynamic routes.

Immerse yourself in front-end design with TailwindCSS and DaisyUI, and learn to craft responsive layouts, manage themes, and create a unified look for your entire app with layout components. Dive into the backend mechanics with server vs client components, fetching data in server components, handling loading and errors gracefully, and implementing nested layouts

Discover how to enhance your app's functionality with CRUD operations using Server Actions, manage user interactions, and validate data using the Zod library. You'll also learn to integrate a database by hosting with Planetscale and add essential features like authentication with CLERK Service.

By the end of this course, you'll be adept at deploying your NextJS application on Vercel, setting up and toggling themes with DaisyUI, and enriching your app with powerful APIs from OpenAI and Unsplash. Learn how to send prompts, receive responses, and even generate images within your application.

With a hands-on approach, tackle numerous challenges throughout the course to immediately apply your newfound knowledge. This is not just a tutorial; it's a transformative learning experience that will arm you with the tools and confidence to build cutting-edge web applications.

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

Build modern Next JS applications

Authenticate your Next JS applications with Clerk

Store data in database with Prisma and PlanetScale

Use OpenAI API in your Next JS Applications

Yêu cầu

  • Knowledge of React

Nội dung khoá học

4 sections

Next.js 14 Tutorial

53 lectures
Course Resources
00:07
Introduction to Next.js
01:07
Tutorial Overview
01:59
Create New Next.js App
01:58
Files and Folder Structure
01:46
Home Page
04:34
More Pages
01:51
Link Component
02:00
Nested Routes
01:51
Fundamentals Quiz
3 questions
First Challenge
03:08
CSS
02:30
TailwindCSS
09:31
DaisyUI
09:48
Layout File
04:03
Navbar Challenge
09:37
Server Component VS Client Component
02:06
Counter Challenge
07:37
Fetch Data
04:31
Loading Component
03:58
Error Component
04:59
Nested Layouts
03:08
Dynamic Routes
03:19
Drinks List - Challenge
05:07
Single Drink - Challenge
06:16
Static Images
05:15
Remote Images
05:51
Responsive Images
04:31
More Routing
06:18
Prisma Setup
05:38
Prisma Model
04:37
Prisma CRUD
09:31
Display Tasks - Challenge
10:43
Server Actions - Info
02:13
First Server Action
08:14
Refactor App
03:12
Delete Task
05:09
Edit Task - Setup
04:50
Edit Task - Complete
09:39
Pending State
05:39
Error Checking
05:37
Zod Library
02:56
Providers
05:40
Delete Button - Challenge
03:27
Route Handlers - Info
02:34
Route Handlers - GET
06:02
Route Handlers - POST
04:26
Middleware
05:23
Render (optional)
02:18
PlanetScale
05:46
Local Build
06:24
Force Dynamic
05:06
Deploy
06:24

GPTGenius App

51 lectures
Intro
03:30
New App
01:33
Libraries
02:17
First Pages
04:13
Home Page
05:07
Clerk Setup
11:00
Custom Auth Pages
07:14
React Icons
01:56
Dashboard Layout
08:40
Sidebar
04:29
Sidebar Header
02:56
Nav Links
03:25
Member Profile
04:25
Theme Toggle
08:03
Boilerplate Overview
00:53
User Profile
01:23
React Hot Toast Library
02:56
Chat Structure
09:16
React Query - Info
06:26
React Query - Setup
09:15
OpenAI - Pricing
03:58
OpenAI - Playground
06:56
OpenAI - Docs
03:20
First Prompt
06:25
Context
08:59
Display Messages
07:32
New Tour - Setup
02:04
New Tour - Form
06:18
New Tour - React Query
07:43
Tour Prompt
05:46
Generate Tour Response
05:05
Tour Info
02:17
PlanetScale
02:33
Tour Model
04:22
Save Tour
06:53
Timeout Info
02:24
GetAllTours Function
03:12
Tours Page - Setup
03:03
Tours List
07:14
Search Functionality
06:47
Single Tour Page
05:13
Generate Image
08:38
Unsplash API
04:37
Custom Pages - Bug/Fix
02:49
Tokens - Intro
02:45
Max Tokens
02:35
Token Actions
10:11
Display Tokens
05:32
Tours Logic
06:57
Chat Logic
04:43
Deploy
04:26

Jobify

43 lectures
Intro
05:02
Setup
03:40
Shadcn-ui
11:33
Shadcn-ui API
07:20
Layout and Homepage
10:33
Create Pages
04:13
Clerk Auth
03:26
Nav Links
04:48
Dashboard Layout
09:18
Sidebar
05:57
Navbar
03:40
Dropdown Links
07:30
Change Theme
03:28
Toggle Theme
08:14
Shadcn-ui Forms
11:14
Types
07:09
Custom Form Components
12:06
CreateJobForm Continued
10:34
Render and Prisma
06:26
CreateJobAction
11:56
Toast Component
01:37
React Query - Setup
04:32
CreateJobForm - Complete
09:03
GetAllJobsAction - Overview
06:15
GetAllJobsAction
08:02
Jobs Page - Setup
06:51
SearchForm Component - Setup
08:16
SearchForm Component - Functionality
07:04
JobsList Component
07:50
Additional Shadcn-UI Components
01:58
JobCard Component
05:29
JobInfo Component
05:12
Delete Job
05:58
Single Job Page
05:57
EditJobForm Component
07:35
Seed Database
10:18
Stats Action
07:04
Charts Actions
06:17
Stats Container
06:34
Loading Skeleton
05:48
Charts Container
03:35
Button Component
15:19
Complex Button Component
13:33

Bonus

1 lectures
Bonus
00:11

Đá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.