This course, "Mastering Next.js:Build an Airbnb Clone from Scratch (2024)," grants you the power to become a professional web developer by building a website like Airbnb. Great for both beginners and developers with some experience, this course is a fast lane to quickly creating elegant web applications.
"Next.js streamlines the development of React applications by providing a batteries-included approach to features like routing, image optimization, and API routes."
— Lee Robinson, developer advocate at Vercel.
We will slowly start building this Next.js application, getting to learn the structure and master cool tricks like dynamic routing. Then, we'll show you how to make your app look awesome using Tailwind CSS and Shadcn/UI, making it responsive for every device. You will also learn valuable info about the backend side, like data management and handling errors like a pro.
Easily add user authentication, database integration, and other essential features that help you take your app to the next level. Practical challenges peppered throughout are for you to learn and apply those skills. You will have all the knowledge at the end of "Mastering Next.js:Build an Airbnb Clone from Scratch (2024)" to deploy your masterpiece on Vercel and impress everyone with your functional web app creations.
"The hybrid approach of Next.js, combining static site generation with server-side rendering, offers developers flexibility and performance optimizations tailored to their needs."
— Cassidy Williams, senior developer experience engineer at Netlify.
Mastering Next.js:Build an Airbnb Clone from Scratch (2024) Table of Contents:
- Useful Info: 02:12
- Github Repo: 00:03
- 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
- Response 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
- Install New Next.js Application: 01:40
- Remove Boilerplate: 02:08
- Create Pages: 04:37
- Install Shadcn/ui Library: 03:18
- Install More Shadcn/ui Components: 04:04
- Shadcn/ui Button Component: 08:15
- 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:10
- 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
- Refactor Create Profile: 07:19
- FormContainer Component: 08: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:03
- 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:40
- Property Map Component: 08:54
- Deploy Application on Vercel: 12:04
Who is this course for?
- React developers who like to create full-stack applications with Next JS 14
Click on the links below to Download Mastering Next.js:Build an Airbnb Clone from Scratch (2024)!
You are replying to :