🔴 Build the Airbnb app in React Native & AWS Amplify [ Backend ]

what's up guys welcome to the last stream of this year and today we're gonna build uh the back end of our airbnb clone and we're gonna use aws amplify for our back end uh as as usually uh as we've done before for our projects so what exactly we're gonna build today uh let's have a look so firstly we will build the authentication flow for our application in order all uh to be able to access the application only if you're a registered user probably airbnb doesn't has this feature but i think a lot of application has it uh so first of all you see a welcome screen then you can log in sign up and after that you can see the content so this is a good way to learn how to add authentication and you'll see how easy it is to add these authentication flows it's just three lines of code but more on that later after adding uh the authentication screens we are going to set up and create a graphql api for our data because right now we are using dummy data but in a real application you would like to have some database where you will store the data you'll have an api and from the client side you will just query this data and for this purpose we're going to use a graphql api and we're going to use aws amplify for creating and setting up this api and again you'll see how um how easy and how much uh work the amplifi does behind the scenes because from one file that we will define like how our data should look like amplifier will take and create the database all the end points um yeah dynamodb database for each of our models and a lot more so you'll see how easy and cool that is so uh yeah this is the plan for today uh if you didn't follow along previous builds uh you can find them on my channel uh there are two live streams before this one where we have built the application that we are going to extend today the airbnb clone um yeah and uh you can i highly recommend following along those two if you want to implement the back end because yeah this way you will have like the full stack skills of creating an application from scratch both on front end and on creating the back end or you can find the application on my git repository the link you will find in the description of the video uh yeah one more thing you will also need some resources uh some assets and in this case i created some uh helpful functions for for the took to to populate our database in order not to waste time and not to write so you can find them on the url let me yeah let me open it here uh assets dot not uh just dev slash airbnb so go on that link download the bundle and um you will find there everything that we will need during this live stream so everyone who is watching live hello hi everyone where are you joining uh today from uh yeah i see yeah i see some new people i see people that are here every week hello brian hello nickname how are you doing guys yeah get some coffee get some water and in a couple of minutes we will get started uh yogesh hello hello arthur hello i'm good i'm very well how are you doing yeah of course nickname just um follow vstream watch it and if you have any question let me know here or in our discord channel and after the live stream you can start from the first stream and build it yourself oh zurich zurich chyna hello merry christmas thank you very much uh yeah that's why i decided to do it today and to complete to finish uh 2020 with a live stream okay guys so um i think we can get started uh let's get comfortable sorry for that uh yeah i for i think uh let's first of all have a look at the application as it is right now uh to remind ourselves hey brian thank you very much for the donation merry christmas and thank you for everything thank you priyank for supporting this channel uh yeah you're supporting it every video and i really appreciate that and it really means a lot to me thank you very much so let's have a look again at uh the application as it is right now um the application that we have built during the previous two videos so here is the welcome screen uh we can see uh the search button and also the bottom tab navigator uh we can switch through pages we can swipe through pages uh however yeah uh we only implemented the welcome screen here so that's why we see it um yeah that's why we see the welcome screen uh if we go to the search here we are able to search for a location and the cool thing about this is that we implemented the autocomplete features from google so um yeah if we write something google suggest uh places with autocomplete here is some filtering for our uh search and we can add why did they come on come on yeah here we can add like how many guests there will be and press search now we see a list of accommodations uh this list of accommodations are coming from dummy data uh and with today we are going to implement the back end to fetch them from our database the cool thing about this is that uh our accommodations are displayed both in a list and also on a map and yeah i think this feature is uh pretty nice we see the map and we can move through for accommodation here and we see all the accommodation in a carousel flat list down below so if we just scroll through it we see the map updated automatically centered in the middle and um made that uh accommodation active on on the screen so we can see that the location of it so i think that's really powerful and yeah it works pretty well and uh if you press on uh on accommodation we go to the details page and here we see more uh information about that accommodation so yeah as i said everything right now works with dummy data so let's go ahead and start implementing the backend using aws amplify and the first step will be to set up aws amplify project uh and let's open this link for the documentation to find out more about how you can do that the updated uh presentation is also available in the assets bundle that you can download on the link on just dot assets.notjust.dev slash airbnb so yeah here is the getting started guide for amplify uh yeah here we go so uh let's have a look at uh prerequisites what we need uh you will have to follow along and install everything that you don't have for example node.js but i suppose that you already have node.js installed then you will need to create an aws account and an aws account is free to create and uh however you have to insert where your credit card details and most of the services that we are gonna that you are gonna use like while learning and all the services that we are gonna use in this video uh are have a free tier which means that you're not gonna be charged for them um but yeah uh have a look at their pricing models and try to understand better like uh their pricing model not to have any surprises but i'm not i'm not charged for any of the projects that i already built during this live stream which are i think like six or five or six so yeah uh then you will need to instead of install and configure aws amplify cli you can follow the guide here or in the video from debit all right so after we go through all these steps let's follow along together and initialize the up our project with aws amplify we don't need this first tab because we already have a react native application so we're gonna open our terminal inside the folder of our application and run amplify init this will initialize the amplify project i have it here in the presentation as well so let's go ahead and do that i'll run amplify init and uh this command will ask us to fill in some details so for our project name i will leave it as default as they suggest me airbnb clone environment development okay uh you can choose here your default editor i there is no webstorm there so i'll choose none uh we're gonna build a javascript application in react native enter for the sort directory distribution everything enter by default okay now uh it asks us if we want to use an aws profile uh we say yes and then we choose the profile that we set up in the previous step so it's either the default or if we gave it a name uh it's gonna show up here so i'm gonna choose this aws profile for my account and we will wait until aws initializes our project okay let's uh see here what's the next step we initialize okay then we will need to install the amplify libraries so um yeah i'm gonna copy them from here only the libraries because i'm using yarn if you use npm you can copy the whole command and let's go back here we see that amplify initialized our project successfully and it created the amplify uh folder we're gonna get into the details about that folder a bit later it created the amplifi.json and also it created the export somewhere yeah so now let's install the libraries from amplify [Music] i had to prefix it with yarn odd come on come on no okay yarn odd and then all these libraries that we amplify needs and while it installs let's have a look uh at the next steps so uh for ios we will also install the pods not to forget that and just to configure the amplify okay now we should wait until uh the libraries are downloaded and then we can install the pods for ios okay let's run npx for the install and i saw that you don't need ios here just npx pod installed all right and the last step from the documentation here is that we need to open the app.js or index.js and import this amplify configure and to call the amplify.configure so let's do that and with that command let's open up.js not json.js or index um yeah it doesn't matter where but we will go with index and we are going to paste in the code here so we're gonna import amplify config and run the amplify configure so with that said let's uh try to rerun the application on ios because we installed new libraries and we need to rerun it and let's see if everything still works and if the setup was completed successfully we'll move on with the next steps to implement authentication so yeah hi from algeria hello are you gonna include sign up options yes we're gonna include sign up options and also forget password options uh confirming uh your account through email code and a lot more but you're gonna see how easy it is it feels almost like cheating because it's just a couple of lines of code and we're gonna have everything arthur is saying thanks i've watched your spotify clone tutorial and finally published my first app in google play that's that's really awesome arthur oh my god and um yeah send me the application what what is it about did you get your first downloads uh brink is asking hopefully you will do uh deploying an application video soon or maybe fingerprint sign in um yeah i think that in in the next year i'm i'm gonna focus more on different topics like how to deploy an application uh because i want to cover uh the whole process of developing an application starting from i don't know like taking the designs and finishing uh going through like front end uh then the back end deploying uh testing and so on so there is a lot of room for content and a lot of room for for projects if only i had more time so we see that our application loaded and everything works as previously which means that our amplify setup worked properly uh if you had any issue with these steps let me know down in the comments or join the discord channel you can find the link in the description and there you can ask me or any other one from our community that managed to to do it successfully so uh yeah let's uh have a look what people are saying uh hey man thanks for your wall thank you very much for joining and for appreciating uh pre and hey vadim are you planning to do tutorial on how to do in-app payment like google play pay or amazon pay and react native there is no tutorial on it at all oh really there is nothing on youtube um yeah um this is also very important topic in applications to to handle payments so i think that there will be something like that in future because we uh we are planning to introduce that in my startup uh so i will do a deep research on that and i will have content for uh for payment methods are there is asking any reason why you don't use typescript no big reasons i prefer typescript but i'm trying to keep this builds more beginner friendly and also one of the reason is because during live streams i was spending too much time setting up types and making sure that uh everything is set up correctly and i'm keeping track of all the types like and if i don't like the application was working uh but we were having like a lot of uh red uh yeah red lines underneath so only for that i decided like let's keep it simple and focus on javascript but we had i think two or three projects in expo with typescript so you can check them out i really love typescript okay guys so uh setting up amplify was done the next step is uh authentication so uh to add any service with amplify because amplify is not and uh is not like a new service uh in aws amplify just uh combines all the services that already exist on aws so uh we in order to add such a service uh using amplify we're gonna call amplifyad and the name of the service in this situation we will add uh authentication so let's run amplify authentication i had to [Music] before that i'm gonna add everything guitar git commit amplify init and now let's um yeah add authentication okay it asks us um what configuration we want for our authentication so there is a default configuration and there you sign up with login email and password and so on uh default configuration with social providers and social providers are things like uh signing with google where we facebook with apple and so on and uh for this you need an application or a developer application on either providers so it's very easy to set up you can find more information on their website but i'm gonna go with the default configuration to keep it simple so how do you want uh users to be able to sign in uh yeah let's go with user name and i'm done okay we created the configuration for our authentication the next step we have to do is to run amplify amplify push and this will create all the services in the cloud on aws so it it will take like a minute or so we say yes and yeah updating resources in the cloud this may take a few minutes um yeah while this is uh updating let's have a look at uh the guide here so you can follow this in more details if you have any issues so the first thing is amplify out off we did that when we do amplify push and after that we will need to uh install the dependencies libraries uh so is there any nude yeah there are some new dependencies here so i'm gonna again copy them all let me check if there is any new dependencies there do we have here called yeah i think that it's um very same let me try to find that command because i think we don't need to install it again no yeah there is amplifier rack nato i think this one we were missing so yeah while we wait for the updates in the cloud i opened a new terminal and i'm gonna install the dependencies yarn come on uh and then we'll install the pods and yeah uh let's check saved for new dependencies okay so uh np export install to install all the pods for ios so guys for everyone who is just joining uh we are building the back end um the back end for our airbnb clone so in the previous two videos we have created the ui of our airbnb clone which you can see here um and right now we are creating the the back end in aws using aws amplify uh in order to yeah create the authentication flows to manage users to set up and create a graphql api uh the database in dynamodb and so on so that's what we are doing today right now i am implementing the authentication so yeah let's um yeah all resources are updated in the cloud and also put install complete the next step is to open our up.js important.js and here let's import from aws amplify we will import a function with uh uh oh not sure if it's from there um and let's amplify react native okay and i will amplify react native we are going to import without faint decatur something like that right did i misspelled it out with authenticator and this method we're gonna wrap uh our application inside that method so we're gonna say with authenticator application we save and we run it again on our device being it ios or android it should work on both of them so if you are working on android run yarn android then it will open so guys here we see it with two lines of code importing the authenticator and wrapping our application inside this function we have uh setup authentication and now uh whenever we open the application we see the login screen so right now we don't have an account yet uh but we can press on the sign up and here we will create a new um a new account so for the username uh let's say by dim one two three one two three email [Music] okay and phone number something random let's sign up and yeah i relaunch the application here so my bad sign up let's try again or let me check if that was successful and if i receive a mail no i think i didn't receive it so let's yeah create sign up again with our credentials sign up password did not conform with policy password not long enough so yeah that's also something good we get some security by default these things can be adjusted so you can set some rules based on your need and after that we see the confirmation screen and on our email we should receive a code so i already received it on my email and i'm gonna copy it and paste it here and let's confirm now we need to sign in in our account so my username was vadim and my password was one two nine let's sign in and we are in our application and the cool thing is that if i close the application and if i open it again i will not have to log in again because it remembers but i already signed in and yeah that's how you add authentication how easy is that guys like we set up all the libraries that we need and then we just imported with authenticator and we wrapped our application into that authenticator and we have authentication flows such as login sign up forget password email confirmation password uh yeah like security and so on like that's really crazy when you think about this because at my startup i think that i spent like i don't know um i spent only one week setting up authentication with apple um yeah signing uh signing up with apple and uh but here like everything is so much easier and everything is uh is done and the cool thing about this is uh you if you might think that uh you need your custom design and this is not something that will suit you will suit your needs uh the cool thing is that with amplify you can adjust this uh adjust these screens and create your custom login and sign up screens and then just call some uh methods from aws amplifier react native for example uh i don't remember exactly the method but yeah sign in and sign out and then you just call this methods and uh that's it so you have ability to adjust and the flexibility to implement your own design and also have this uh ease to set up a basic authentication flow in just a couple of minutes if you're working on a prototype or i don't know yeah an mvp so um yeah one more thing let's uh let's add the ability to sign out so we will see again those screens and will be able to test out uh yeah this thing i didn't do it in any projects but if it's it's quite easy so let's do it right now so in the screens i'm gonna just create a new screens for our profile uh and there i will put the logout button or should i put it just here now let's keep it there so uh let's create a directory profile let's add a file index.js okay profile screen and in navigation in home tab navigation let's import this profile screen profile screen and let's find our profile tab here scroll down it should be the last one here and we for the component instead of home screen we will send the profile screen let's save profile screen here uh it's there we just don't see it so i'm gonna just add the logout button here so let's add a pressable come on the principal we will import from react native but we will also need add text so inside we'll have a text log out so [Music] let's give it some styles with i'm gonna style it like just pretty roughly in order just to see it on our screen and some background color something like this and for our view i'm gonna display flex justify content center and a align items also center save what's going on attributes must only be assigned a non-empty expression where did they mess up something here it must be somewhere in here so yeah i think it's on press save height 100 percent yeah we see the logout button here not the best looking one but we have it i just want to show you how you can uh log out from the application so um let's check where do we import this logout function from aws amplify hey thank you very much uh sambula for the donation that's that's really awesome uh yeah symbol is saying bro amazing content learning a lot from you thanks a lot for the support it really it really means a lot to me that's so awesome merry christmas to you uh okay so log out i just need to check where we should import this function from from yeah it's from amplify from off right if i'm not mistaken yes so uh yeah let's import off here and on pressable we will define here we will send here a on press log out and we need to implement the function const logout is equal to an arrow function and inside here we will say off dot logout logout right no no no so where is logout sign out oh it's sign out yeah sign out and yeah let's press on this one and we are back to our login screen here we can uh yeah if we open again the application now we're gonna see the login screen because we have been logged out and here we can go to the forget password we'll write the username and we will receive an email and yeah we can go back to sign in and here we can log back in okay and uh password password yeah like this yeah and we are back in so that's how we how we can uh implement the logout functionality i think it's pretty pretty cool and pretty easy to do that with amplify that's why i really love it so let's have a look at what people are saying how are you doing guys are you following along do you find this [Music] valuable okay please make a tutorial with django as a back end um i don't know probably not anytime soon but maybe in future i will do something with django actually my first startup i use django to create it but after that i never touched django so someone is asking aws amplify uses graphql too with aws amplify you can create an api and you you have a choice to create it as a graphql api or as a restful api so yes with nws amplify you can create a graphql api but you are not limited so if you need the rest api you can do that as well aws is a an all-in-one package but which is best for apis what do you mean which is best for apis like from from what options are you uh choosing or like considering arturo is asking do you plan to customize the login screens no i don't plan to customize the login screens because this will take a lot of time and it's so much easier just to stick with the custom ones uh however you can do so and you will just um yeah call for example off dot sign in and there you will send like all the information that it needs like the login and so on yeah like username password and any other uh data so you can do that and you can call like the off uh and all the math methods like sign in also sign up also there is forget password um and yeah all the logic is already implemented you just implement the front end and call the necess of the functions there amir is asking why choose xbomb this project is not with expo this project is with react native cli so i know that a lot of people were asking me to use cli but if you're asking about yeah if you're asking about this project yeah it's not export cli if you're asking in general why expo expo is a great way uh to get started with projects uh so yeah we have a lot of things already set up and it's much easier just for the beginners yeah i really like expo but there are some limitations and you should know about them aw um for the apis which one is better aws firebase azure uh the usual options um yeah i'm pretty biased here uh but i really like aws and when you think about this aws has the biggest market share it has like much more than any other competitors and where they have like a lot of great services and they're moving pretty fast with everything um yeah maybe firebase is more beginner friendly uh but uh in real life projects i think aws is much better and yeah we are using it at our startup and it's pretty uh cost-effective cost-effective as well if you are using the right services and it scales pretty well and i i love it aws and also you have the possibility to go the traditional route with having an uh a usual server which you will manage and handle in a normal like i don't know express or node.js api or you can go over out with setting up upsync api with some lambda functions which will get you the serverless architecture and that way it will be much easier to scale to scale up and yeah in general better all right guys so let's uh let's move forward uh let's commit everything that we did it commit minus m amplify authentication okay so uh we found we did the authentication for everyone which is joining right now we are building the backend infrastructure for our airbnb clone and the airbnb clone we have built the ui and all the layout during our previous two live streams so you can see here like the welcome screen uh you can search for some accommodations and here we have like google auto complete features we can set up some filters for our search when we see the search results in a list uh also we see them on a map which we can um yeah view it here in a map or down below in this carousel and today we are implementing the back end uh to get all these data from our database and um yeah this way we will have a full stack application and you'll be able to build one yourself so we finished with authentication uh we will move on to our api so the first step we should take as i said is to add this service and we'll add it with amplify ad api so let's run this command here amply by add api and this will ask us a couple of questions yeah here it asks us if we want a graphql or a rest api so in our case we will create a graphql api the name i will leave it as default and here there are you should choose the authorization ties for the api and there are a couple of them for example api key where uh yeah it sets up an api key uh which will expire like you can set up how long it will expire or you can set the authorization based on cognito user pool and cognito is used for authentication so this way only authorized users that login in the application will be able to query the api so for this project let me think uh how we will go it's yeah we'll go with the easy route of api key yeah let's go with api key and we'll set that it should expire in one year and yeah i'm done do you have a graphql schema let's say no because we did we don't have it yet we will uh create it in a moment and here there are two templates uh in our case we will choose a single object with fields because we don't have a lot of relationships uh for our model uh in this application uh yeah it wait until it creates do you want to edit schema let's say no because we will open it ourselves so right now uh amplify created in this folder called amplify there is a back end and then api and let's open the schema.graphql so for our api everything that we will do is mostly in this file and here using this schema definition the graphql schema definition we will create our whole api because just by setting everything up here amplify knows how to create all the resources needed so for example uh for every type which has a model it will automatically create a dynamodb table to store this information in a database it uh creates all the connections between the api and that table and so on so uh we just need to define our api schema here and everything is taken care uh for us so let's create in our case we don't have it to do we will have accommodations but i think in our application we call them posts so let's um yeah the type is not post the type is post because it's one post uh so let's think what this uh let's think what this post will have uh to help us we will check our data feed.js and here we will see what data we currently have so let's uh take this one from here and i'm gonna paste it here just to to see them side by side so we'll have an id that's good we will have a image uh yeah let's let's add it uh here image the image will be of type string and the image will be a required property so if you add the exclamation mark in graphql which that means that it cannot be null image then it will have a type which is also a string then it will have a title title and also a description again string let me just delete this okay next one uh bad it will have the number of beds which will be a integer bedroom and the bedroom will be also an integer alt price well price let's set is it as float because you can have like i don't know like 25.5 or something like that a new price and actually world price is not required because there might be no old price only like new price or it actually should be called something else like actual price or current price or just price um okay new price then the total price uh it's not something that lives in the uh in our database so i think that total price will calculate based on the number of nights that you want to stay there or something like that so after that we'll have latitude and longitude and these two fields will also be float load and float okay let's um let's think if we have everything we have an image type title description okay bad bedrooms [Music] we'll also need to store something that we are not currently displaying anywhere but we will need it for filtering purposes and that will be a maximum number of guests because whenever we said that we want to travel with i don't know like five gets we want to receive only properties that has the capacity of five or more to accommodate everyone so it's going to be also a integer must maximum guests uh on price new price latitude and longitude yeah i think we have everything so we can remove this dummy data from here and this is our schema where we will have only one model there is no relationship like we only handle like posts or accommodations so after creating the schema after defining after writing the schema we will go ahead and write amplify amplify push amplify push will create all the necessary resource resources on in the cloud and that will be like dynamodb database and up sync up sync api and so on uh yeah we want to continue uh yes we want to generate code javascript enter enter enter yeah leave it the default values there all right um yeah we'll wait a couple of minutes until it creates everything yeah the first step was to write the graphql schema we did that next step yeah will be to we'll get there we'll get there so how are you doing guys is this clear is there any questions so far or any unclear parts so yeah we should wait a couple of minutes until it creates all the resources come on come on update complete let's see come on come on okay so yeah um the update completed uh here we can see our graphql api key which it generated automatically and in order to see um our resources in cloud to be sure that everything is set up correctly we can write amplify amplify console and the service of the console that we want to open so in this case we want to open our api in the cloud we're going to choose graphql and this uh opened a window here so um yeah this is the console of our api and at the top here we can see the schema and this schema if you remember with a couple of minutes ago we uh created we defined the schema for our post and we defined like how should a post look like like what data should it contain and which type that data should be and we wrote 18 lines of code if we look in our console here we can see the schema that it eventually created and generated for us and we can see 200 lines of code and this is for all the inputs all the queries all the mutations like to delete a post to queryapples to update a post of all the filters of like contains greater lower uh and so on so you don't have to get into a lot of details here because we are gonna go step by step but yeah this is where you will see them the final schema um and yeah here are the queries to get the post to list post uh and so on so let's uh go in our queries uh yeah we select queries here and here where is uh the page where we can run and test our api to see the data what it contains and yeah this is uh this is like a postman uh in uh for a rest api that you are using to to test and visualize your api so here we can for example select a get post no not get post let's select a list post and for the items we're gonna query the number of bad bedrooms uh id and description and let's run this and we see that currently we don't have any um any posts any data so now um yeah the queries is things that we want to receive if we want to update something or to create something new we need to run mutations it's similar to a post request for a rest api so if we add the mutation here we see free mutation create post delete post and update post we can go ahead and create a post here and for the input we'll set uh all all the necessary information here on the left or easier you can write them here as text so if you know exactly like what variables you need you can write them here the good news is that you don't have to write any of this because i already prepared this data so if you downloaded the the dummy data from uh from assets dot not just dot dev slash airbnb then let me find it you'll find all this operation that will populate our database with some data so we don't have to write them manually uh youtube where is it come on come on airbnb airbnb assets and yeah graphql operations so um here is the folder with graphql assets and here we you can see a file called graphql operations so open that up in a text editor and copy uh everything that it contains after that we will paste everything here in our console and uh yeah this contains a couple of mutations to create some accommodations for example let's see mutation create accommodation 1 and we will call the create post mutation with the next input it will have an image a type a title description and all the information that it needs you can go ahead and adjust them if you want to give it different titles different image urls and so on so that's the same for for example accommodation 2 accommodation 3 four and so on yeah after we pasted that in let's try to and let's hope that it will work and let's run the create accommodation one we see the idea of the first accommodation which means that our mutation runs runs yeah runs successfully let's run accommodate creating accommodation two three four and five now uh there is this query show wall properties which calls the list posts query and it receive it queries the id title and description of each property so if we run troll properties now we can see a list with all the properties that we just created with their id with their titles descriptions and so on and the cool thing about graphql is we uh is the consumer who decides what data it needs so in this situation i said that i only need id title and description and that's what it gave if i also for example want the the new price and the number of beds i can easily do that i just add the the fields here and if i run show all properties i see the new price and number of beds for every property so yeah that's the the cool part about graphql is that we have a flexibility to define what data we need uh to query okay so let's implement in our application the show wall properties query and to display them in our list from our database so yeah the next step is to retrieve all accommodations all right um all right so yeah let's uh close everything and open our where is it screens uh search results yeah search results let's open the index file and here we have this flat list of with our feed and if i open the application uh i'm speaking about v-screen the list of properties right now it takes this feed from our dummy data file but we need to we need to query the data from the api and display them here dynamically so let's um let's import a couple of uh methods here uh that will need so let's import api and graph ql operation from aws amplify okay uh the next thing that we need to import is something from our source graphql folder and this folder was automatically generated by amplify when we run amplify push so if we open here we see four files mutation query schema and subscriptions so for example if we open queries this is a predefined queries that we can use so yeah we have a ability and we have the option to write these queries ourselves and to specify exactly what data we need but they provide it in these files to easily import and use them as they are so i'm gonna yeah import the list posts query from uh from this file uh and we're gonna use that so let's um let's learn how to type on a keyword without looking at it so let's import from from graphql now more graphql queries and we will import list posts okay from react we will need uh use effect and use state more about them shortly so we need to uh do um to to do a request to our api and we need to do that whenever this component mounts so the first time it mounts we need to fetch the data from the api and to do that we're gonna use a use effect because that's how we can um do some logic when the component mounts so uh i'm gonna define the method here fetch posts is equal to async because we will have some asynchronous calls to our data api to our backend and after that i'm gonna call it right away so yeah here all the magic should happen i will put everything into a try catch because we will whenever we do some network calls there might be some errors for example the user might not have internet or something might fail so that's why it's advisable to put the network uh calls into a try catch block so uh here let's actually fetch our posts so cost posts result will be equal to a weight api dot graphql and here we will send a graphql operation and which operation the list post operation and we don't need any variables we can go ahead and do a console log posts results to see what we receive from our api uh let's open the debugger which is here and yeah here we can see the object the object contains a field data data the data contains list posts list post contains items and here we can see five items with all the information about that them yeah that's what exactly we need and we need to somehow store this information in our component so for that we are going to use a state uh [Music] yeah a state to save our posts set posts is equal to use date initially it will be an empty array so whenever we receive this information we're gonna call set posts uh post results dot data dot list posts dot items it's a long uh yeah i think that's the right way to do it and in our flat list instead of sending the feed we can send the posts from our state which will come from our back end now we can delete this import feed for for the dummy datum we can save and we can check our screen save yeah i think this comes from uh yeah yeah exactly uh this information comes from our uh end and yeah if i add something new there we will be able to see it right away here so if i change the [Music] title here to a there and i run accommodation one it created and if i reopen the application i should see the new uh the new post with the title hey there so let's search search entire flat okay where are you hey there here it is so now we know that all the information comes from our back end and is the information that we uh created in our database here i'm not sure why this image doesn't load i think it just takes more time to to download it or i think i miss typed the the url but yeah that's uh that's cool uh what do we need to change i think we need to change uh displaying the total price uh because in our dummy data we had a total price but here we don't have a total price and we need to calculate it so in the components uh post index for the total price i'm gonna do the new price multiply by i don't know number of days days and right now we don't have any day picker so i'm gonna say base equal to seven it's just a hard coded thing so we can see that total price now updates and it shows the total price for seven days uh yeah what else yeah the same thing we should do with a map in order to because our map is a different screen and it displays different information so let's uh go ahead and in our screens search results map index we will do the same thing here oh my my light turned off i touched it with come on steve i hope i will not get hey there so in our search results map we should do the same thing but we have a lot of information here where is the feed do we have places okay so we will i'm gonna close that i'm gonna close this one and we need to import the same api graphql and list posts in the map here and we need to this use effect to copy in here and also the use date we'll place it here so instead of places we should um access posts so let's find where we use places and replace it with posts posts posts posts and now now here we can delete the places because we replace it with post let's save something is not working of course uh unexpected token indentation index where export what did they do oh i think i didn't close this one this use effect save cannot read property latitude of undefined okay uh yeah the thing is that in our assets uh in our dummy data our latitude lives inside coordinates but in our data uh the latitude is uh in the root of the post so that's why it says that cannot read so i'm gonna find the coordinate here and i'm just gonna delete it so it should be selected place dot latitude select selected place dot longitude and where else it should be somewhere else as well coordinate here is interesting uh for the coordinate i'm gonna have to create the object with latitude place dot latitude and longitude plays dot longitude yeah well where else we have yeah i think that's it save let's try to search again search and let's view the map okay yeah the map works and these are the places that i created so here i have four places in tenerife and one in usa so if i will find that one from usa we will be able to see the map like jumps to jump there yeah this is the garage of steve jobs so yeah um the map jumps correctly if we go back we are back to tenerife um yeah it works i don't know why is it moving oh chill chill cannon three property image of undefined but if i reload will you be able image of undefined okay all right so yeah we fetched the information both for our list and for our map from our api then we will move to to the next step let's commit everything that we have so far uh get add now come on git add git commit api fetching all right so how are you doing guys let's uh let's have a look someone is asking why aren't you using firebase mostly it's a personal preference to use aws but um there are a lot of advantages of using aws uh amplify and aws in general so yeah that's why let's say that it's my personal preference this is 11 year coder okay hello guys youtuber hello yeah you can find the code on github the link should be in the description down below uh amir is asking will graphql reduce read and write request yes of course yeah uh graphql uh will will aggregate all the requests that you have and send them as one request um and that's the another advantage of graphql so for example if you need information about posts about users and about the comments in rest api you would do i don't know three or four requests just for receiving all this information about the post for example the post the offer of that post and the comments in graphql you can do that with only one request because you you define this schema and you define like what information you need so you need for example a post the offer of that post the comments and you do that everything in one request which is really which is really great so guys for everyone who is joining right now because i see uh some new people here today we are gonna we are uh implementing the back end for the airbnb clone and we have implemented all the ui and layout in react native during previous two videos you can find them on my channel i highly recommend you follow them and then start implementing this back end where you can get the code on my github and do only the back and if you're interested in vet if you're interested in learning uh aws amplify we are we are using aws amplify for the backend and we are integrating authentication which is already done um and yeah with three lines of code we have all this authentication flow for signing in for signing up uh receiving emails confirming um accounts forget password which also sends you a code on your email and so on so let me just sign back in and everything from here was done pretty easily thanks to aws amplify so let's sign back in yeah uh here we are on our welcome page now we are implementing the backend and we already um and we are already uh displaying uh this information about post from our backend database which is also created using aws amplify as a graphql api so yeah here we can see everything from our database we can also see them on the map and the next steps will be uh to learn how to filter information uh to receive only uh yeah information that we need because right now we return all the posts or the all the accommodations from our database which is not something that we want because for example we said here that we only want properties in tenerife and we will be i don't know a crazy team of eight people so if we search we should we should not see this too bad two bedroom apartment and so on so or even more like the steve jobs garage from silicon valley because we set tenerife so that's what we are gonna do next um let's drink some water hmm water with coffee so good okay akram is saying hi i learned a lot from your tutorials thanks man thank you very much and i really appreciate that you find the tutorials valuable okay so uh as i said let's move on and with uh basic filtering of application of um yeah posts so let's uh first of all visualize and see how we can do filtering in our queries and then we will implement them in our application so um let's focus on this show wall properties query and uh our we can find it here as well if we scroll down mutation query show no where is it show wall properties so there is a field here filter and if we open this i don't like it i will better write them you can work with the editor from the left side but i'm gonna write them so this list posts can receive parameters and one of that parameter is the filter parameter so there are a lot of filters that we can apply the first one is for example we want to filter based on number of guests so max guests let's say that we need only like max guest 4 and if we run it right now show all properties validation error we value ok it's not 4 we should give it an object and there is e equal to four this is a bit weird but yeah that's how how we do it here show properties and now we see only one item which has a max max number of guests or four let's query it as well to be able to see them uh show properties yeah max guest four so if you want to see all the filters that you can apply i suggest you open the schema here and in schema there is somewhere here we should find the filters where is it query list post model post filter input and let's find this one and it's yeah here is all the filters so basically we can filter based on id we can filter based on ebench type title uh and so on and yeah all the filters you can see them here it's kind of confusing if that's your first time working with a graphql but yeah you can find more information about that on aws amplify website so let's go back here and why do we see this one okay there my lights okay the thing is that we uh don't want to filter based on uh equality sign i mean on condition we want to filter all uh posts that the maximum number of guests is greater than a number so to do that we can uh write the operation greater gt is greater than and ge is greater than or equal so we will say 4 if we run it we should see all the properties that have a maximum number of guests greater or equal to four so this one is four that's good next one is 12 and this one is six if we write here i don't know 10 we will see only one because we have only one property with 12 guests so yeah this is the filter that we will start implementing in the application so from our application we will send a value here based on the number of guests that we input in the screen in in this screen so we will take this number and we will send it as a filter where in order to see only properties which can accommodate all the guests that we we are searching for and the first thing is that we need uh to send the information from our where is it screens guests so from this screen where we have a number of adults the children and infants we need to send it uh to the next screen to the search results page as a variable so we have it somewhere where do we do the navigation we here we navigate to the search results and we should assign some parameters here to send additional information so screen runs and as a parameter we will say guests will be the number of adults plus the number of children will count only them so let's save and then in our search results already see a problem let's try so here we will need to get that uh that value the number of guests in our search results so let's um take it from the route import medium cannot type import use route from then react navigation native so uh cons route equal to use route and also let's console log the route dot params to see what parameters we get here let's save and let's open our debugger to see the parameters undefined right let's go again for these steps yeah this is something else and here let's add two adults and one children child undefined undefined okay the the problem is that we are redirecting here uh to home explore search results and if we look in the navigation um oh the explorer is here and search yeah search results where is it yeah here is the explorer and the explorer navigator contains this explorer navigator and we are redirecting here to the search results but the problem is that the search results is another navigator so it contains two tabs the list and the map and we receive that options vet parameters in this tab navigator but it doesn't automatically send it to uh below screen list or map because if we wear to um where is it guests to redirect directly to the list page and that will mean that we will add ask grams screen called list i think list like this and here another params i'm just gonna test if this will work say because but this is not the end solution so let's try to go again here and let's check the debugger yeah now we see parameters guests for so if i redirect directly to the list we see however we will not be able to get this information in our map because we redirect it to the list with that parameters okay so let's think how to send um let's go back because that's not no no no no no yeah to the search results and from the search tab navigator here we should take the option of the number of guests and send them down below here okay that's interesting option let's find uh react navigation nested params okay it should be somewhere here because in in previous version of this library these parameters were actually sent to the children so but yeah right now we changed it should see where they nesting multiple navigators we're passing parameters to routes something like this so yeah we will uh stack navigator component it's a it's a tricky tricky thing yeah we know how to send them directly to the screen but uh if i get the route here cost route equal use route and import route from native and if i console log route here will i see them the number of guests yeah i think we will see and then we will be able to send it uh down to the children so 10 10 okay that's not what we need it's the next send yeah uh parameters and guests five okay so yeah in this route we we receive it the number of guests so we will do it in the next way we'll take it from the route parameters const guests equal to route dot params dot how was that guests yeah so we can actually destructure it will take them from this route and will send down to the search results as as a property and to send it as a props we cannot send it directly here and we will re move the component from here we'll expand the tab screen and we'll send the component uh as a as a normal uh react component uh to the children of our screen so that was search results search right and we'll send a guests equal to guests something like this and for the map as well we're gonna expand this [Music] and we're gonna send the guests there as well so let's uh save in the search result we don't need the route we will just console log the props because we should receive it through props save say my name say my name get an involved childhood prompt for the list must be a function returning a react element must be a function returning a react element okay okay for tab navigator with children should be a function we can yeah we shouldn't send them directly but it's a function which will return our search result so make sure that yeah you you follow along with brackets save now let's try to do that should be eight search we see the list let's see if we receive them for props yeah we receive guests eight that's in that screen and here is for the props okay that's uh that's great news because we can use this um in the search results index we can destructure the number of guests const guests from props props and we can take this get um yeah we can take these guests and send them to our list post operation so if we add here a comma now we can add the variables that we need so the same way as we uh added i did additionally additional variables inside this uh query the same way we need to do them there so we need to add a filter with a max guests greater than or equal and a number so we will add a filter marks guests greater or equal than guests let's let's save and let's open our application here yep we see that with eight or more we see only one property and if we go back and search again and now we will save it with only one adult then we'll see all of them because all of them has a maximum number of guests more than or equal than one and if we set a very high number here we will not see anything that's how we do filtering and let's do the same thing in our maps because right now only our list uses filters yeah only our list and the map doesn't use it so let's open our search results search or to do something better no okay index here search result so i will copy the graphql operation from the search result and paste it in search result map graphql operation and we just need to destructure the guests from props i'll add it on the top of the component save and if i select here we see only one two properties and on the map as well only two properties yep filtering works both in the list and in the map so yeah that's how we add filters to graphql queries how we use them and how we send like dynamic data to those filters to be able to receive all information that we need filter so guys how are you doing are you still here following along how do you find this am i going too fast too slow so boring let's drink some coffee with water which has a very bad color so guys for everyone who is joining right now we are building the back end uh for our airbnb clone that we have built in rock native in the previous two videos and today we're gonna build the backend in using aws amplify so we're already uh implementing the authentication with login screen sign up screen for get password and so on um right now we are working on the api we already created we already set up the api we are fetching the data from the api and we implemented some basic filtering for the api in order to receive only the places and only the accommodation that can fit the number of guests that are traveling the next step will be some a bit more advanced filtering it's mostly the same but we will add filtering based on location so if we are searching for a specific city we want to find a tool to fetch uh accommodation only from that city or from that location so that's uh that's how we are gonna uh that's what we are gonna do next uh madan is asking is this tutorial for those who don't know about graphql what to say so basically you will be able to follow along and to do what what i'm doing because i'm showing you every step and yeah the graphql here is not very complicated and you will understand like what you're doing and what what the hell is happening but if you want to know more details about how graphql works behind the scene or how to to to use it in in other projects maybe you will need to to follow along some graphql tutorials um yep uh there's new hoodie yay new hoodie it's here can you see it i really like the the quality and uh of this hoodie i've got also a branded t-shirt hello from sudan hello from moldova all right greeting greetings from turkey hello i see a lot of people from there today uh priyanka uh saying i follow your tutorials it gave me aws amplifier i don't know how to resolve it can you send uh in the discord channel more details about the error some screenshots some code and i will try to help you there all right so guys let's continue and uh with the next step because we retrieved all the accommodation we implemented simple filtering based on only one value and that was the number of guests now we want to filter accommodation based on location so whenever we search for a city we should fetch only accommodation from vet city so how the hell we will uh implement that uh that's a great question uh so the first thing that i want to show you is what data we receive from uh the search bar here to understand like what data do we have uh to work with so for example if i search for uh yeah for a city and if i press on this uh i already console log vrv information so i can see it in rack native debugger uh yeah this is the information that we are receiving uh from google autocomplete and the thing that i need is in geometry and in the geometry it gave me the location the latitude and longitude of that place this is the center of a city uh but we are not interested in that we are interested in the whole city because one city might be i don't know one kilometers wide and our city might be like i don't know like hundreds of kilometers wide so in that situation like we need to know like what is the area of that city in order to to fetch only uh properties uh in that area and then we see another uh property besides location and this is viewport and a viewport has two points north east and south west so basically it defines [Music] a square so if a city is a square it puts the city in a square and then uh it has two points north east which is north and i think this is east so it defines this point and also it defines southwest this point so based on two points uh we can determine like the square like uh of that city like the area of that city so yeah we we have this point and we have this point so based on this information that we have that we receive from google autocomplete we will be able to um uh to fetch and filter only uh properties that live within this circle this square so for example if there is a property here one here one here and one here we will return only these two properties and how we will do that uh we have a latitude and longitude of each property so each one has like a latitude and a longitude and we will compare the latitude to be between the latitude of this point and the latitude of this point and then we'll do another check for the longitude to make sure that they are um between the longitude of these two points so then we will draw these two lines for the longitude and that's how we will uh discard this point we'll discard this point and we will return only these two um places so let's uh go to our console and have a look how we can do that i already implemented something similar in um yeah in here in your dummy data you'll see if you scroll down and it's called show properties based on location so for our filter we define uh the filters for the latitude and longitude and we put put these both filters in a and operator because we want properties that that are between this latitude and this longitude so for the latitude we use of operator between and the same way for the longitude so here is uh the boundaries of for example tenerife tenerife and therefore i don't know how to pronounce it in english so if i show properties based on location i will see everything inside these boundaries and for example if i change from i don't know to something else from 100 to 200 let's run based on location we'll see that there are no items there so yeah using these filters with uh latitude and longitude and the between operator we will be able to fetch so for example here we see only these properties [Music] all right so let's um let's go on and implement these filters inside um inside the our application so uh again first of all we need to send the viewport information from the from this screen to the guest screen and from guest screen to our search results screen in order to be able to filter them based on this this information um so in our screens uh search result no destination search index here is our google places auto complete and here is our uh navigate navigate navigation navigate call that will uh navigate to another screen so we need to send here some data and the data will be uh view port which will take from details dot geometry dot viewport so we'll take this one and we'll send to the guest page and inside guest page where is it guest index uh we will take this information these parameters from our route and we're gonna pass it down uh to the next screen use route const route use route and where where do we navigate here at the bottom now we send only uh the guest parameters and we can send also the viewport that we are taking from route.params.viewport so right now let's save let's open our navigation uh search the result tab navigator and the same way as we took the guest from parameters we will take the viewport view port and we're gonna send it to our screens view equal to viewport uh let's close everything and check you know if in our search results page if we receive this viewport viewport in the props console log viewport and here we go okay let's open the debugger and clear everything okay uh the next i'll clear everything and right now uh we see the viewport of northeast and southwest so we see these two points based on which we have to define our condition in the request so that means that we receive information and in our filter we will inside the filter we will add the and operator because we will have multiple filters and all of them um should be combined using the end operator so the first one will be the max guest the next one will be um let's take it from from here will be latitude and longitude with operator between nope we need to add them inside them all right why why are you running no latitude correct between i'll delete this comment here comma longitude between and deleting this comment jonathan uh real quick we are implementing the back end uh for our uh airbnb clone and we are using aws amplifi to do so so right now we are creating the the backend api and we are implementing the filters in order to receive only properties uh based on a specific location that we take using google autocomplete features and yeah based on that we will be able to filter so that's what we are doing yeah so we need to uh send here the the correct values for the latitude and the longitude and we will take them from the viewport viewport where is it view port here southwest north east latitude longitude okay so let's think uh the latitude should be from um should be from west because yeah from west um so viewport viewport.south west dot latitude until viewport north east dot latitude not sure if that's correct but let's see and for for the longitude uh it's going to be a viewport dot because we need to put the the first one should be the the lower the lower value and the next one should be greater than the previous one so let's try like this and north east north longitude all right let's try and see that works uh probably doesn't so let's write ref search okay we see only the apartments in tenerife on the map the map we didn't implement yet but yeah that's good and if i write uh palo alto we should see the property for the garage of steve jobs and nothing from tenerife so i think that uh that means that our filters work correctly and we uh we return only only the properties that match these filters so here we see everything for it's only two um uh okay okay we need to do the same thing with our map or better or better you see how we are um copy pasting the code from the list to the map uh and we in list we do a fetch and in map we do another fetch and this is like uh double the effort because our list and map should basically display the same information so i'm thinking to move the querying logic inside this uh search result tab uh navigator and we will send to the search results uh already the the data that it needs to to to display so we'll do the query inside this parent component which is a navigator because here we have like all the information that we need like the guest the viewport and so on and then we'll just send the data that we receive down below to the screens i think that will be smarter and yeah let's uh let's try to do that so use effect i'm gonna and we will not have to uh where is it here we will not have to do this two times in two different uh screens so we will need the state we will need to to import use state and use effect uh okay here we set the post and we just need to send them uh instead of sending guests and viewport yeah we will send the post directly so posts equal to posts this way in this component we do the querying logic and there we just do the displaying logic posts and here in the index i will take posts from here data posts save do you work list i guess it does i will do the same for the map and then test it to see if it actually works so search results map index from uh the props we'll take posts and we'll delete the post here and we'll delete the u this use effect but where was doing the fetching save and now let's refresh the application and check if it works sorry so let's search for example uh for tenerife one guest and here we see uh two properties that's good and on the map as well we see two properties awesome i think that's really great and yeah we can see both of them and if i were to search palo alto search when we see the garage of steve jobs and on the map we see it here yeah i think that also works and now the fetching is done inside one component and is done only once for both list view and map view all right so that was uh filtering based on location so yeah let's do git commit filter base on location and um yeah for for one we can assign um a listener to uh whenever the map updates so whenever we scroll we can go ahead and rerun this fetching based on this viewport so we know like the viewport that we see on the screen so we can run that query again with different values for the latitude and longitude and we'll receive results of all accommodation in this area so i think that's uh that's really cool and if you will implement that share with me in discord that would be really nice so guys that's it with our graphql api and i think that's it with our uh the backend for our airbnb clone do you have any questions let's get to that how did you find this by the way i will um after the stream i'll publish all the code to github and i encourage you to follow along and implement and do everything yourself because that's the best way to learn but if you get into some problems and want to check the source code you can find it on github all right so guys yeah prepare your questions i'm gonna go to the toilet real quick and in one minute i'm gonna be back and we can chat for a bit i'm gonna be back hello hello i am back marcos is asking do you also build flutter projects no i don't not yet maybe in future i will try but at this moment no come on guys ask some questions let's talk a bit and we and then we can finish this year with a nice live stream we finish this project and yeah i'm planning a lot of content nowadays that i'm gonna do in 2021 and i'm really pumped and i've i i will try to to keep up with uh uploading consistently a live stream build every week as i've been doing for the last three months and also i'm planning to to upload some uh short short format videos of like 10-15 minutes of tutorials or anything else so if you if you're interested in any specific topic let me know down below what you would like to to see in in the next year and i will take it into consideration and we'll do some cool videos about it next year will you use typescript i use typescript for a couple of projects for a couple of builds i think for twitter we use typescript for spotify if i'm not mistaken and um yeah it's a it's a it's a great uh language extension of javascript and uh i really love it however during live streams i find that they spend a lot of time uh working with types and defining types and making sure that everything is typed and uh i thought that i'm wasting too much time on that and during live stream i need to be concise so that's why i'm trying some projects in javascript now why don't you try to start your own startup that's a good question i already did and i'm working on it for around two and a half years uh yeah i'm working on a startup in the sports industry it's called vitinium you can find it online and this is my second one the first one we worked for also around two years we've been also at um the conference how is it called the techcrunch in berlin with that startup but yeah we decided to to close it down to take the lessons and move on thanks for asking are you interested in startups i'm also thinking about uh doing some more content about startups who are documenting um on this channel the process of uh creating building a startup because that's uh what i'm really passionate about and that's everything not just development brand is about because my philosophy is that we shouldn't be just developers we should be more like problem solvers and use programming as a tool uh to get where we want to be or to solve some problems and uh to build real products real businesses and yeah that's the direction i want to go with with this brand and with this channel don't be just developers if you want to have an impact you should be a bit more than just developers uh karmali is saying uber clone please yes we will do a uber clone a lot of people are asking about uber clone that might be uh the first build of 2021. would you ever do firebase i know aws is your favorite uh firebase yeah firebase uh i might do a project in firebase uh let's see let's see i see a lot of people want to do that i'm using firebase at my startup for only for analytics and it's going pretty great uh deck with tj that would be great i agree with everything you said thank you very much yeah i have a lot i have a lot of ideas for for the channel um but more on that more on that later i just need to to find time to implement all of them so yep so guys did you follow along this tutorial or uh the previous builds not the previous build the previous episode of this build did you implement the airbnb clone yourself uh the problem with aws uh it requires a credit card information um yep yep aws requires a credit card information even though they are not charging you unless you i don't know like use some of the of the services like in in the wrong way because while you're learning most of the services should be under free tier so i should be shouldn't you shouldn't be charged priyank is on part two great um how's it going with the maps with everything that was something new that we integrated maps and autocomplete from google do you also do react projects as well um i haven't done any react js projects on this channel because as you saw i'm just starting out and in the beginning i want to stay laser focused on one technology on a smaller set of technologies and i decided to go with react native and aws amplify react native because we are using react native at our startup and even though i'm not a front-end developer and at my startup we the front-end is uh is done by my team uh we have like a team of four amazing developers and um i'm mostly doing backend and architecture and aws stuff but i thought that okay like let's do some react native because that's uh with something visual and that's something exciting and i really love this technology and for aws amplify uh i played around with it and i really love and uh and enjoy working with it but they have never had a chance to to work with amplify in a production environment or like in in a bigger project so i decided like level okay let's go with amplify here so yeah uh but uh yeah react.js is something that uh we might we will definitely do here i can say that we will definitely do some react just projects but yeah probably in the short term we will still do some react native projects and then we can diversify and do some other projects maybe i will um i'll get something some somebody on board to to help me with these projects um because yeah i'm quite limited on time i have my startup i'm finishing this next quarter i'm finishing my university and i'll have my graduation assignment so yeah a lot of things to do besides youtube but i hope that next year i will uh i'll definitely have more time to to focus on youtube uh techwavetj said that he will end up watching it later and uh i really hope that you will actually build along because that's how you learn and that's a great way to to add the project to your portfolio one of uh one of the subscribers followed the spotify clone and then he added the spotify clone to his portfolio and shortly he found a client that wanted a radio application which was similar to spotify and he built that radio application and that was his first client and he made uh around 1 000 uh dollars and yeah but the story like shocked me and i was like yes it's working something something great so yeah follow along add them to your portfolio and apply to jobs or to some project if you want to get into freelancing and start making money [Music] i'm wondering whether i should learn react before following your clone in react native well i don't think that to get into react native uh you don't need to know react beforehand it definitely helps uh if you already know react uh to get into react native because most of the things are the same uh only like the rendering uh way is a bit different and for example in react you have i know divs and other elements here you have views for example but everything that is from the core react which is i don't know like components functional components hooks uh state props navigation and all that stuff they're uh the same so it's uh easier but if you don't know react you can get started with rack native from the beginning and that's what i did i started with react native and then at my startup we needed a dashboard for the web to manage all the users and then i built it in uh react.js and it was also an easy switch when you know react native to go to react.js and vice versa so you can start with whichever you want uh let me put the chat here so you can also see it what what i'm reading uh what is the idea after uh you cover clone maybe figma to react native um yeah uh robin hood up clone uh some trading application that that would be interesting to work with grubs uh in react native yeah that's that's a good idea thank you very much i'll add it to my list thank you so much for your advice my pleasure uh what what what experience do you have already yeah i think this we finished this build a bit uh earlier than i thought uh because in the beginning i started uh the live streams the live streams were like i don't know one hour then it was like one and a half hour then two hours three hours when it got to a point where we were doing like four hour live streams because i always wanted to get into more details to try to explain uh more in depth all the steps um yeah so that's why it takes like more and more time and i know that nowadays people have uh attention span of a gold a goldfish so i'm trying to to keep it more condensed so we managed to to do it in how much we started i think two and a half hours that's that's nice i wanna work in usa i have two years experiencing react native um awesome what can i say can i make it bigger all right where where are you from um by the way priyank i'm coming from angular and ionic now learning rock native awesome bro 2 hours and 30 minutes yep but we're already talking for 15 minutes so we can stay 15 more minutes and then i will have to leave so if you have any questions now is the time guys let's let's discuss them now and let's end this live stream so the good thing is that nowadays more and more companies move to to work remotely so you can even live in india and work for a u.s company or you can live in india and do freelancing and find clients in the usa and i think that's that's really great um but nowadays um you're less dependent on one location so if you want to be successful you don't have to necessarily be in usa or in i don't know san francisco or something like that you can work from anywhere in the world with the clients or with companies from other countries so that's what i that's why what i'm doing starting from the next yeah starting from february i'm moving to an island and i'm going to be working from there i'm moving closer to my startup partners and yeah at a place where it's always sunny and i'll be able to to work from there with at companies at 10 from any country what's going to be the next build uh most probably it's going to be uber clone a lot of people are asking for that uh yeah i think it's going to be uber clone and it's going to be next year probably i'm going to take one week of holidays to do some planning of content and priorities for the next year maybe you should show us quick uh deployment um i'll prepare something for that in another part because i wanted to i want to be prepared for that and it might take a bit more than when the time that we have today so yeah i'll definitely do deployment i know that uh with a lot of people are asking for that and with that we can say that we cover the full spectrum of developing a mobile application starting from front and back and then deploying it so i'm very interested in doing that uh what is your photo on flutter in my area flutter is catching up with frag native i didn't try working with flutter i didn't try it myself i only saw some code in flutter and my honest opinion is that flutter is ugly when i look at the flutter code it's like i can't look at it i don't know but yeah i saw that it's uh it's growing pretty pretty well and uh i'm not saying that i will not try it maybe i will love it more than react native who knows but that was my first impression when seeing flutter flutter code what island what island violin that i was using today where is it tenerife here it's somewhere here uh yeah yeah definitely uber clone is coming don't worry yeah yeah well those nested like childs and like it's it's like everything is is yeah it's the same thing and it's so much nesting and maybe i saw a poorly written code and if you actually start doing that um in a good way or how you're supposed to do or like to follow some best practices maybe the code will look better but it's still like it it still looks ugly i don't know that's my opinion uh can you briefly explain how to install and set up an already ready to go flutter application yeah that's what i was saying right now i didn't work with flutter so probably i cannot do it right now maybe if i will get into flutter and if i will enjoy flutter maybe i'll do that which are the steps i think that um we should have like good documentation on how to get started so you just go and search platter get started so let's learn flutter okay guys in today's live stream we'll create airbnb cloning flutter let's go so yeah joking yeah here i think all the steps that you need to take to to download install so much steps hate it i hate all the installation and setting up things i always wanted like to to have somebody to install and set up everything on my laptop and so i can just work whenever i get a new laptop like i i hate installing everything i need like two days to to set up everything and after i do like i never touch it so yeah yeah as spring says they got pretty good dogs so you should check it out hello vadim i'm from react background how hard it will be for me to get interact native the code seems familiar yeah it's it's going to be very easy to get into react native really like the only difference that i can think right now are um yeah the built-in components that you render so you don't have like for example a div but you have a view you don't have like a h1 but you have text and uh and so on um and also the the styles probably are different because uh indirect native we don't have css we have styles in javascript um but once you you understand how they are written um they are very similar to css so if you look at a style sheet here let's let's get a component detailed post style so if you look here you can see that it looks very similar to css the only thing is that in css we have for example aspect ratio with a dash here we follow a camel case for everything and most of the things uh without even researching you can you can do based on um how is it done in css and most of the time it works so and also yeah some some um libraries some native libraries that you will need but yeah they have good documentation and i think if you have a react uh background like getting into react native is pretty easy uh does react native have uh redux uh yes they they have like redux and everything works with uh at the base of react native we have react so yeah most of the libraries that we are using in uh react we can use it in react native and that goes with redux i didn't work with funk but most probably use context yes because use context is a react thing so react native uses react do you have css ings or style component in native tool uh yeah it's css in javascript in jazz all right guys um i think we can uh call it a day thank you very much for joining this live stream thank you everyone who who is following along thanks for the support um yeah i'm really grateful for for everything that has happened during this year um yeah we covered uh a small but very uh united community around the uh around this um thanks everyone who is joining who joined the discord channel who is helping others to to get started when they are stuck um yeah i'm really grateful for everything and i think that 2021 will be even uh better with more projects with more uh content and um yeah okay guys uh i wish you a merry christmas uh what else what else yeah um merry christmas and see you in the next year and as always guys do during the the holidays don't forget to to stay hydrated to take care

Channel: notJust․dev

Views: 44,774

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, javascript, typescript, react tutorial, react native, javascript tutorial, programming, react native clone, react native app, react native for beginners, learn react native, react native project, react native project tutorial, react native tutorial, build airbnb clone, airbnb clone react native, airbnb clone tutorial, airbnb clone

Id: ch2oOdnLkqw

Length: 151min 55sec (9115 seconds)

Published: Thu Dec 24 2020