Build AirBnb with Ruby on Rails, Bootstrap, jQuery and PayPal

Leotrieu

Leo Trieu

Airbnb

Full Source Code

Discussion Support

[Note]: This is legacy version

This is an old version of Airbnb project that was built in 2015. We no longer support this version. If you are new to this Airbnb project, you should start with our new Airbnb 2 (released in 2017).

The Aribnb 2 project is a real MONSTER with a lot of rich features. Check out the details here:

https://code4startup.com/airbnb2


Sample Videos

Video # 1
 
Video # 2
 
Video # 3
 
Video # 4
 
  • 9e068f8288dac428a3ec28bdf2d81b97

    aaron

    Glad i started on this first (before the 2017 series was ready) -- even though a few things are slightly outdated, I learned how to work around it with the help of the community, and generally it was a great learning experience for a programming n00b!

  • Starter

    Welcome to the AirBnb project. In this project, I’m going to teach you Ruby on Rails by creating a AirBnb clone. Before going to the details of what features we’re going to build, I just want to show you guys couple of business ideas that I think...

    • Vision of This Project 2:08  
    • Analyzing the project 2:19  
  • Task 1: Let's Party

    As the first task, we're going to install all tools and tech stacks that we will be using in our project. Let's get start!

    • Install Sublime Text 3 4:27  
    • Install SQLiteBrowser 1:11  
    • Install Ruby, Rails for MAC OS X 10.9 or higher  
    • Install Ruby, Rails for MAC OS X 10.6, 10.7 or 10.8  
    • Installing Ruby, Rails for Windows  
    • Create Simple Project with Bootstrap 4:16  
  • Task 2: Working with Basic Project

    In this task, we’re going to create a Navbar with Bootstrap. Also, we’re going to build a simple authentication system with email that allowing people to sign up, sign in and logout.

    • What Are We Going To Build In Task 2? 0:26  
    • Create Basic Authentication 4:41  
    • Building Navbar with Partial View 11:15  
    • Authenticate with Full Name 5:16  
    • Update Views 11:29  
  • Task 3: Gravatar, Notification and Transactional Emails

    In this task, we’re going to create a new push notification system for user's events. Also, we will learn how to get user's avatar and display it in the menu bar along with sending transactional email whenever someone signed up.

    • What Are We Going To Build In Task 3? 0:39  
    • Gravatar 7:00  
    • Notification 10:03  
    • Transactional Emails with Mandrill 12:56  
    • Transactional Emails with Sendgrid  
  • Task 3B: Facebook Authentication

    This task is very interesting as we're gping to cover the Facebook authentication so user can sign in with their Facebook account. Also, we’ll be creating some simple style sheet so I hope you will get some ideas of how easy it is in dealing with...

    • What Are We Going To Build In Task 3B? 0:54  
    • Create App for Facebook 1:38  
    • Create Social Authentication 20:09  
    • Create User Info Page 14:04  
    • Create User Edit Profile Page 14:02  
  • Recap and Challenge for Sprint 1

    • Recap #1  
    • Challenge #1  
  • Task 4: Room Creating

    We’re going to create Model, Controller and number of Views for Room object. The task is simple and after you finish, here is what our Room creating page looks like. You will be learning how to manually create a typical Controller and how to work...

    • What Are We Going To Build In Task 4? 0:38  
    • Create Room (Model) 7:38  
    • Create Room (Controller) 11:54  
    • Create Room (View) 15:18  
    • Styling Our Views 10:39  
  • Task 5: Photos

    In this task, we’re going to add photo uploading function into our Room creating and editing pages. Also, I will show you how to deal with AJAX request and make our application loaded faster.

    • What Are We Going To Build In Task 5? 0:31  
    • Install PaperClip 1:56  
    • Create Photo (Model) 3:33  
    • Create Photo (Controller) 4:39  
    • Create Photo (View) 9:58  
    • Remove Photos with AJAX 7:09  
  • Task 6: Create Views for Room

    In this task, we’re going to create the listing page where you can see all of your listing room just like this. At the end of this task, we will have the room’s details page with all information about the a single room including Photos, Google Map...

    • What Are We Going To Build In Task 6? 0:26  
    • Create Room Index (View) 7:32  
    • Create Room Show (View) 21:12  
    • Add Google Map 10:18  
    • Add Close-By Rooms 8:29  
  • Recap and Challenge for Sprint 2

    • Recap #2  
    • Challenge #2  
  • Task 7: Reservations

    In this task, we’re going to create Model, Controller and Views for Reservation. By completing that, we will end up with this simple form where you are able to book a reservation for this room with Start date and End date.

    • What are we going to build in task 7? 0:32  
    • Create Reservations (Model) 3:56  
    • Create Reservations (Controller) 3:17  
    • Create Reservations (View) 6:16  
    • Add jQuery Date Picker 4:43  
  • Task 8: AJAX

    In this task, we’re going to refactor our Booking form just like this. Also, you will be learning how to work with AJAX and Controller in Rails by checking conflict dates between Start date and End date.

    • What are we going to build in task 8? 0:37  
    • Refactoring Reservation Form 7:02  
    • AJAX for Start Date 22:38  
    • AJAX for End Date 19:24  
  • Task 9: More About Reservation

    In this task, we’re going to create a new page to show all of the trips of the current logged-in user. So in this page, we display the information like the start date of the trip, the photo of the room that this user booked, the avatar of the host...

    • What are we going to build in task 9? 1:07  
    • Your Trips (Controller + View) 7:06  
    • My Reservations (Controller + View) 7:17  
    • Update User Info Page 3:37  
  • Recap and Challenge for Sprint 3

    • Recap #3  
    • Challenge #3  
  • Task 10: Private Messages

    In this task, we’re going to create the basic Private Message system for our application. By creating the MVC for Conversations and Messages, we will end up with this cool function so everyone in your system can send private messages to each other.

    • What are we going to build in task 10? 0:31  
    • Analysing 2:06  
    • Conversations and Message (Model) 9:10  
    • Conversations and Message (Controller) 11:46  
    • Conversations and Message (View) 21:49  
    • Customise the View 5:46  
  • Task 11: Advanced Private Messages

    We’re going to improve our Private Message system by making AJAX request to the server whenever user send a message. By doing that, the message will be added into here instantly without loading past messages every time. In addition to that, we...

    • What are we going to build in task 11? 1:11  
    • AJAX for Messages 6:48  
    • Real-time Messages 5:46  
  • Task 12: Reviews

    In this task, together we’re going to create a Review system so Guest can review a room with how many stars they would rate and comments on it.

    • What are we going to build in task 12? 0:45  
    • Review (Model) 3:25  
    • Review (Controller) 6:26  
    • Review (View) 11:34  
    • Adding Review Stars 7:41  
    • Improving Review System 6:37  
  • Recap and Challenge for Sprint 4

    • Recap #4  
    • Challenge #4  
  • Task 13: PayPal

    In this task, we’re going to integrate PayPal to our application so user can book a room by paying via PayPal.

    • What are we going to build in task 13? 0:47  
    • How to work with PayPal 3:54  
    • Creating PayPal Sandbox 3:06  
    • Add PayPal 20:12  
  • Task 14: Searching

    The main purpose of this task is to update our current home page, create search view having room searching function and google map.

    • Update Home Page 7:06  
    • Create Search View 14:12  
    • Search Room Function 16:38  
    • Add Google Map 10:38  
  • Task 15: Landing Page

    Welcome to the final task of this AirBnb project. In this task, we’re going to update our Home page with pre-search for couple of certain cities like New York, London and Berlin. Also, we’re going to add the hosts’ avatar to the room like this. Easy!

    • What are we going to build in task 15? 0:20  
    • Update Home Page 8:26  
    • Improve Home Page 5:11  
  • Recap and Challenge for Sprint 5

    • Recap #5