NextJS & OpenAI - 2024 Edition
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
# | 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 |