Build Airbnb with Ruby on Rails and React Native- Level 3

Leotrieu

Leo Trieu

Airgodzilla

Full Source Code

Discussion Support

About

Airbnb is a series of 3 Projects (Pikachu, Kong, Godzilla) with 3 different levels (Level 1, 2, 3). We are going to build a platform like Airbnb.


In this Airbnb, I will walk you through steps to develop apps 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 a web application. 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 superstar developer but will get you something REAL quickly and efficiently, especially for Entrepreneurs & Founders.

What skills will we learn during this Level 3?

[Part 1]

  • You will learn how to structure a project for API purpose only.

  • How to serialize objects from data models to JSON format that being used for API calls.

  • How to structure custom data to display on mobile app.

  • Understand good practice to use access token to secure API calls .

  • How to create GET, POST API requests to get and update data from client.

  • How to work with Facebook access token and grab the user’s Facebook details.

  • How to work with Stripe token to process Credit/Visa card.

  • How to test and debug your APIs with Postman.

[Part 2]

  • Learn how to use simple React Native boilerplate to start your app in no time.

  • Understand the structure of Redux that you can apply to any projects.

  • Understand the workflow between Action, Reducer and Store.

  • Create your own component, mobile screens with your own design styles .

  • Learn how to create reusable and customizable UI components.

  • How to leverage 3rd party libraries to boost your app.

  • How to create Facebook Authenticate in mobile app.

  • How to handle Credit/Visa payment with Stripe via mobile app.

What features will we build in this Level 3?

  • A Ruby on Rails API project

  • API requests to communicate with clients

  • A Mobile app with React Native running on the Android platform

  • [Mobile app] - Facebook Authentication

  • [Mobile app] - User Profile Details

  • [Mobile app] - Listing all rooms in the system

  • [Mobile app] - Display room details

  • [Mobile app] - Room Searching filter for location and staying duration

  • [Mobile app] - Booking a room

  • [Mobile app] - Credit/Visa payment form

  • [Mobile app] - Switching between Guest and Host mode

  • [Mobile app] - Displaying Your Reservations in Calendar mode

  • [Mobile app] - Approving/Declining booking requests.

Requirements

  • You need to complete the Airbnb Level 1 + 2 first to be able to enrol into this Level 3.

  • Enrolled the "ReactJS for Newbies in 1 Hour [ES6 Version]" Course.

  • Enrolled the "React Native for Newbies in 1 Hour" Course.

  • 3b00ea0f969d0b5e2e606264db4fe82f

    shijin

    Just finished this one. Found mobile app is so much fun! Learned quite a bit through API and React Native. Great Job Leo!

  • Picture

    Joel Garcia

    Amazing course leo, I've learned a lot of redux, Rails API, Components in React native, very nice app Architecture. Im surprised, I hope you created another awesome monster course with 3 levels like this. Thank you so much

  • Photo

    Diego Suarez

    Pros: Organized, fairly good structure, covers interesting material that is hard to find in the same place. Cons: For me, i didn't like that it was so coupled with the previous tutorials, i know the topics covered in the other tutorials and it was hard to follow since there is a lot of copy/paste from the past project. It doesn't cover anything for IOS. A lot of the config files for android didn't work for me, i had to do a lot of research to keep going. I wish he covered the notification system or any deploy topics.

  • Photo

    Diogo Wernik

    Very nice and organized course, but quit incomplete... 1) It have only Android App, not IOS App... Could have both... 2) No message system... No Real Time Message integration, 3) No notification System... 4) No deploy tips

  • 82a60ebab37c3d49b0961df6ec100544

    skyhitblog@icloud.com

    Do we also learn how to use gps to locate user's address automatically?

  • 11748c7b1424e26ca6fc4af3a9cbd5b8

    Daniel Johnson

    Even though I rushed through it. I will be using this many times over to complete other projects. This was taught in such a way it was easy to understand yet beautifully coded. Thank you Leo.

  • Starter

    • Intro 3:12  
    • Project's structure 2:03  
    • Download Full Source Code  

  • [Part 1] - Task 1: API Project

    • Create new API Project 4:30  
    • Adding existing database 4:14  

  • [Part 1] - Task 2: Authentication API with Facebook

    • Facebook Access Token 4:24  
    • User Authentication 7:20  
    • Create User Controller 11:37  
    • Testing Facebook Token 4:29  

  • [Part 1] - Task 3: Room API

    • Room List 13:43  
    • Room Details 18:45  

  • [Part 1] - Task 4: Payment API

    • Payment Controller 6:17  

  • [Part 1] - Task 5: Booking API

    • Booking Room Controller 10:13  
    • Charging Function 9:20  

  • [Part 1] - Task 6: Reservations API

    • Updating Reservation Controller 11:34  
    • Approve/Decline Reservations 8:27  

  • [Part 2] - Task 1: Installation

    • Read Me FIRST 1:22  
    • Install Javascript Dependencies 5:24  
    • Install Java Development Kit 1:30  
    • Setting up Android development environment 7:23  

  • [Part 2] - Task 2: Getting Started

    • Initialize React Native Project 4:22  
    • Setting Android Emulator 4:25  
    • Running Android Emulator from Terminal 2:49  
    • Project's structure 8:54  

  • [Part 2] - Task 3: Room Screen

    • Create Main Screen 4:21  
    • Refactoring Room Screen 11:40  
    • Room Redux 10:03  
    • Room API 18:47  

  • [Part 2] - Task 3B: Redux

    • Understand Redux 5:19  
    • Redux and React component 12:27  
    • Why's Redux? 2:13  

  • [Part 2] - Task 4: Room Details Screen

    • Refactoring Room Details Screen 7:22  
    • Room Action and Reducer 8:36  
    • Add Image and Host 10:14  
    • Add Room Info 11:33  
    • Add Godzilla Button 11:42  

  • [Part 2] - Task 5: Facebook Authentication

    • Login Screen 12:36  
    • Configure FBSDK 8:40  
    • Setting Facebook App 9:18  
    • Facebook API Request 9:48  
    • Display User's Info 10:03  
    • Store User's Info 11:46  

  • [Part 2] - Task 6: Searching Filter

    • Create Basic Searching Filter 11:17  
    • Add Location 6:06  
    • Add Date Pickers 13:05  
    • Add Godzilla Button 2:59  
    • Action and Reducer 3:59  
    • Searching Result 13:50  

  • [Part 2] - Task 7: Booking

    • Create Booking Modal 6:29  
    • Add Date Pickers 12:20  
    • Booking API 14:28  

  • [Part 2] - Task 8: Profile and Payment

    • Refactoring Profile Screen 11:48  
    • Update Profile Screen 11:05  
    • Payment API 7:31  

  • [Part 2] - Task 9: Host Screen

    • Calendar and Profile 14:16  
    • Show Your Listings 9:14  
    • Create Calendar Modal 13:33  
    • Display Dummy Reservation 14:29  
    • Display Real Reservations 19:26  
    • Approve/Decline Reservations - P1 7:06  
    • Approve/Decline Reservations - P2 9:26  

  • [Part 2] - Task 10: App Name and Icon

    • App Name 1:53  
    • App Icon 3:16