Pre­Order our PREMIUM Course Now to Save $300 ×

11 
Shares

10
Create AirBnb with Ruby on Rails, Bootstrap,
jQuery and PayPal

Leo Trieu

nero

 Full Source Code

  Discussion Support

 Mobile Ability

OVERVIEW TASKS   22 REVIEWS   19

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 (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/about-this-project) 2:08

   Analyzing the project (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/analyzing-the-project) 2:19

Task 1: Let's Party


As the rst 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 (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/install-sublime-text-3) 4:27

   Install SQLiteBrowser (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/install-sqlitebrowser) 1:11

   Install Ruby, Rails for MAC OS X 10.9 or higher (/projects/airalien-

clone-airbnb-with-ruby-on-rails-bootstrap-jquery-and-
paypal/tasks/install-ruby-rails-for-mac-os-x-10-9-or-higher-
e684947d-2d19-41e1-9d33-da3ed6b5f4f2)

   Install Ruby, Rails for MAC OS X 10.6, 10.7 or 10.8 (/projects/airalien-

clone-airbnb-with-ruby-on-rails-bootstrap-jquery-and-
paypal/tasks/install-ruby-rails-for-mac-os-x-10-6-10-7-or-10-8-
930465eb-21fb-480e-9eae-5996492539d9)

   Installing Ruby, Rails for Windows (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/installing-ruby-
rails-for-windows)

   Create Simple Project with Bootstrap (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-this-task-37419904-3eaf-4824-b711-
e3e3725e3e11) 0:26

   Create Basic Authentication (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-basic-
authentication) 4:41

   Building Navbar with Partial View (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/building-
navbar-with-partial-view) 11:15

   Authenticate with Full Name (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/authenticate-with-
full-name) 5:16

   Update Views (/projects/airalien-clone-airbnb-with-ruby-on-rails-

bootstrap-jquery-and-paypal/tasks/update-views) 11:29
 Task 3: Gravatar, Noti cation and Transactional Emails
 In this task, we’re going to create a new push noti cation 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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-3) 0:38

   Gravatar (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/gravatar) 7:00

   Noti cation (/projects/airalien-clone-airbnb-with-ruby-on-rails-

bootstrap-jquery-and-paypal/tasks/noti cation) 10:03

   Transactional Emails with Mandrill (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/transactional-
emails) 12:56

   Transactional Emails with Sendgrid (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-3b) 0:54

   Create App for Facebook (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/create-app-for-facebook)
1:38

   Create Social Authentication (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-social-
authentication) 20:09

   Create User Info Page (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/craete-user-info-page)
14:04

   Create User Edit Pro le Page (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-user-edit-
pro le-page) 14:02
 Recap and Challenge for Sprint 1

   Recap #1 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/recap-1)

   Challenge #1 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/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 nish, 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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-
room-model) 0:38

   Create Room (Model) (/projects/airalien-clone-airbnb-with-ruby-on-

 rails-bootstrap-jquery-and-paypal/tasks/create-room-controller) 7:38

   Create Room (Controller) (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/create-room-view) 11:54

   Create Room (View) (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/create-room-view-77f543bb-
52a4-482b-96fc-0d54ef47abf3) 15:18

   Styling Our Views (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-5) 0:31

   Install PaperClip (/projects/airalien-clone-airbnb-with-ruby-on-rails-

bootstrap-jquery-and-paypal/tasks/install-paperclip) 1:56
    Create Photo (Model) (/projects/airalien-clone-airbnb-with-ruby-on-
rails-bootstrap-jquery-and-paypal/tasks/create-photo-model) 3:33

   Create Photo (Controller) (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/create-photo-controller)
4:39

   Create Photo (View) (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/create-photo-view) 9:58

   Remove Photos with AJAX (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-6) 0:26
    Create Room Index (View) (/projects/airalien-clone-airbnb-with-
ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-room-index-
view) 7:32

   Create Room Show (View) (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-room-show-
view) 21:12

   Add Google Map (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/add-google-map) 10:18

   Add Close-By Rooms (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/add-close-by-rooms) 8:29

Recap and Challenge for Sprint 2


   Recap #2 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/recap-2)

   Challenge #2 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-7) 0:32

   Create Reservations (Model) (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-reservations-
model) 3:56

   Create Reservations (Controller) (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-
reservations-controller) 3:17

   Create Reservations (View) (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/create-reservations-
view) 6:16

   Add jQuery Date Picker (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/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 con ict dates between Start date and End date.

   What are we going to build in task 8? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-8) 0:37

   Refactoring Reservation Form (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/refactoring-
reservation-form) 7:02

   AJAX for Start Date (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/ajax-for-start-date) 22:38

   AJAX for End Date (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-9) 1:07

   Your Trips (Controller + View) (/projects/airalien-clone-airbnb-with-

ruby-on-rails-bootstrap-jquery-and-paypal/tasks/your-trips-
controller-view) 7:06

   My Reservations (Controller + View) (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/my-
reservations-controller-view) 7:17

   Update User Info Page (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/update-user-info-page)
3:37

Recap and Challenge for Sprint 3


   Recap #3 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
 bootstrap-jquery-and-paypal/tasks/recap-3)

   Challenge #3 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-10) 0:31

   Analysing (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/analysing) 2:06

   Conversations and Message (Model) (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/conversations-
and-message-model) 9:10

   Conversations and Message (Controller) (/projects/airalien-clone-

 airbnb-with-ruby-on-rails-bootstrap-jquery-and-
paypal/tasks/conversations-and-message-controller) 11:46

   Conversations and Message (View) (/projects/airalien-clone-airbnb-

with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/conversations-
and-message-view) 21:49

   Customise the View (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-11) 1:11

   AJAX for Messages (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/ajax-for-messages) 6:48
    Real-time Messages (/projects/airalien-clone-airbnb-with-ruby-on-
rails-bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-12) 0:45

   Review (Model) (/projects/airalien-clone-airbnb-with-ruby-on-rails-

bootstrap-jquery-and-paypal/tasks/review-model) 3:25

   Review (Controller) (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/review-controller) 6:26

   Review (View) (/projects/airalien-clone-airbnb-with-ruby-on-rails-

bootstrap-jquery-and-paypal/tasks/review-view) 11:34

   Adding Review Stars (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/adding-review-stars) 7:41
    Improving Review System (/projects/airalien-clone-airbnb-with-
ruby-on-rails-bootstrap-jquery-and-paypal/tasks/improving-review-
system) 6:37

Recap and Challenge for Sprint 4


   Recap #4 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/recap-4)

   Challenge #4 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-13) 0:47
    How to work with PayPal (/projects/airalien-clone-airbnb-with-ruby-
on-rails-bootstrap-jquery-and-paypal/tasks/how-to-work-with-paypal)
3:54

   Creating PayPal Sandbox (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/creating-paypal-sandbox)
3:06

   Add PayPal (/projects/airalien-clone-airbnb-with-ruby-on-rails-

bootstrap-jquery-and-paypal/tasks/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 (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/update-home-page) 7:06

   Create Search View (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/create-search-view) 14:12

   Search Room Function (/projects/airalien-clone-airbnb-with-ruby-

on-rails-bootstrap-jquery-and-paypal/tasks/search-room-function)
16:38
    Add Google Map (/projects/airalien-clone-airbnb-with-ruby-on-
rails-bootstrap-jquery-and-paypal/tasks/add-google-map-48bf124e-
6b65-43e8-a186-630fe22ba9df) 10:38

Task 15: Landing Page

 Welcome to the nal 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? (/projects/airalien-clone-

airbnb-with-ruby-on-rails-bootstrap-jquery-and-paypal/tasks/what-
are-we-going-to-build-in-task-15) 0:20

   Update Home Page (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/update-home-page-
81e165da-de58-4b9e-900c-b0696e3eeab3) 8:26

   Improve Home Page (/projects/airalien-clone-airbnb-with-ruby-on-

rails-bootstrap-jquery-and-paypal/tasks/improve-home-page) 5:11
 Recap and Challenge for Sprint 5

   Recap #5 (/projects/airalien-clone-airbnb-with-ruby-on-rails-
bootstrap-jquery-and-paypal/tasks/recap-5)

(/)

© 2016 Code4Startup, All Rights Reserved.

Blog (/startuphack) - Terms (/terms) - Privacy (/privacy-policy)

Contact us at
leo@code4startup.com (mailto:leo@code4startup.com?Subject=Support)
 (https://twitter.com/Code4Startup) (https://www.facebook.com/code4startup)

(https://github.com/leotrieu) (https://www.youtube.com/channel/UCStIVSuXRCDGHDM99S-nqkg)