The TinyHouse App

[00:00 - 00:11] In this lesson, we're going to spend a few minutes talking about what we want the tiny house application to be. And this is the application we're going to build in part two of the course.

[00:12 - 00:32] And for this lesson, we're going to go through this lesson document here that we'll share in the manuscript, but we'll also check out and test the features that we want in our browser. Now just as a quick note, what we're going to talk about in this lesson isn't going to be diving into the technical implementation of how we're going to do these certain features.

[00:33 - 00:46] That will be addressed during the course when we introduce these features and look to implement them. In this lesson, we'll simply look from a more product overview perspective and just see what the features we want to have in our application.

[00:47 - 01:05] Now as a quick refresher, this is also documented and shown in the syllabus, but tiny house is just a online learning course that's designed to help you build a universal JavaScript app application. And when we say universal JavaScript application, we're referring to an application where JavaScript is running on the server and the client.

[01:06 - 01:31] And we're going to work with a variety of different technologies such as React, GraphQL, and TypeScript to learn how we can build a real home sharing app that includes authentication, data persistence, payments, deployment, and more. And if you're coming from part one of the course, you should already be familiar with a few of these technologies. And in part two, where we are right now, we're going to be diving into the specific other more advanced topics.

[01:32 - 01:50] By the end of part two, we're going to have a fully functioning home sharing application that looks something like this. If you're interested in trying out the application before we even look to start building it, you can see the finished application in the tiny house dot app URL domain.

[01:51 - 02:06] Now this particular domain is where we actually have the app deployed and where we convey to the audience that this is an app built as a React masterclass. And there's some other links like the about page that talks about the course, but everything else should be what we actually intend to do.

[02:07 - 02:20] With that said, let's now talk about the features we want to have in our application. There's a few other specific things that are going to be part of our app, but from a high-level perspective, these are the main user flows that we want.

[02:21 - 02:32] We want a user to be able to sign in with their Google account information. We want users to be able to search for listings in different locations in the world.

[02:33 - 02:42] We want users to be able to see specific details about certain listings. And we want to give users the capability to book listings for a period of time.

[02:43 - 03:04] And for them to book listings, they have to be signed into our application. Now if a user is interested in becoming a host and receive payments within our tiny house application, we'll want users to be able to connect their stripe accounts , which will give them the capability to then create listings and receive payments from other users.

[03:05 - 03:23] And the next point ties to what we just said, we want to actually have the functionality where users can create a new listing in our app. We also want users to have the capability to see a history of the listings they 've created, the bookings they've made, and the bookings that has been made to their own listings from other users.

[03:24 - 03:34] And finally, we want users to be able to see a history of listings created by other users. So now let's take a deep dive into each of these specific features.

[03:35 - 03:44] The first one we've mentioned is we want users to be able to sign in with Google and be a logged in user to our application. Why do we want to give users the capability to sign in?

[03:45 - 03:56] Because by signing in, they will then be able to book listings of their own. And when a user attempts to sign in with Google Sign-In, they'll be prompted to provide their Google account information.

[03:57 - 04:04] And when successful, they'll be redirected to the tiny house application in the logged in state. Let's see an example of this.

[04:05 - 04:20] If a user was to visit our application, in the logged out state, they'll see a sign-in button in the app header. If they were to click the sign-in button, they'll see information here that tells them they're able to sign in, or in other words, log in to tiny house, and they can start to book available rentals.

[04:21 - 04:43] When they sign in with Google, they'll be redirected to Google's OAuth page where they're asked to provide their Google account information. When their information is provided successfully, they're redirected to our application and then they're redirected in the logged in state.

[04:44 - 04:59] In the app header, it's notified that they're now logged in and they're able to log out if they want to. And they'll be redirected to their own user page that essentially gives them information on the fact that they're now able to connect with Stripe and see a few other things that we'll talk about in a second.

[05:00 - 05:10] Now when the user is logged in, they're then able to book listings in the application. But before they even start to book listings, they may be interested in searching for listings in different locations in the world.

[05:11 - 05:20] And our app is going to support this. For a user to search for listings, they're able to use the search input available in the home page or in the app header menu.

[05:21 - 05:46] And when a successful search is made, the users will be directed to a listings page where they're able to survey all the listings that have been created for the specific location that they've searched for. For example, if a user was to search for the region of California as the location where they want to see listings, they'll be presented with all the listings within the region of California United States.

[05:47 - 06:09] And in this listings page, the user is able to filter from a lower to high price and from a high to low price, as well as they're able to paginate this particular page if there are more listings shown for a certain page. And when a collection of listings is presented to the user, the user is able to see more specific information about certain listings.

[06:10 - 06:41] And the details of a listing can consist of, but it's not limited to the listings description, the title, the image, the address, and the person who owns the listing or the host. So if you go back to our application state at this moment, and if we were interested in one of the listings shown here, let's say the one located in Beverly Hills, California, we're able to see information about the listing image, the address, its title, the person who owns the listing, the small description, and other details as well.

[06:42 - 07:04] If a user is satisfied with the information about a certain listing, they're then able to request that they're interested in booking a listing from a certain period of time. And by selecting the check-in and check-out dates that can be booked, they'll be prompted to confirm their booking by providing valid payment information, such as a valid credit or debit card.

[07:05 - 07:31] So if you go back to the listing we surveyed before, and if we were to select a check-in date of, let's say, tomorrow in this example, which is the 8th of January 2020, and a check-out dates perhaps a week later, 15th of January. And if this user, myself at this moment, was interested in booking, I'll be prompted with this information here that tells me to enter my payment information and the total amount of money that I will pay to book this for a week.

[07:32 - 07:54] And this is where this particular element can accept a valid debit or credit card information. In this example here, I'm within my test development environment, so I'm able to provide a fake payment card, such as 424242, to represent a fake Visa card that has an expiration date in the future and three fake digits for the CVC code.

[07:55 - 08:11] And if I was to book this listing, I'll be notified that the listing has been successfully booked. And booking history can always be found in my user page.

[08:12 - 08:31] And that is essentially the user journey of a person who's interested in simply booking listings and staying within listings in different locations in the world. However, there's another user journey in our application where a user may be interested in actually hosting their own listings and receiving payments from other users who are interested in booking their own listings.

[08:32 - 08:50] And for them to receive payments, we are going to use a third-party payment provider known as Stripe that will essentially pay out these users when a payment is made. And as a result, if the user is interested in hosting and/or creating listings with TinyHouse, they'll first need to connect their Stripe account.

[08:51 - 09:01] And this is often done in the User Profile section of the user page. When a user attempts to connect their Stripe account, they'll be prompted to provide their Stripe account information.

[09:02 - 09:09] And when successful, they'll be redirected back to the TinyHouse application. But now in the Stripe Connected setting.

[09:10 - 09:21] Let's see this in our application. If I was to go to my User Profile page, I'm prompted with the call to action that tells me I can connect with Stripe to become a TinyHouse host.

[09:22 - 09:40] By selecting this button, I'm taken to the authentication page within Stripe that tells me to provide valid information to activate my account and sign in with a valid account. In my development environment here, I'm able to skip this activation form by clicking the link at the very top.

[09:41 - 10:04] And by doing so, I'm redirected back to my account, but at this moment, I've successfully connected my Stripe account, and I'm now able to begin to create listings in the host page. In addition, when a user starts to receive income within the TinyHouse application, they'll be notified above the income they've earned in this User Profile section when they've already connected with Stripe.

[10:05 - 10:25] Now when users are signed in and connected with Stripe, they're able to create a new listing in the host page. And in this particular page, users are required to provide all the valid information we're looking for for new listings, such as the listing title, the image, the address , and the price.

[10:26 - 10:39] So now with this particular user account that's been signed in and connected with Stripe, if I click the host link in the app header, I'm directed to the host page. And this is where the user can provide information to create a brand new listing.

[10:40 - 10:51] So as an example, let's assume we were to create a house or host a house within the TinyHouse application that has four maximum number of guests. The title will be large, bell or mansion.

[10:52 - 10:57] It will be modern, clean listing. It will be the description we'll put for this example.

[10:58 - 11:03] The address will be 251 North Bristol Avenue. The city will be LA.

[11:04 - 11:08] The state will be California. The zip postal code can be 90210.

[11:09 - 11:23] And for the image, we'll upload a valid listing image. And when successful, we're then able to provide the price that is required to book this listing per day.

[11:24 - 11:40] We'll say something like $100 per day for this example. And if you were to submit this form, we'll then successfully create the listing and will be taken or redirected to the listing page of the listing we've just created.

[11:41 - 11:54] And users will be able to see the history of listings they've created themselves and all the bookings they've made for other listings. And this can be seen if a user is logged in and visits their own user profile page.

[11:55 - 12:15] So in our example application, if I was to visit the profile page of my user account, I'll be able to see the listing we've just recently created, as well as the booking we've just made prior to that. Additionally, users will be able to view the details of a listing they own.

[12:16 - 12:24] And from there, they'll also be able to see the bookings that have been made by other users. It's an example in our application, we just recently created a listing.

[12:25 - 12:42] If we were to click it, there will be a booking section at the very bottom that gives us a history of the bookings made by other users onto our listing. And this can only be seen for people viewing their own listing details or details for a listing that they own.

[12:43 - 12:56] And finally, as a user, we should be able to see the history of listings created by other users. If we were to go to the user page of another user, we won't see any of their income information or the bookings that they've made.

[12:57 - 13:21] However, we should be able to see the listings they own. As an example here, if I was to go to a certain listing that I haven't created, that was created by someone else, by someone named Elizabeth, for example, if I was to click the link over there, it will take me to their user page, which gives me information of all the listings that they own, as well as their name and contact information.

[13:22 - 13:34] And this is pretty much a summary of all the features we want to be supported in our tiny house application. If we were to scroll to the top of the lesson documentation again, just to summarize what we've mentioned, these are all the features we want to support.

[13:35 - 13:55] We want to have users be able to sign in with Google to search for listings around the world, to see specific details about certain listings, to book listings for a period of time, and to connect their Stripe account to then be allowed to create listings of their own and receive payments. And obviously, they'll need to also be able to create listings of their own.

[13:56 - 14:11] And we want users to have the capability to see a history of the listings they 've created, the bookings they've made, and the bookings made to their own listings. And last but not least, if a user was to visit another user page, they should see a history of the listings created by that user.

[14:12 - 14:28] Now, the one last thing we'll mention is tiny house is going to be a marketplace application. So what tiny house is going to receive from all of this is essentially a 5% charge to the host or owners of listings that host their listings on tiny house.

[14:29 - 14:48] And when a payment is made from a user to a certain user to actually book a listing, they will pay out to the host of that listing and us tiny house would receive a 5% charge from that payment, which makes us supported as a marketplace. Now takeaway here is this is just a very high level summary.

[14:49 - 15:08] As you may have noticed, we haven't talked about any of the specific technical implementations on how we're going to do this. And when we talk about the breakdown of the actual part two of the course, we 'll break down all the separate modules in this part and each of these modules will have a specific focus and will address each of these features one by one by one.