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

Leotrieu

Leo Trieu

Airbnb

Full Source Code

Discussion Support

About

In this project, I will walk you through steps to develop app like AirBnb with core functionalities from scratch. You don't need to learn everything about HTML, CSS, Javascript or Ruby on Rails to just create an web app. In my methodology which I called POA (Product-Oriented-Approach), you just need to learn what you need. Doing this way, it won't make you a super star developer but will get you something REAL quickly and efficiently, especially for Entrepreneurs & Founders.

Who It's For

  • Beginners

  • Promotion seekers

  • Entrepreneurs & Founders

  • Designers

  • Front-end Developers

What skills will we learn during this project?

  • How to quickly create a web app with Ruby on Rails.

  • Style your web app easily and quickly with Bootstrap.

  • Design your UI like a modern style using in AirBnb.

  • Use Facebook to authenticate your users.

  • How to send transactional emails with Mandrill/Sendgrid.

  • How to create Notification messages for actions.

  • How to create Object models for a business idea.

  • Handle photo uploading process with AJAX.

  • Process searching function with different criteria.

  • Handle location searching on Google Map.

  • Handle jQuery event for UI controls.

  • How to handle PayPal webhook to process payments.

What features will we build in this project?

  • Simple authentication with email/password.

  • Advanced authentication with Facebook.

  • Sending transactional email when new user signed up.

  • Notification system for specific events.

  • Page for users to edit Profile

  • Page for hosts to create/edit Room

  • Function to upload images for a new Room.

  • Room reservation system with Start Date, End Date.

  • Handling payment system with PayPal.

  • Room searching system with different criteria.

  • Create a Real-time messages between users.

  • Create Review system between customers and hosts.

Requirement

All I ask for is to pass the Free course "Learn Ruby on Rails, Heroku and Wistia APIs" with understanding of how Rails works. That's it.


Sample Videos

Video # 1
 
Video # 2
 
Video # 3
 
Video # 4
 
  • Picture

    Christos Karolemeas

    Value for money course! Waiting for Airbnb2..

  • Cc808ccaa51545051ff744648e56af7c

    Hansel

    In this course, Leo is not only teaching you how to code in a pragmatic and tangible way, but for the many non-tech founders out there, like myself, who wish to start a startup to improve this world Leo empowers you to do so. Thank you, Leo, you are allowing me to fulfill my dreams!

  • B51fe7d2d6b9a094382f502214bec5a1

    Jason Noronha

    Highly recommend. Great value for money!!

  • F6a55c2d022697e36f11cb372418cc23

    Bittu Kumar

    So Far, good

  • 059253db23783be1ada053d98f30c2cb

    Neil Watt

    Awesome. Very comprehensive course and easy to follow, well laid out and explained.

  • 08a24f97e85fb123abbee1db8450f0c5

    Bore Collins

    Wow. Just wow. How I dreamt of owning up this course when I didn't have the money, and eventually when I did, it didn't disappoint me, it was a double blessing. Oh, and Leo gave me a free 2 week bonus because of the Christmas holidays! WOW. I just can't recommend this enough to anyone who really wants to code hands down #*&!%.. :) Another one, Leo!

  • C635b03fac1cc0a560da3ee941a7ce77

    oscar

    This is a great course and Leo give real helpful and quick support! It is really worth. Thanks Leo and keep doing great job!

  • Picture

    Luke Hallinan

    This course was awesome and Leo was ridiculously helpful. I learnt so much doing it. Will happily buy more courses in future. Keep up the great work Leo!

  • Picture

    Pavle Radoman

    The course itself is okay, however I find Leo's accent quite fatiguing to keep up with. For paid course its a bit outdated, since people actually pay for course, at least, course should been updated frequently. Don't be discouraged this course is GREAT, for starters. Cheers.

  • 796590c1b3b4f390753560dbc09910ca

    Sahidur Rahman Suman

    I really enjoy this course. Thanks to Leo for providing this amazing course.

  • E8eeac1d63ebc3cec286c5d6e0c0c786

    Emanuele

    Very good course. When you complete it you realize how ruby on rails works and you are able to start experimenting yourself more consciously. Just keep in mind that the Airbnb project that you will build is for educational purposes, so you need to put extra effort after the course if you want to make the project a "real life" one. Awesome anyway!

  • Picture

    Rafid Hoda

    I really like Leo's approach to teaching. By the end of this course you'll have built a fairly advanced Rails web application that can actually be used. Highly recommended for people just starting out with Rails... like me.

  • 4549212?v=3

    KABBAJ Elhassane

    this course is awesome but i'm still waiting the next Stretch Goals!: "Extra Advance Skill with Graph. AirBnb clone will have graph in the dashboard showing different info in different formats: Geo map, Percentage chart, bar chart."

  • 25013e0fac52263b598706c3efda4d45

    Barry Reeves

    Hi I found the course really good. I learned alot ... it was very helpful in doing my project for college. I learned alot of everyday things that you dont learn in college (eg. facebook authentication on the site....). I recommend the course say if you need to build a website... my one was quite similar to airbnb so I am using this as a sort of template. its quite easy to follow too!!

  • 4718415?v=3

    Stan Amsellem

    Simply awesome. What I love is that lots of rails topics are covered and then it's up to us to choose the ones we want to dig deeper.

  • 8a82fc7ecd2fd954c003769bdb0a7080

    marb

    5 Star Course, the real world product cloning methodology that seems to be in vogue in todays education environment can be very hit and miss but this one is a definite hit. I think Leo hit the sweet spot between depth of subject knowledge matter and breadth of subjects covered, long may it continue.

  • Picture

    Ryan Harmon

    I have taken many tutorials on other Ruby on Rails and on frameworks (Laravel, Django) and I could not stick with the framework because I was not learning how to actually build something. I was only learning theory, MVC, and the language specifically. Finally, after building AirAlien with Leo I am excited to go back and learn about theory, MVC, and the language behind Ruby on Rails because I have accomplished my dream of building an app! My dream was not to become a Ruby master, but after taking this course I feel confident to go back and build my Ruby skills and become a Ruby master one small step at a time.

  • A16ed937bd29fccd12bb10657a217d1c

    erica

    Awesome course. Thanks to Leo, now I can build powerful and functional apps on my own.

  • Picture

    Yasunaka Cho

    This is the best programing tutorial that I have ever experienced. This course is well-organized, efficient, and lots of fun!!

  • 3b773200a0e85078ebead1494f6c5435

    Joe Minock

    Another great application from Code4Startup. After starting with the Rails Newbie and Pro versions of the Hero lesson, this is the ideal next step. Much more JavaScript / JQuery / Ajax and a more interactive application. If you're working on becoming a full-stack rails developer... You'll LOVE this project and you'll learn a lot.

  • 14181551?v=3

    Pravalika-Y

    Awesome

  • 5ce1b3167a5b2d8aeaacc992862da0d3

    Dane Lams

    I personally love this Product-Oriented approach as it is so practical. Learning this way is by far the best approach to build a real thing.

  • 10bc523ed730ef33d0e6d4852401e8e9

    Matt Ress

    If you're a beginner of Ruby on Rails like me, read Michael Hartl's book and take this course. One is for your basic Rails and the other is for building real apps.

  • 3a02d991918e41c7a7107ecf718ede66

    Ben Gallander

    I love Leo's teaching style. Will definitely subscribe for more of his courses.

  • 411ee3959ce205b6b607ed52e2786c85

    Thomas Johnson

    This course is absolutely amazing. Leo really knows what he is talking about and he has really helped me learned a lot. Highly recommend this course to those who wanting to create a real app with Ruby on Rails.

  • 362b552856aae8660df6d6520e8bfae6

    Alfred Henson Co

    Tutorial is amazing, Can't wait for the advanced features of this. It'll be soon! Thanks Leo. All the best.

  • D0c7af6cb775f23abf74e9696dc57af8

    nerwin hernando

    You are amazing Leo. Your instructions are easy to follow.

  • Photo

    Amul Patel

    Another amazing course.. Thanks so much guys!!

  • 7bc295593556b720c4cc004dd157b307

    Hwanmoo Yong

    Such a great course. You just follow what Leo says, and you will get what you want.

  • Photo

    Daniel McDonald

    Love your work Leo! Your tutorials always leave me with a much deeper understanding of what I'm doing. Keep making stuff like this and I'll keep supporting it!

  • Photo

    Ricardo Trejos

    Awesome!!

  • 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