Mô tả

Start your path to becoming a proficient web developer with our detailed video course on building apps using Next JS 14. Designed specifically for beginners and intermediate developers, this course will help you develop high-level skills. Begin by creating a Next.js application from scratch, understanding its structure, and mastering advanced routing techniques, including link components and dynamic paths.

Delve into front-end design using TailwindCSS and Shadcn/ui, mastering responsive design, theme management, and consistent styling with layout components. Learn the fundamentals of backend development, including the distinctions between server and client components, how to fetch data, manage loading states, and implement error handling along with nested layouts.

Enhance your app with CRUD functionalities through Server Actions, improve user interaction, and ensure data integrity with the Zod library. You will also integrate a database using Supabase, handle image uploads, and implement crucial functionalities like authentication with CLERK Service.

Conclude the course with the skills to deploy your NextJS app on Vercel, and incorporate features such as prompt handling, response management, and image generation.

This course offers a practical approach, including numerous challenges to apply what you've learned. Transform your web development skills and gain the confidence to create sophisticated web applications.

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

Build modern Next JS applications

Authenticate your Next JS applications with Clerk

Build components with Shadcn/ui

Store data in database with Prisma and Supabase

Store Images in database

Work with server actions

Yêu cầu

  • Knowledge of React

Nội dung khoá học

6 sections

Introduction

2 lectures
Useful Info
02:12
Github Repo
00:03

Next.js Tutorial

43 lectures
Important Info !!!
00:44
Install
01:14
Files and Folders
03:24
Home Page
02:57
Create Pages
02:37
Link Component
02:05
Nested Routes
02:20
CSS
01:11
Tailwind Info (optional)
09:34
Layout Component
04:22
Navbar Component
04:08
Fonts
03:50
Metadata
02:21
Server vs Client
02:06
Counter
07:05
Fetch Data
06:23
Refactor
02:34
Loading Component
03:39
Error Component
02:57
Nested Layout
03:25
Dynamic Page
06:24
Local Image
07:38
Remote Images
05:43
Responsive Images
07:30
More Routing Options
07:41
Server Actions - Info
04:26
Actions Page - Setup
09:05
Actions File
06:06
Save User
08:20
Fetch Users
03:08
Revalidate Cache and Redirect
05:37
UseFormStatus Hook
06:32
UseFormState Hook
08:18
Delete Button
02:42
Input Hidden
04:21
Bind Method
04:57
Route Handlers - Info
02:34
Route Handler - GET
06:25
Route Handlers - Params
06:45
Route Handlers - POST
06:40
Middleware
06:22
Local Build
03:50
Cache
05:36

HomeAway Project

88 lectures
Project Overview
12:24
Install New Next.js Application
01:40
Remove Boilerplate
02:08
Create Pages
04:37
Install Shadcn/ui Library
03:18
Shadcn/ui Button Component
08:15
Install More Shadcn/ui Components
04:04
Navbar Structure
06:10
Logo and NavSearch Components
04:01
Change Theme with Shadcn/ui
03:30
Setup Dark Mode with Shadcn/ui
09:09
LinksDropdown Component
10:11
Setup and Customize Clerk Auth Provider
10:01
SignOutLink Component
03:55
LinksDropdown Component
05:05
Create Profile - Setup
09:12
FormInput Component
04:47
SubmitButton Component
05:23
FormContainer Component
08:19
Refactor Create Profile
07:19
Zod Library
11:59
Supabase Setup
04:49
Prisma Setup
03:57
Connect Prisma and Supabase
07:11
Prisma Crud Examples
03:35
Create Profile Model and createProfileAction
15:12
Fetch Profile Image Action
06:13
Modify Create Profile Page
05:56
Fetch User Profile
08:50
Update Profile Page
08:30
Zod SafeParse Method
05:51
ValidateWithZodSchema - Helper Function
04:59
Image Input
04:38
Image Input Container
15:39
Image Zod Validation
09:08
Supabase Bucket and Keys
03:40
Supabase Upload Image
07:04
Update Profile Image Action - Complete
04:29
Property Schema
06:01
Create Property Page - Setup
11:46
Price Input
06:04
Categories Input
09:18
Description Input
04:48
Countries Input
08:50
Counter Input
12:40
Amenities Input
12:33
Create Property
08:08
Fetch Properties
09:42
Home Page - Setup
06:02
Categories List
09:09
Empty List
03:16
Properties Container
04:01
PropertyCard - Setup
03:44
PropertyCard - Structure
12:08
Property Rating
05:50
Favorites Toggle Button
02:31
Country Name and Flag
03:52
Loading Cards
06:34
NavSearch Component
12:32
Favorites SignIn Button
08:09
Fetch Favorite
06:07
Favorites Toggle Form
08:42
Toggle Favorites - Functionality
05:36
Favorites Page
07:31
Property Details Page - Setup
07:26
Breadcrumbs Component
06:03
Share Button Component
09:20
Image Container Component
06:09
Calendar Component
04:57
Property Details Component
04:17
UserInfo Component
05:32
Description Component
08:26
Amenities Component
05:44
Property Map Component
08:54
Deploy Application on Vercel
12:04
Reviews Model
05:48
RatingInput Component
06:01
SubmitReviews Component
08:14
SubmitReview Functionality
06:53
Fetch Reviews
02:07
Render Reviews
04:59
ReviewCard Component
15:17
Fetch and Delete User Reviews
04:47
IconButton Component
05:31
Reviews Page
07:19
Reviews Loading Component
03:39
PropertyRating Component - Complete
05:36
Allow Review
11:20

Booking

14 lectures
Booking Model
05:00
Booking Components
06:16
Zustand Library
09:12
Booking Container / Calendar - Initial Setup
10:13
Calculate Totals
08:46
Booking Form
09:07
Confirm Booking Component
07:49
Create Booking Action
06:05
Blocked Periods
08:06
Disabled Dates
10:12
Fetch Bookings and Delete Booking
06:00
Bookings Page
11:13
Delete Booking
03:19
Loading Table Component
03:39

Entire App

21 lectures
Fetch and Delete Rentals Functions
09:50
Rentals Page
13:35
Fetch Rental Details Function
03:20
Edit Rentals Page
12:18
Amenities Input Gotcha
06:03
Update Rental Functions
09:17
Reservation Page - Setup
03:26
Fetch Reservations
02:34
Reservations Page - Complete
08:34
Admin Page - Setup
02:54
Admin Page - Middleware
10:37
Admin Page - Loading Components
05:44
Admin Page - Stats Container
09:28
Admin Page - Fetch Chart Data
09:51
Admin Page - Chart Container
07:55
Stripe - Setup
07:01
Stripe - Checkout Page
05:38
Stripe - Payment Route
13:53
Stripe - Confirm Route
08:19
Stripe - Refactor Queries
06:13
Reservations Stats
08:04

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.