AirBnB Clone LiveView part 1

Setting up a new Phoenix LiveView project

Phoenix LiveView is a powerful framework for building real-time web applications. In this video, I'll show you how to set up a fresh Phoenix application and transform the default template into an Airbnb-style interface. We'll focus on the initial setup, including database configuration and LiveView integration. While you can find basic Phoenix setup guides, this video shows you the exact steps needed to build a production-ready Airbnb clone.

# Create a new Phoenix LiveView project
mix phx.new my_bnb --module MyBnB
cd my_bnb
mix setup

Creating your first LiveView page

LiveView offers a modern approach to building dynamic web interfaces without writing JavaScript. I'll demonstrate how to replace Phoenix's default static page with a LiveView component that handles real-time updates. The video provides a detailed walkthrough of setting up the component structure that will serve as the foundation for our rental listing grid.

defmodule MyBnBWeb.HomeLive do
  use MyBnBWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end
end

Implementing an Airbnb-style layout

A key part of any Airbnb clone is the grid layout for property listings. In this video, I'll show you how to implement a responsive grid using Tailwind CSS, which comes built-in with Phoenix. You'll learn how to structure your layout for optimal display across different screen sizes while maintaining the familiar Airbnb aesthetic.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
  <div class="w-full relative">
    <.link href="#" class="z-0">
      <img class="rounded-lg shadow object-cover h-56" src="..." alt="" />
    </.link>
    <!-- Property details here -->
  </div>
</div>

What you will learn:

How to set up a new Phoenix LiveView project with proper configuration
Converting static Phoenix pages to dynamic LiveView components
Implementing a responsive grid layout with Tailwind CSS
Creating a clean, modern navigation structure
Setting up your development environment with Elixir and Postgres
Customizing the default Phoenix template for your specific needs

Screencast