Mastering Next.js 14 - Build Airbnb Clone from Scratch

Learn Next.js 14 with a comprehensive TypeScript tutorial covering routing, server components, and server actions in detail, then proceed to a project without revisiting tutorial topics.

Bootstraps a brand new Next.js 14 project using npm create next app at latest, selecting TypeScript, ESLint, Tailwind, and app router, then opens the project in a code editor.

Explore the Next.js project structure, including the app folder, node_modules, public assets, gitignore, config files, and package.json scripts for dev, build, and start.

Scaffold the home page in Next.js 14 by creating a server component in a page tsx, applying tailwind css, exporting a default component, and previewing on localhost 3000.

Create pages in the Next.js app folder by adding a page.tsx inside a folder; the folder name becomes the page. Navigate to /about or /info to render it.

Learn to navigate between pages in a Next.js 14 project by importing the link component from next/link and using href to point to /about, with tailwind styling for the link.

Learn to build nested routes in Next.js 14 by creating a parent info route with a child contact page at info/contact, using page.tsx and noting 404 when parent is missing.

Discover how css integrates with Next.js 14 using Tailwind by default, with a preconfigured global css setup. Vanilla css remains an option, while upcoming videos focus on Tailwind classes.

Implement a route layout in Next.js 14 using a TSX file to wrap pages, share a common navigation, and pass the children prop, with globals.css imported and proper html structure.

Set up a basic client counter in Next.js 14 using useState, an increment button, and Tailwind, while learning to nest a client component inside a server component.

Fetch data on the server with a Next.js server component using TypeScript to load a tours array with id, name, info, image, price from a url and render seo-friendly html.

Learn how to implement a nested layout in Next.js 14 by creating a tours layout that wraps all pages under the tours route, renders children, and adds a shared header.

Create dynamic routes in Next.js 14 by using square-bracket ids in a nested tours path, access the url parameters, and render a placeholder page that displays the id.

Use the Next.js image component to render local and remote images, optimize size with width, height, and object cover, and preload with priority to avoid layout shifts.

Learn to render remote images in Next.js by supplying the remote URL, setting width and height, and configuring next.config.js with remote patterns to prevent layout shifts.

Learn to implement responsive images in a two-column tour grid using Next.js image with fill, object cover, and sizes prop to adapt image sizes across mobile and desktop.

Master Next.js 14 server actions by wiring form submissions to server-side code from both server and client components, using async actions, use server, and a dedicated actions file.

Move the create user logic into a dedicated server actions file and convert the form into a client component, then access form data with formData.get using a TypeScript type assertion.

Fetch users, map over them in a TypeScript Next.js app, display user first and last names, and save new users to a JSON file with an empty state message.

Create a delete button that passes a user id to a server action to remove the user from the users JSON in a Next.js 14 Airbnb clone.

Learn to implement Next.js route handlers by creating an api/ directory, exporting get and post functions that fetch and save users, returning json.

Explore route handlers for post requests in Next.js, receiving json with first name and last name, creating a user, and returning a confirmation response.

Install a new Next.js 14 app, configure TypeScript, ESLint, and Tailwind, enable the app router, and run the development server to see the Next.js welcome screen.

Create and organize pages for a Next.js 14 Airbnb clone, including bookings, checkout, favorites, profile, properties, rentals, and reviews, with public routes and a single property page.

Install the Shazza UI component library to speed up Next.js 14 development with accessible, reusable components. Explore the install steps, theme options, and importing components into JSX.

Install more shadcn/ui components and organize them into dedicated folders (card, form, home, nav bar, properties), then set up nav bar components and Tailwind custom classes for structure.

Build a navbar component in Next.js 14 using a custom tailwind container, integrating logo, nav search, dark mode, and a links dropdown to align navbar with page content.

Create the logo and nav search components for the navbar using react icons, npm i react-icons, and a text input with a home link and dark mode styling.

Create a providers tsx file, wrap the app with a next-themes theme provider, and implement a dark mode toggle using shadcn/ui components to switch light, dark, or system themes.

Set up the links dropdown in the navbar with a user icon, a trigger, and a links array from utils; prepare for Clark auth to show login or profile links.

Add authentication to a Next.js 14 app using Clark, wrapping the layout with the Clark provider, configuring env vars and dotenv, and protecting routes with middleware and sign-in with GitHub.

Set up a toaster provider, leverage the use toast hook, and implement a client sign-out button that logs out and redirects users to the home page.

Set up the create profile page in Next.js 14, configure sign-in and sign-up fallback redirects, and implement a server action to handle form data with reusable input components.

Create a reusable form input component in TypeScript for Next.js, encapsulating label and input with configurable name, type, label, default value, and placeholder; leverage dynamic props and optional label fallback.

Refactor the create profile page using reusable form components, with inputs for first name, last name, and username, wired to a local action and showing success or error messages.

Learn to use the zod library for form validation in a Next.js 14 project, defining profile schema for first name, last name, and username, and wiring a create profile action.

Set up your database with Prisma and connect to Postgres or MongoDB using Supabase, a type-safe hosting option, while exploring alternatives like render, planet scale, Atlas and env setup.

Install prisma and prisma client, run npx prisma init, and configure schema.prisma with a postgres database url. Create db.ts to reuse a single prisma instance and prepare for supabase connection.

Create a Prisma profile model with a UUID id, connect it to the Clerk user, and implement createProfileAction to persist the profile and update Clerk metadata, with redirect on success.

Extend create profile by converting to update-capable flow with default values and image upload. Redirect users who already have a profile to the home page and reuse the same schema.

Master Zod safe parse to validate fields, returning success and data or errors. Learn to handle errors with custom messages to guide users on first name, last name, and username.

Create a reusable update profile image component with a toggleable form and universal image input. Validate image size, save to a Supabase bucket, and update the profile model.

Build an image input container in a Next.js 14 app, using a form container, Next.js image, and an action prop to update the profile image.

Learn to implement a complete update profile image action in next.js with supabase, including get auth user, upload image, prisma update, path revalidation, and error handling.

Configure a Prisma property model and relate it to profiles, implement a large rental form with image upload, and display properties on the home page for favorites and bookings.

Set up a dedicated price input component for a number field named price, with a label and dollar value, supporting a default value and optional Prisma retrieval for the page.

Create a categories input using a readme-provided categories list with labels and icons from react-icons, wired into a select component with default values for create and edit.

Build a description input using the chassis text area, with label, name, default value, and five rows. Implement zod-based length validation and ensure required default description.

Integrate a country input in a Next.js 14 project using the World Countries package, format data, and build a select input with flag and name alongside an image input.

Implement a reusable counter input component for accommodation details (guests, bedrooms, beds, baths) as a client component using useState to prevent negatives, with a hidden input for form submission.

Create an amenities input with checkboxes from conservative or funny amenity lists, manage selected states, and a hidden input that stringifies selections for database storage in a Next.js Airbnb clone.

Create a property in a Next.js 14 Airbnb clone by validating form data with Zod, uploading image to a Supabase bucket, and saving the record linked to the user profile.

Create a home page with four components—categories list, empty list, properties container, and properties list—and learn to use URL search params to fetch properties while preserving category and search state.

Create a reusable empty list component for the properties container with customizable heading, message, and button text, typed in TypeScript, rendering a back home link using next/link and a button.

Develop a properties container that fetches properties by category and search, handles empty results with an empty list, and passes data to the properties list via type-safe props.

Build a Next.js property card with a currency formatter, image hover zoom, dynamic link to a property page, and a responsive grid for listing properties.

Create a reusable property rating component with property ID and in page flag, hardcode 4.7 rating and 100 reviews, adapt text size by context, and include a star icon.

Display a country flag and name in the final card component by using a country code, shortening names to 20 characters with an ellipsis, and rendering in a span.

Uses actions to fetch the user's favorite ID, determine if a property is in favorites, render the correct icon, and set up a reusable toggle for a client component.

Build a favorites toggle form for the Next.js 14 Airbnb clone, with a card submit button that toggles icons based on is favorite and shows a loading spinner during pending.

Implement toggle favorites to add or remove properties in the favorites list, using try-catch for database updates, user authentication, and revalidating routes to reflect changes.

Create a dynamic property details page that fetches details by id with profile data, shows a loading skeleton, and supports navigation, plus future map, booking, reviews, and share features.

Create a breadcrumbs component for a property page in a Next.js 14 Airbnb clone. Display the home link, the property name, and a header with a tagline and action buttons.

Create a share button component using chassis popover and react-share to enable Twitter, LinkedIn, and email sharing for properties, with a production-ready share link built from NEXT_PUBLIC_WEBSITE_URL.

Create an image container component in Next.js 14, display a responsive main image with alt text, and build a two-column layout with eight and four column sections including a calendar.

Build a property details component in Next.js 14, displaying bedrooms, bathrooms, guests, and beds with a reusable format quantity function; pass a details object via props.

Create a user info component UserInfo TSX in a Next.js 14 Airbnb clone that accepts a profile prop with first name and profile image, then render them in a grid.

Master a reusable description component in a Next.js 14 project by implementing a long text toggle, a reusable title component, and props defined with TypeScript using useState for interactive content.

Parse the amenities JSON string, map over the list to display only selected items with a generic icon and name in a responsive two-column grid.

Build an interactive property map component using react-leaflet and leaflet in Next.js, rendering on the client with a custom tile layer, marker icon, and a dynamic map with SSR disabled.

Define a Prisma reviews schema linked to profile and property, and build placeholder actions and components for creating, fetching, and deleting reviews on the property page.

Create a submit review flow by defining a create review schema, validating rating and comment, saving the review with the user profile, and refreshing property details page to display reviews.

Fetch and render property reviews using a two-column responsive grid, passing the property id and displaying each review's comment, rating, and user details via a review card.

Learn to fetch property ratings with Prisma, compute the average rating and count by property ID, and handle no reviews in the property rating component.

Learn to conditionally render the leave review button in a Next.js 14 Airbnb clone by checking login, ownership, and existing reviews with Prisma.

Explore Next.js 14 by building a bookings calendar for a property page: fetch property details with bookings, define date range and booking types, and scaffold client-side booking components.

Set up the booking container and calendar, create date utilities, and wire state with use property and use effect to manage a date range for bookings.

Implement booking container logic to show the booking form and confirm only for a valid date range, and build calculate totals to compute nights, subtotal, cleaning, service, tax, and total.

Build a dynamic booking form that uses range and price from state to calculate and display subtotals, fees, taxes, and the grand total with formatted currency.

Implement the create booking action by validating the property ID, fetching its price, calculating totals for check-in and check-out, and creating a booking with profile ID and property ID.

Implement delete booking functionality by wiring the delete booking action to a booking id, passing the id via bind in a form container, and triggering it with an icon button.

Set up the rentals page with a loading state, fetch rentals, and render a table of properties showing nightly rate, total nights, and income, with edit and delete actions.

Build the edit rental page by fetching rental details, populating a form with default values, and implementing separate update actions for text fields and the rental image.

Create the edit rentals page in a Next.js 14 Airbnb clone, with dynamic id routing, fetch rental details, and a form for name, tagline, price, category, country, description, and accommodations.

Learn to implement update rental functionality in a Next.js 14 app by handling form data, validating with a schema, updating property data and image, and revalidating the rentals page.

Create a fetch reservations function that queries bookings by property profile id, orders by created at descending, and includes property details such as id, name, price, and country.

Build an admin page to display total users, total properties, and bookings plus a monthly bookings chart, while enforcing admin-only access and setting up related components.

Configure next.js middleware to restrict admin access by defining public and admin routes with matchers, authenticate via clerk, and enforce admin checks using env-stored user id and redirects.

Master the admin stats page in Next.js 14 by fetching total users, properties, and bookings, rendering a stats card grid, and safeguarding admin access with a get admin user check.

Fetch bookings data and render a responsive bar chart using recharts in the admin chart container, displaying date keys and counts, with null output when no data.

Integrate stripe as the payment gateway and reset bookings to zero in admin for a display. Configure dotenv keys and pass booking id to checkout to set payment status true.

Build a secure Stripe checkout flow in Next.js by obtaining a client secret from the backend, posting to a payment API route, and integrating an embedded checkout with booking updates.

Learn to implement a Stripe payment route in a Next.js API route, create a checkout session with booking details and line items, handle origin, and return the client secret.

Refactor queries to filter by payment status true after Stripe integration, removing bookings with payment status false and updating bookings, reservations, stats, and charts data accordingly.