NextJS & OpenAI - 2024 Edition

13h 41m 21s
English
Paid
August 2, 2024

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.

Watch Online NextJS & OpenAI - 2024 Edition

Join premium to watch
Go to premium
# Title Duration
1 Introduction to Next.js 01:08
2 Tutorial Overview 02:00
3 Create New Next.js App 01:59
4 Files and Folder Structure 01:47
5 Home Page 04:35
6 More Pages 01:52
7 Link Component 02:02
8 Nested Routes 01:53
9 First Challenge 03:09
10 CSS 02:31
11 TailwindCSS 09:32
12 DaisyUI 09:49
13 Layout File 04:05
14 Navbar Challenge 09:38
15 Server Component VS Client Component 02:08
16 Counter Challenge 07:38
17 Fetch Data 04:32
18 Loading Component 03:59
19 Error Component 05:00
20 Nested Layouts 03:09
21 Dynamic Routes 03:20
22 Drinks List - Challenge 05:08
23 Single Drink - Challenge 06:17
24 Static Images 05:16
25 Remote Images 05:52
26 Responsive Images 04:32
27 More Routing 06:20
28 Prisma Setup 05:39
29 Prisma Model 04:38
30 Prisma CRUD 09:32
31 Display Tasks - Challenge 10:44
32 Server Actions - Info 02:14
33 First Server Action 08:15
34 Refactor App 03:13
35 Delete Task 05:10
36 Edit Task - Setup 04:51
37 Edit Task - Complete 09:40
38 Pending State 05:41
39 Error Checking 05:38
40 Zod Library 02:57
41 Providers 05:42
42 Delete Button - Challenge 03:29
43 Route Handlers - Info 02:35
44 Route Handlers - GET 06:04
45 Route Handlers - POST 04:27
46 Middleware 05:24
47 Render (optional) 02:19
48 PlanetScale 05:47
49 Local Build 06:25
50 Force Dynamic 05:08
51 Deploy 06:25
52 Intro 03:31
53 New App 01:34
54 Libraries 02:18
55 First Pages 04:14
56 Home Page 05:09
57 Clerk Setup 11:01
58 Custom Auth Pages 07:16
59 React Icons 01:57
60 Dashboard Layout 08:41
61 Sidebar 04:31
62 Sidebar Header 02:57
63 Nav Links 03:26
64 Member Profile 04:26
65 Theme Toggle 08:04
66 Boilerplate Overview 00:54
67 User Profile 01:24
68 React Hot Toast Library 02:57
69 Chat Structure 09:17
70 React Query - Info 06:27
71 React Query - Setup 09:16
72 OpenAI - Pricing 03:59
73 OpenAI - Playground 06:57
74 OpenAI - Docs 03:21
75 First Prompt 06:26
76 Context 09:00
77 Display Messages 07:33
78 New Tour - Setup 02:05
79 New Tour - Form 06:19
80 New Tour - React Query 07:44
81 Tour Prompt 05:47
82 Generate Tour Response 05:06
83 Tour Info 02:18
84 PlanetScale 02:34
85 Tour Model 04:23
86 Save Tour 06:54
87 Timeout Info 02:25
88 GetAllTours Function 03:13
89 Tours Page - Setup 03:04
90 Tours List 07:15
91 Search Functionality 06:48
92 Single Tour Page 05:15
93 Generate Image 08:39
94 Unsplash API 04:38
95 Custom Pages - Bug/Fix 02:50
96 Tokens - Intro 02:46
97 Max Tokens 02:36
98 Token Actions 10:12
99 Display Tokens 05:33
100 Tours Logic 06:58
101 Chat Logic 04:44
102 Deploy 04:27
103 Intro 05:03
104 Setup 03:41
105 Shadcn-ui 11:34
106 Shadcn-ui API 07:22
107 Layout and Homepage 10:34
108 Create Pages 04:14
109 Clerk Auth 03:27
110 Nav Links 04:49
111 Dashboard Layout 09:19
112 Sidebar 05:58
113 Navbar 03:41
114 Dropdown Links 07:31
115 Change Theme 03:29
116 Toggle Theme 08:16
117 Shadcn-ui Forms 11:15
118 Types 07:10
119 Custom Form Components 12:07
120 CreateJobForm Continued 10:36
121 Render and Prisma 06:27
122 CreateJobAction 11:57
123 Toast Component 01:38
124 React Query - Setup 04:33
125 CreateJobForm - Complete 09:05
126 GetAllJobsAction - Overview 06:16
127 GetAllJobsAction 08:03
128 Jobs Page - Setup 06:52
129 SearchForm Component - Setup 08:17
130 SearchForm Component - Functionality 07:05
131 JobsList Component 07:51
132 Additional Shadcn-UI Components 01:59
133 JobCard Component 05:30
134 JobInfo Component 05:14
135 Delete Job 06:00
136 Single Job Page 05:58
137 EditJobForm Component 07:36
138 Seed Database 10:19
139 Stats Action 07:05
140 Charts Actions 06:18
141 Stats Container 06:36
142 Loading Skeleton 05:49
143 Charts Container 03:36
144 Button Component 15:20
145 Complex Button Component 13:34

Similar courses to NextJS & OpenAI - 2024 Edition

Next.js - The Full Course

Next.js - The Full Coursefireship.io

Duration 1 hour 14 minutes 14 seconds
Next JS: The Complete Developer's Guide

Next JS: The Complete Developer's GuideudemyStephen Grider

Duration 15 hours 35 minutes 12 seconds
The Joy of React

The Joy of ReactJosh Comeau

Duration 25 hours 35 minutes 33 seconds
Build an LMS Platform

Build an LMS PlatformCode With Antonio

Duration 10 hours 41 minutes 23 seconds