Build a full stack UBER EATS clone - 5/5 Days Challenge 🔴

what's up ninjas developers welcome back to a new live stream and today we are at day five of our uber is challenge we went such a long journey from monday and now is friday and we are finally finishing up all the projects that we have here so uh if you are new here if you just stumble upon this video a little context for you in this challenge we are building uh not one not so wait a second okay uh so as i was saying in this challenge we are building the ubereats uh applications and we're building not one not two but we're gonna build free application by the end of this challenge uh starting from the user side application driver side application and the restaurant dashboard so everything is done with react native and aws amplify and this is a great opportunity for you to improve your skills with these technologies let's go quickly over the plan like let's review what we have managed to do in previous days and what is the plan for today and also for future so in the day one we have implemented the user interface in react native of the user side application from where he will be able to see restaurants order his next meal manage his basket and so on in the day two we implemented the back end for vet application with authentication data modeling and fetching all the data from the api in the day free we implemented the driver side application uh with maps directions bottom sheet and so on and in day four yesterday we have started working on the driver side application back end to connect it to the same backend as we have built for the user app so in order for vm to work with the same data there the original plan was to uh cover their restaurant dashboard today in the day five uh but we had to change a bit of the plans because yesterday we didn't manage to do everything in the user in the driver side application and i don't want just to skip over it and move uh to to the new project to the dashboard without finishing up and cleaning everything that we have here improving and uh yeah wrapping up all the features that we already started another thing that we still have to do here is the data synchronization between user and driver and that was a big goal of mine to to show you how to do that so for that reason uh today we're not going to work on the restaurant dashboard today we're gonna finish the driver side application we're gonna implement the real-time data synchronization between driver and user side application and i want to display the live location of a driver inside the user application so the user can know where is his next order uh yeah that's gonna be like the track driver location displayed in the user app and also advanced like we're going to polish the features we're going to refactor our code uh to have it um ready to go but uh that doesn't mean that we're not going to do that dashboard and the good news is that we decided to plan the dashboard as two separate tutorials coming up in the following weeks one of them is going to be about building the dashboard with react.js and yeah if we were to do it today probably we would have been um like we had to go over this because we didn't have the the amount of time to implement everything today so one tutorial is coming up for the building the dashboard with ragjez and valver1 is for connecting the dashboard to amplify and managing the word there's managing the menu and the information about the restaurant from var so this thing is coming up probably uh not the next week but starting from the week after that we're gonna get into that and implement it also here on the channel so if you want to follow along uh you know i always update the asset bundle uh with the most updated assets that you will need and also i include vr the source code each day so you can have a look if you are stuck to make to compare with with your code or even to start from the same place as we are starting today so download the asset bundle at assets.notjust.dev slash uber eats um and with that being said i think we can get started in day five and for everyone who is new here you're welcome on this channel uh hello my name is vadim and yeah on this channel i'm trying to share my knowledge and my experience as a full stack developer with you guys and yeah it's been a pleasure to do so in the past two years and we're gonna continue to do so so if you are interested in becoming a full stack mobile developer make sure to subscribe to our channel down below because that will help us a lot and yes we have guess who we have lucas here hello lucas hello guys hello hello finally we're back here it's already it feels uh very comforting to be at five here knowing what's waiting yeah interesting it feels like home yeah yeah it feels like home you're gonna miss it next week i'm definitely going to miss so yeah i'm very excited to be here again and my name is lucas as probably throughout this five weeks you're five days i mean you already know and yeah i'm going to i'm also a developer so we'll see i'm very excited for this day we'll see how we'll connect everything i'm very excited and yeah yeah we've went a long way it does it does so far it was a very interesting at least for me a process of building these complex applications connecting them together and i hope that you guys are also taking value out of these live streams so uh let's have a look where we uh stopped yesterday so yesterday we were working on the driver side application and connecting it with our back end we managed to implement authentication we managed to implement the driver driver crude operation to create a driver in the database when you first launched the application uh and also we started working on managing the worders like displaying them on a map as you can see here displaying them in the bottom sheet here in a list and uh also like the details about it calculating the distance and so on uh we also implemented some of things of accepting the word there and changing the status of it so for example we can accept the worder and that will put it automatically in the order we will change the status of a worder in accepted on the backend and after we will get closer to the user we will be able to move from one state to another if i remember correctly yesterday the last thing that we had there was um a bug in the last screen whenever we accepted whenever we finished the order right yeah we actually didn't test if it's changing the status correctly throughout the whole uh route we didn't have time to do that okay so that's that's what we're gonna do today uh before that i think we will um a good idea would be to start refactoring a bit our code that start refactoring the application in order for us to easier um either test everything that is working and easier find the bugs if we will have any uh so what is it let's see what is the difference between a base amplifi and aws upsync aws upsync is a service in aws that is specifically for uh for uh building the apis and uh the graphql apis but amplify has way more services around it that helps you integrate with for example authentication storage api analytics and a bunch more of it there are there uh so let's uh let's what let's go ahead and see what do we have to work with um by the way the code as i said is in the asset bundle so you can download and have a look at what we have at the moment so we are going to start we we were working a lot on the word delivery screen and here is where we have a lot of logic a lot of rendering logic like over almost 300 lines of code i'm thinking that let's go ahead and start extracting some of these things to separate components [Music] just to have an idea where to start right that's going to be a challenge what yeah yeah to keep this whole component cleaner yes oh my god oh my god jonathan thank you very much you are you are the man who uh donated 100 dollars here these days oh my god congratulations it's the final day this has been a fun challenge wow that is really an exciting i am thank you very much i wanted to curse but i don't know if it's possible here or not oh that's freaking insane wow jonathan crazy dude okay this these things doesn't stop amazing me okay thank you very much yeah yes i really like it oh yeah yeah jonathan it's insane okay i find it hard to find words like what to say right now i don't know honestly i don't know what to say it's just like mind-blowing okay interesting wow the support from john it's crazy all right so after that we should get back to work it uh i got even warm all right so that's interesting uh how to start yeah right now how to know where to start for some context that's uh around 50 of what uh youtube is paying us in a month in a month it's insane it's crazy it's interesting like to to put it in perspective so once you say it very correctly speechless simply speaking speechless okay so as i was saying wha what are you saying actually i don't remember anything from there on i'm blank that at first when i saw this red like uh box i thought okay is it two like points just something something and i see oh there's too many zeros oh i said the word and i thought geez that's definitely too many zeros to be and then i looked at the symbol and it's dollars apparently uh look what uh i'm thinking so our screen here is like not here because we are talking about the next screen is first of all made up of two things one of them is everything that is inside the bottom sheet in the bottom sheet and the other one is everything related to the map i am thinking to extract our bottom sheet to a separate component [Music] i'm just thinking like if we will have all the data that we need there for example water dishes these things we take them from uh from the context the total uh kilometers is coming from the maps so it's a it's shared between both like the bottom sheet and also from the map so most probably we're gonna have to to to extract a lot of things like in some kind of global state using context so we're gonna work a lot of co with contexts today to to properly separate everything so with that being said let's go ahead and and give it a try so in the water delivery uh i'm gonna create a new component for our bottom sheet like everything that is in this bottom sheet i'm gonna put it into a separate component so let's go ahead in the word delivery i'm gonna create a new file here for the um details or what bottom sheet button sheet is not very the best name for this component to be honest uh button model model button sheet details much details let's try so here uh we're going to have this component const bottom bottom details which is going to be a simple component and we are going to return everything from the index that is inside the bottom sheet so from the order delivery index let's go ahead and copy everything starting from the bottom sheet all the way until it ends so all the way till here okay let's cut this from here and put it here now we're going to have to work a lot with bringing bubble things that we are missing here for example i'm going to bring all the imports because that's going to be easier for me to bring all of them and just delete the ones that we are not using uh here and i'm not even gonna start to clean them up because i still need to to take out some some functionalities here for example for example what from where to start for example yeah like these things related to the button like the function on button pressed this should be moved to the bottom right here because the button is here the same for the render button title should be brought here that is button disabled should be brought here that's already a lot less lines of code yeah like it's going to be easier like if we split the logic related to the map location position we have a logic of like rendering information managing status and so on at least that's what i think at the moment we'll see how it will work for snap points snap points is related to the bottom sheet so let's move it from here uh to here import use memo uh i didn't delete anything so that's why um that's why i did that bottom sheet ref as well take it from here let's bring it here index uh is driver close this isn't something that we will think how to share it between the other things but probably we're going to do it for a context [Music] let's remove these order statuses from here oh let's bring the [Applause] use water context because we have things like dishes except where they're complete whether these are things that we need in the bottom sheet here yep okay let's go ahead and explore this bottom sheet and now let's start to work with fixing the errors as they appear in replication so export default bottom sheet details now in our index here let's let's import bottom sheet details from this directory and let's render it after we render the map view so after the map view yeah here we're going to have a lot of errors but we're going to go for them and fix them so can find variable total means total minutes um is a state variable here right is total total kilometers is a state variable here i think you can delete this comment here most likely will not use yeah okay one way would be to simply send them through props from here to the bottom sheet but let's think how how many how much data will that be but let's start by props and if we will get to a point where we will send a lot of data then we will uh think about moving this um v state like total minutes to to a context to to to make it like as a global state so let's go ahead in this bottom sheet here let's send total kilometers total kilometers total minutes equal total minutes and you know what uh why do we um why do we keep state this set is driver close because we know the distance so we always can calculate it like this without having to keep in state the only thing i think why we were having it in order to like after it changes but yeah we're still re-rendering yeah we're still remembering the distance yeah the distance is like a derivative value out of a distance so it only depends on the distance and i think that we can calculate it like that so let's go ahead and remove this set this driver close and remove the whole state of ease driver close this one we don't need it anymore uh now to fix that issue [Music] in the bottom sheet not having access to total kilometers in total minutes let's go ahead and bottom sheet details and structure them from the props so i'm gonna take them like this and i'm gonna say const equal hello dtf total kilometers and total minutes okay now we have him here and let's go ahead i think did you deliver oh wow oh because we don't use it because you didn't deliver delete uh is delivery driver close or something with that from the code did you let's see uh ease driver close so is driver close only two places here these two i will declare it as a pro as an variable cost is driver close equal total kilometers less than zero point in order to make it easier to test i think you can work with every 500 meters because you remember last time that's one kilometers yeah or one kilometer um decrease for higher accuracy yeah and then also change how often do we update no i think we are updating every 100 meters the user location uh user location but then we could still keep that but as well like i think every 100 meters like might be too much so where is it like here uh on in the order delivery like if you want to make less requests to the google api to recalculate everything we can go ahead and uh increase this and it will just update less often like 500 meters i think is good of course like if you want to be very very responsive like you can leave like 100 meters or even lower but now it's already better so we can go ahead and remove like fetch waters let's try to remove from the bottom sheet uh details everything that we don't need so i see a very big chunk of imports here that we don't need so let's remove them right away uh bottom sheet flat list we don't need use window dimension no activity indicator no and use state and use effect we don't use here and with that we have a bit cleaner code right well quite a bit yeah so uh let's do the same in the index.js let's go on the top and remove everything that we don't need here like use memo text pressable everything related to the bottom sheet and the font of icons data store we don't need it here order word edition so one we don't need it here now it's a bit better okay okay we could do the same extracting markers because these are some components that are very similar like this market the marker of a user and the marker of the restaurant and we can extract them to a separate file and just send there like what icon do we want to store to display so let's go ahead and create a new file custom marker dot js let's do cost custom marker return something and export default custom marker now from the index let's grab there actually was kind of the same right they are exactly the same the only like why do you think they're different because the coordinates are bigger for the user the only thing that changes is the icon yeah so let's grab like this like one of them like from marker to marker let's bring them to custom marker here and let's think about like uh the data that we will need to receive in order to display it here but we will have to import marker from rack native maps is it from apps yeah we will have to import a view from yeah native black native thank you and to import and type from expo vector icons okay now uh we will need here latitude and longitude so let's take them as let's think how it's going to be easier to send this easier for sure as props but no yeah yeah for props but like the structure of props should we have like a word that will gonna be like these coordinates or should we have just latitude but let's see how it's going to be easier for us to send them and we will decide uh that way so let's go ahead and instead of rendering these these two markers that we're going to delete in a moment let's display the custom marker that was imported automatically on the same directory here so custom marker uh we need to send latitude and longitude we can start with the easy ones title description yeah title equal where the restaurant name description this one address uh we will need to say some kind of a type to know like what icon to display the shop one or the restaurant yeah so type is gonna be 7698 good morning thanks once again for this great education i'm enjoying catching up in between client meetings have a beautiful weekend thank you very much thank you and we're glad you're enjoying and good luck with the client meetings hopefully they're not annoying you too much and also have a beautiful weekend hector as well you're welcome we hope you're really enjoying this challenge hello hello you know what i'm gonna maybe it's gonna be a bit hacky but look uh at the things that we are accessing it's the same dot lut dot lng dot name dot address and for the user is the same dot where in the delivery location we have dot let dot lng dot name and dot address yeah so we could say simply data equal to worder.restaurant and for the second one data is equal to user and we will just simply say data.lat data.lng efficiency at its finest here sometimes being smart as i am right now is not the best approach because like it might confuse people and being explicit is even better but i think here it makes a lot of sense it will make sense i mean so let's go ahead and custom marker and get the data and the type so uh here we simply get beta dot latitude and it doesn't matter if it's user.latitude or restaurant.latitude they will both be the same here data.lng for the name as well data.name and address data dot address and only for this uh icon we're gonna say if type is equal to rest i'll run then display this one right made a mistake double e like this yeah uh and otherwise let's do otherwise on uh let's bring our icon for the user this one material icons our clients are never annoying right no no of course no and we see the restaurant on our location oh yeah because we said here type is user yeah you didn't import the icons i can materialize them right so material i can import it here and i need to uh to go in our amplify studio content and to reset the state for that word of it we're working with because that one is looking good so it's the first one and let's put it in ready for pickup to be able to dis to see it on in our application come on the name is restaurant and the name is shop for the icons it's very weird i think you'll have to do it change them no no no this is like black is what you found and it's a restaurant because it looks like fork and spoon and oh yes yes yes yes exactly that's where you need to bring the food they're waiting for level yeah and i'm gonna try to zoom in i see that maps on ios simulator are a little bit more responsive although it's as hard to navigate them as this one hello oh no it's okay uh we can go here that's where i have to go it shows that okay trust me that i'm near the user yeah last time we changed there but it works i it works i see that the user thing is there just let me double check yeah restaurant here is uh this one and they will display the right data yes perfect and i think uh if we are still working with this custom marker i think on our order screen we are still using some custom markers marker id oh it's name address latitude longitude and yeah i think it's the same one so for that reason i'm gonna extract the custom market that we just defined from the order delivery to the components folder because we just realized that it's uh used both in the order delivery screen and in the first orders screen so we can reuse them so let's go in components add a new folder custom marker uh let's go ahead and say index.js actually instead of that i'm just gonna drag and drop this custom marker file from the order delivery to our custom marker move uh update imports yes and we can rename it probably better to index to easier imported update imports yes uh does it need styles no it doesn't need styles in this screen it works so let's do the same in the orders screen where we are rendering the markers on the map so instead of this let's render a custom marker with data is going to be order dot restaurant type is going to be restaurant uh and key we're gonna keep the same key as here no now we can remove this marker that we were using and keep using our custom marker let's go back and yes we see it let's refresh the double check why you're so slow come on it's not operating today okay so what else uh are you planning to refactor the map itself uh we'll go once again over the code to see like what's easier to to replace something like custom marker it was a really easy refactor but it improved the code a lot like even here like like instead of how many lines of code here we have just simply two so now i can remove from where the delivery the old markers i can already remove some of the icons from here also marker marker and yeah let's see let's see what else do we have you have two if checks for a driver location you can remove probably one yeah this one here and this one here we need only one okay and then we have a map view the map view direction custom marker button actually now like look like the whole uh rendering logic can fit in like two screens yep and the whole file is almost 100 so we made it almost three times less code yeah now from the rendering logic i don't see any other things that we can take take out um for details like restaurant dishes are using yelp or something else so no we're just coming up with them on our own and using seeding from avs amplify yeah we we have our database on on aws we're using amplify so all the data is coming from there [Music] i think it's good to go yeah looking at this code it's better let's have a look at the word delivery bottom sheet here and see what we can improve here so in this bottom sheet what do we have we have hmm okay i'm tempted to extract like this thing into a separate component i don't know why just because it doesn't have a lot of logic it's only like rendering information so we're not gonna have to work too much with it what do you say should we okay now let's let's keep it here it's not a big problem uh for this render title button as i look here you know what we can do [Music] we can have a map that will map a status to a title and then simply get the title from that map so for example we could have cost status to title is equal to we have a map and when the status is ready for pickup the title will be accept worder when the status is accepted the title will be pick worder and when the status is picked up this one will be complete delivery and now instead of having this function render button title we can go ahead in our button itself render button title and say title where status to title give me the value with the key order dot status and if i go here i see accept order and also i can get this map outside of a component not to have to recreate every time a component re-renders a we refactor that one um maybe the same we can do for this one is button disabled is button disabled [Music] i could improve this one but i'm not sure like if it will make uh the code better because it will like this one is clear like what what should happen in any state i could write like all these if statements in a return like i don't know were there status or this one but it's not even this one i mean i could make it in a same single order any ideas how to improve improve this yeah the problem is like we need to also check for whether the driver is close as well like i looked at this and this is quite similar yep and they too can be put into a if statement like if accepted or up if one of these this array includes the worder.status and is driver close then return follows hmm i don't know i i i'm wondering what would be more performant as well i thinking checking for whether it's an array is not as performant as like checking like with a simple if or like this and uh this one and making the status here not to have to repeat word or worder so status equal order so which way do you think it's better i don't think i would use includes i think i would go for the second approach okay yeah i think it it's it's a bit more clear like if status is ever accepted or picked up okay let's leave it like this um and you were suggesting something here as well first of all i'm gonna rename it like this and where is this on button pressed oh but we don't have map ref here [Music] hmm okay at the time hey thumb uh why don't you use typescript this whole application already like takes quite a bit of time to do and to show case therefore like we decided typescript will take even more time and it will be a little bit more confusing so let's go without it yeah to be more beginner friendly um yeah so uh we will need this map graph here let's take it from props map wrap and from the word delivery where we render bottom sheet we can send them map ref map ref okay so um a weight complete welder you want to refactor this one as well just looking at it if if it makes sense we can destruction escapos that's one thing that we are using over and over and yeah this is uh this uh i miss you saying this build is not beginner friendly it's a little bit more advanced as well yeah it includes more things and probably not completely beginner friendly but i mean you could follow and if you have a little bit of experience so uh in our case something didn't work with our complete order yesterday so let's go ahead and check what's going on with a complete order that is in our user use order context pickup order is not a weight as well and the only complete order is away yeah we could do that but uh it doesn't really matter here like why am i waiting here is wait the execution of this complete order and only then navigate back oh yes make sense yeah but here like nothing happens afterwards and yeah so what will be better for my applications back in firebase or some service like avs amplify uh depends on what experience do you have and it also depends on what application you're building like if you already have experience with firebase go ahead implement it with firebase if you don't have experience both with firebase and amplify i recommend to you to give amplifier a shot try it and see how it goes we have a lot of content on amplify on the channel i thought you were gonna say right away amplify i didn't expect you to say it depends but it makes a lot of sense like with the uh experience thing definitely yeah and i didn't had much experience with amplify before like this challenge so actually no experience with it so yeah actually you know why it didn't work for us yesterday yep and it comes also for visa wait what i was saying so where is it uh in the bottom sheet here we have a weight complete worder but the problem is that in the order context where the context yeah yeah context order context our complete worder is not in a sync function it's using dot van so it navigates back before finishing saving this and that's why we didn't see it working so let's do a scene here and instead of this let's do const updated order equal to a weight data store we don't need the van and we can set order with updated order okay so should we give it a try to follow the whole course um overdrive like the full i think so the driver opens the application he waits until it loads and i think this big blue loading screen never meant anything good so do you think so yeah i i remember at least from our experience i know so so yeah yeah i think a weight is the same as dot van but the difference is that uh with the previous approach with dot van we started executing the data store and then we uh returned from this function right away without waiting for that result like we sent in the van a callback function that will update but the problem was that we were not able to wait as our complete water was not a sink uh because we need first of all to save everything and only then like to close the bottom sheet um component and then navigation go back and we've got dot valid you would have to implement a new promise there so it's much easier to do it like this in this specific scenario and tom hardy saying great stuff this is a huge project to commit to doing live and yeah and i we hope you you are enjoying this as much as we do so as you said okay you're right again still this one maybe just to restart your server well what you did that or no i didn't okay let's see then okay let's do it okay finally like we're going to start testing and getting into actually there's not that much of things left on this yeah it's mostly polishing but what i'm interested is actually to to implement like showing the life location of a driver in the user side up yeah this one is going to be interesting yeah so there's still quite a bit of work to do we're not updating driver's location in the back end as well yet yes yeah yet so the driver comes here he sees on the map like some worders uh then he decides okay let me take this one he says that it's 200 kilometers no worries like that's perfectly fine i can uh go on a bicycle there working they will wait so we accepted the word there the map automatically focused on us and the route now is towards the restaurant it's hard to showcase it like that you didn't accept it maybe change your own location as well yes right now if you yeah and also let's change some of uh to make them a bit closer like it's crazy how far we are yeah so for the user i need to give it something similar to the restaurant it would be good to know kantamir i don't know how you pronounce that city but somewhere there i think it's good enough look what we're gonna do we're gonna even do it like this how do you pronounce that city's name someone is going to be there like this this is going to be the restaurant so let's go to the restaurant which one the last one williams that's the one we're working with and to two for later to this this one and for longitude is this one save now the user is going to be here national art museum look have you ever been there that's a real actually that's a really beautiful building have you ever been there i'm most really i passed for it but i haven't like you know when you live like in your own country like you never do like exciting or going to things like this well i do sometimes during the summer yeah i don't like to be in the city though i am more like a nature guy i hate being in the city and where's i don't know why not a fan harder just give me some dots here cannot copy it properly oh like this so this one is going to be our user yes so let's go to user uh this is our user latitude it's going to be this one actually guys what do you prefer more cities or nature i'm always wondering like because they're like here all day yeah same same definitely and uh also our location is going to be somewhere here okay let's go in our android settings let's james city guy here nice i i'm wondering like what has bigger percentage of people we can do a poll you can you can go on youtube and create a poll let's have some fun okay let's create a poll i actually i don't think i will be able but let's see okay so we updated our location so let's go ahead and restart our application to see the new positions that we just updated [Music] i don't have any rights to do that maybe a lotunda will hear and create if he is able to so let's go on the first restaurant williamson the one that we just updated and we see that it's only three kilometers that's already better uh and it's a ten minute drive okay so let's go ahead and accept the order so let's press accept and possible and handle promise rejections that's good we have a map reference and not working i think as well uh variable driver location variable driver location perfect that's coming from our um refactoring but it's it's good because we are going to fix it now uh probably in the bottom sheet navigator driver location uh this is for yeah okay so i think instead of um instead of sending the mapref to the bottom sheet navigator which has nothing to do with the bottom sheet actually i would rather say i'm gonna keep this logic that is about the map i'm gonna put this logic in a function inside our index.js because our index digest now is responsible for the maps and that function is going to be called const focus or zoo zoom in on driver and this is what the function will do and i'm going to send this function as a callback function to our bottom sheet instead of my paragraph because i don't want to send them up revere but i'm going to send a property called on accept worm yeah nor you're accepted that's when you launch on accepted is gonna trigger that zoom in on driver functionality so let's go back to the bottom sheet here let's instead of getting the map ref get there on accepted and we will call this here on accepted maybe let's zoom in at first well it actually don't doesn't really matter that much so if i press accept order now it zooms in now it shows me the direction to the restaurant to the restaurant and uh i still cannot pick up the water but i can go ahead in the locations and i can move it somewhere here yeah probably set location that automatically move that's there very close and our button is already enabled which means that we can say pickup order now let's check if it changes in the also in the back and back and yeah yes let's have a look at the data in the amplify studio for the order that we are working with we're working with this order right and it is accepted but the next status is what picked up picked up okay let's see if it updated but if it shows this one that means that it's where let's have a look in our code i know it's weird because if it shows look the the destination there it means that it works with order.status so on button press if status was accepted we called pick up order no when they're ready for pickup we called uh accept order and this accept network except order it didn't but it didn't change to ready for if to pick it up what this accept not on accepted but accept the order function should have changed the status from uh ready for pickup to uh accepted to accept it oh so we did change yes it did yeah the next step from accepted to picked up picked up maybe maybe i wrote it um i had a typo bear but it's working here okay so pick up word there let's go ahead and reward the context and see pick pickup order function pickup order data store save is picked up spelled correctly like you have in the back picked up you know what maybe it failed to to synchronize with uh amplify here but luckily locally it updated yeah because we have a new route because yeah like we let's see in what status it's still in accepted [Music] we even have ordered courier which means yeah which means you accept it but not picked up um let me let me try to uh to move from this dot van uh maybe like it is the same issue that we are not awaiting these two to finish executing which i doubt but maybe maybe so it's dwarf a try uh a wait a sync uh and set order updated order now in the bottom sheet here let's do a wait pick up worder and let's go ahead and try again yeah it's weird that we get a new route after picking up but the status doesn't change yeah yeah yeah yeah no it's most likely very weird data store updated the data locally correctly but it failed to synchronize with the cloud so let's have a look how is your back after five days of five hours a day screaming trying to stretch every day so so far so good what not again definitely need a standing desk like to to at least go between two modes yeah but i know that every person well not everybody knows i'm gonna be a bad person as well standing desks almost never use it like they use it at first for a couple of times and then that's it i know i know probably because you remember in university we do we did have standing tables but nobody had used them no but in some of the classrooms there were only standing tables and you had those long chairs but everybody was still sitting on those uncomfortable doll chairs uh yeah the same at amazon like we we had like standing desks but i know i maybe like five percent of my time was in the standing mode you know that you have it and you feel good what you know that you have this option that's what makes you feel good okay so we have our orders let's go ahead and try again first one 1.2 kilometers okay my location changed that's good because i can accept the worder i'm here in amplify studio the worder is now accepted and if i do pick up order try to reload drum rolls please come on what hmm how does it work why i'm missing something very stupid i feel uh go back to the context so maybe if status is accepted pick up werder did you spell everything but yeah we would get checked in order context is everything spelled correctly else else i don't know i i'm starting to feel very uh defensive like every everything can can be the cause uh pick up word word order updated updated status they're exactly the same and yeah like if i'm gonna cancel log like it's gonna have like updated value because yeah of course because we see right here here console.log updated order updated order order copy of order i feel that data store doesn't properly increase the version so it only updates it once because if i am gonna to you know how to test it first pick up so let's uh in the bottom sheet when it's ready for pickup instead of calling accept word let's call await pick up order and right away go to them to this one pick this one yeah because i feel that the problem is in the second update yeah the first one works in the second let's see if we move we'll pick up where there's a first update if it's the problem with a pickup or vm oh that's a good way to test it do not forget to drink water accepted yes ready for pickup save order let's refresh [Music] and let's go let's go let's go let's go yeah uh so let's take this one and let's say accept order and yeah it changed already to the last one and it's picked up yeah it's the same problem that you told my brain just now so yeah uh index and accept order context word context update order look what i'm gonna do listening to whom to your plan nope not a plan let me see let me see it's a problem with a version most probably most probably do i see the version here um what might be the issue i would like to try oh yeah i for totally forgot that it's still a ramadan and as did are saying and i'm drinking water maybe some viewers are fasting so sorry so what might be the problem the problem might be with let's move this one as well let's i don't know i'm desperate so i'm gonna do anything update yeah i'm gonna start console logging everything so updated when they're equal await and then uh set order to updated order let's also console log the updated order here okay we have console log here okay uh and in the bottom sheet here let's do a weight accept order uh okay is button disabled and hello everyone let's give it one more try yeah guys from where are you joining us today i'm really curious to know as well so i'm gonna move from picked up to ready for pickup unexpected a weight word because in the weather context these accept where there should be a sink from guatemala james is joining us from guatemala we need to make a big map with you know datsun yeah yeah san diego so we let's let's let's let's uh go like this we first accept the order this has a version of 22 now if and has the status of accepted perfect now pick up the worder version is still 22. this is the problem because it updated the status but that data store didn't update the version number and this is how data store understand if it has to sync the local data with a remote data and it looks that i have a version 22 on amplify studios version 22 because uh previous time it was still 22 and that means that i don't have to synchronize with the cloud from south america from kansas usa so basically all over the world that's so nice i am from europe medium as well so basically all over the world the daughter is saying that the problem is that he just joined and since he joined nothing is working so another thing that i want to understand before before fixing it is i want to see if the version doesn't update at all where it only updates once so i'm going to console the worder before we accept it i'm going to console.log it after we update and i'm going to see if this version is the same as this one where it actually increases once so let's give it a go and to accept it ready for pick up save maroco nice i've been there in from new jersey from morocco wow that's nice very very uh like by a wide variety of people are joining yeah i'm very glad to see that so what did you change i actually from mexico as well i added a bit more console logs just to understand if the version doesn't change at all console logging should be uh like official testing technique so version right now four no 25 25 now let's go ahead and accept the order initially is 25 minutes and afterwards is still 25. i'm mythic saying vamos vey to you i don't know sure if you understand it see so um let's see data store update doesn't increase version so yeah that's maybe the versioning okay maybe um using the uh i'm enabled updated so this tutorial will definitely cover everything even how to debug and how to find the problems everything nice nice some googling tips do you have okay after you learn how to google properly problems your programming level definitely increases right away you know what i think what we're gonna have to do listening maybe taking like i saw that guy was taking the original and then update it can you update version like yours no no you cannot do it manually like this is like if you would interact directly with uh graphql yes but with datastore no so i think that the version actually increases not when the data store updates it locally but when it merges with a cloud so the the version um the version increases after like yeah a couple of seconds when data store actually syncs everything with a cloud so for that reason i think we're gonna have to listen to uh updates and whenever the weather updates to save it uh in state so to listen to updates this is something that we will go into more today uh to integrate subscriptions uh but i didn't think that we're gonna need it here but let's go ahead and do it so let's go to the docs and lexan is joining us from nigeria nice data store manipulating data here my myth uh i'm ethic what's your problem with the back end reading some documentation perfect friday uh well evening for me so um let's go ahead in our water context whenever we have a order here let's start listening for real-time updates and that will mean that anytime somewhere else the data about the worder changes we will be notified in real time without refreshing our application and the data will update and this will hopefully solve our issue as well so uh that subscription we're gonna add uh we are gonna add it here and when should it happen it would happen when the water changes uh and we should also make sure that the water is defined because before subscribing for update of this word uh so let's go ahead and do datastore.subscribe or and data is joining from kurdistan observe so datastore.observe we want to observe a worder model with id worder.id and subscribe here we're gonna receive a message and let's go ahead and start by simply console logging the message but this one msg okay uh so let's do the same as we always do put it to ready for pickup we updated it so many times yeah i'm ethically saying it returns an empty array when i tried the when i tried to get the data from the restaurants i posted on ubereats channel probably on discord but did you try to download from github to pull the code and try to compare if you're actually trying to query correctly and configuring everything correctly i saw that in the screenshot you had a warning here in the content saying that failed to synchronize with something so make sure i don't know like maybe you can delete all the data that you currently have there and add some new posts but for now let's go yeah we have orders we have the logs here and let's go here whenever the order updates and it doesn't have to actually be inside the application because it can update from here so if from here we update to save order back in our console.log we see an object uh condition and define element element is what has changed basically this let me show you this console.log is coming from uh us observing changes basically subscribing to worder uh update and you saw we didn't do anything on the front end we did everything from the amplify studio and our application was automatically updated with the worder that was updated the model um which model was updated and operation type update so i'm gonna check if operation type is update i'm gonna set it in state so let's go ahead and say uh i'm gonna take the op type and also the element from there and if op type is equal to update and we set werder in our state with element that means that the word was updated behind the scenes and we need to store the latest order it's update here element here and with that being said uh we don't have to or maybe maybe we actually do uh we have two options here one option would be not to manually set the ordering state here after we update uh and wait for them the subscription to to trigger or we can do it like this and i think this is better because we right away update it even if it's not ready on the back end it's ready locally in datastore so it's going to be more faster from the user user's perspective so let's go ahead and try it i think now it should work you know anthony's saying support from philippines you guys helped me a lot to improve very glad to hear thank you to here guys uh yeah i'm mythic try to uh pull um and clone the project from github and maybe you'll find there's an error somewhere there but if you have an error in amplify studio most likely you'll have i i'm also i'm also thinking there might be an issue with uh configuration because like if you have data maybe amplify doesn't properly connect with that database so double check the configuration part like how you import the aws export by the way did them authentication work properly if authentication worked properly maybe i think all the latest changes after adding the api it's also important make sure you pulled it make sure you properly configured it and also try to add some new restaurants there in the restaurant because the old ones i saw that it failed to synchronize for you some of these things so uh here we have it our order is here we will accept it first and something happened here and if i is not an object data dot latitude that's a marker most likely that's in what [Music] yeah let us know if you managed to solve the problem [Music] and set dishes but if order on the date oh oh oh oh another thing that i forgot to do here might not be the reason of this issue is to unsubscribe so uh subscription equal to this and return subscription dot unsubscribe this is one thing here and you know when i am going to call this use effect not on the worder changes but when the order dot id changes because it's the same i still watch the same order i don't and even if i update it later but you get the problem with that what you get the problem with that uh i can do it like this yeah like this yeah this will perform better because if it's only water we as you see will always update the worder and it will simply close this subscription and make it a new one but it's the same id so the subscription should be the same uh okay um something happened there right uh let's do console.log um order has been updated and let's do element okay let's see it takes so much time come on could be easier but we are almost there after this we only have to actually like update the driver's location and that's it and move to the user side application yeah i mean like that's it where the driver driver is at one more thing with uh listening also like with subscription to listen to updates on new orders appearing on the map so here we have let's go here accept order order has been updated and it doesn't have a restaurant why don't you have a restaurant restaurant it has id yeah but it doesn't have a restaurant why it's only an id here um this is how it makes a connection behind the scenes [Music] yeah but the thing is initially it has it so damn uh okay i'm gonna do like i'm gonna have to do like one more query there for example i'm gonna have to fetch water look the easiest way is to call fetch water here again this element doesn't have everything that we need but it doesn't have everything that we need it only has information about the word because only information about the word they're updated so instead of just replacing it in state set word or with a new element we are not going to replace everything but we are going to take the existing order and we're gonna do uh existing water first and then override everything from the element and i need to also put them here okay i'm happy that after five days of coding my brain is not that fried and i hope that it's working and i'm not gonna say them uh let's go ahead and give it this is gonna be the last try lucas look it's working okay let's see um do you wanna bet i think you have already what to do so did you actually decide it yeah uh yeah of course should we wait for your uh reveal or are you gonna reel now i don't know let's focus on uh on replication lucas because we it's working today so uh let's go ahead accept the worder perfect nothing changed it changed no no no all good we accepted we are near the restaurant everything is good so far oh we need to pick up and now it's not working now you can say that but before it was error source object is not a valid model i got a bed can i switch to react native or have to learn more i mean your switch is going to be very easy you will have to adjust a little bit and but the the the switch is going to be really really easy i switched from react native to react.js when learning and it wasn't difficult it doesn't lie because this object is not of type order can you imagine but let's go another route i don't know uh oh look what i'm gonna do i'm gonna call fetch worder again and i don't care element dot id because the information with the subscription gives us it's not very useful now it will definitely work so i think uh just to add on questy uh question i think even if you are a beginner in react.js it might be even easier to like because you have a basic knowledge right now and it might be even easier to learn react natively because you're not used to uh like very much to react gs and how that works so it depends like on you but i don't think it should be very difficult just start yeah watching these tutorials that's a first very good step there's plenty on this youtube channel uh even like from very very beginning like tesla clone to more advanced and to very advanced like this one i think this one is so far one of the harder yes this is one of the hardest uh but it's ready for pickup we accept the worder it is accepted we pick up werder it is picked up yeah you're you're already starting to thank you boy and now we need to move our location closer to the delivery location which is after the central park have you been there lucas i would actually love to go to moldova look like these are my streets bro i know them so now i say complete delivery it's almost working it's completed but i have can find variable navigation okay okay okay okay i can deal with that can you comment on your changes as well because i missed it while looking at the chat yeah so uh the changes that i did is whenever i receive this notification that the worder has updated i'm not using this element i rather fetch it one more time just to have like all the data with the restaurant information with the other information that it needs there like this one could be improved because like we already know the information about the order here but uh we would have to change a bit the structure of how we uh keep information about the restaurant to keep it separately similar to the user but at the moment we decided to use them information about the restaurant that is returned from simply querying the worder because when you create a worder you get information about water restaurant and also probably driver so this thing is missing in the subscription that's why i i did with when i receive a update event i simply fetch it one more time okay so question is asking uh is all your courses on youtube uh all the free courses are on youtube yes of course uh but if you want to advance into your rack native mobile development building mobile application then i have a premium course coming up very very soon which is this monday in three days i'm going to talk about a bit more about the course coming up this monday um by the end of um of today's live stream so you can you can check it out at academy.notjust.dev uh so what is the problem something with navigation here without navigation inside the bottom sheet but that's not a problem because we can do const navigation equal use navigation because use navigation and here was it imported properly yes yes i think so so that means that now if i'm gonna do the same order again uh ready for pickup save order and here i'm gonna update actually i remembered one more thing that we didn't do what uh when you have already an order you shouldn't be able to accept the other ones yeah so here is our order let's go accept order we are here we need to go back to the restaurant it's accepted uh let's go back to the restaurant where is it okay somewhere here yeah okay we can pick up the worder and we can go back somewhere here yes and we can say complete delivery and boom we are on the first screen and still here we will have to also listen to some updates about updates on the worder but our water is in the completed state and everyone is happy overall yes at least yes very happy so let's implement some subscriptions and real real-time data here on this screen on the first screen and this is coming for from two issues like the one that you see here is that this word that we just delivered and it shouldn't be here anymore uh and valver1 is gonna be like the new orders that appear on the map so uh let's go for that in the where do we have it invest screens orders screen and here we simply query the worders but but but let me see let me think let me think i could do it like this with the same approach fetch worders equal to function that will fetch the worders let's call it in visual defense patchworkers and uh let's also subscribe to update so uh subscription equal data store dot uh observe we will observe order order model and whenever we receive a new message what should happen if message dot op type how is it called op type you need to observe data store observe order that observe again that's how that's the uh i think so subscribe yes subscribe so op type i was looking for op type if it's equal to update then let's fetch the worders again and return do we have drivers location in context because the dot is saying like add auto zoom to your location uh it's nice like to see where you and you don't need to zoom in every time and we do that for the other screen but for this one we always need to zoom in because we don't specify initial region and yeah and deltas yeah we could take like the logic from vr like to take the driver's location and here i just set the initial location so with this thing here that means that now if i'm if a restaurant for example on his dashboard says that okay this order is already uh cooking and it is ready for pickup save it automatically appears here voila and if another order is ready for pickup it's here what's the nice picture yeah and i'm not sure where are the location of that restaurant but they should be also on the map most probably they're coming from the same restaurant so that's why it's here but yeah we are displaying them from here and um and yeah i think that's what uh i wanted to do here for listening to updates yep exactly um let's add as the suggestion was there the autozone feature here as well shall we yeah it's easy so from the index here from the order delivery we have we have these use effect for the driver location but we don't need to the subscription we only need the location itself so location await get location here and the request for permission if we don't have that yet yeah at the moment i'm gonna be lazy and just gonna copy this use effect from here but a better approach would be to take the logic from location and put it in somewhere else like in a context most probably will be better because this is shared logic and yeah i think but now i'm gonna just copy this part without the subscription to watch the position in the orders screen here and i'm gonna put it after vcu's effect but also make sure to close the function and to close the use effect and also provide the empty dependency array here uh and we need the driver location uh to drive our location order screen here okay okay okay okay okay in order screen where we have some state variables here let's add the driver location as well and for the map we can say initial region is this one we can also check if driver location is not known yeah before like probably an activity indicator i don't know driver location return activity indicator like this exactly just import it correctly act native and now um oh this big blue loading bottle button of death uh it is saying location we didn't import location yeah but yes we have expo location what else we didn't import because there is a you you did you imported the location in the order screen because here you're looking at order oh oh oh oh oh oh order screen most probably not and i can remove some of the things that i don't need from here and now it's zoomed in and now it is zoomed in you can make it even more zoomed in you can show how to like by changing delta numbers you can zoom in more less with numbers yeah confined variable data store oh okay because i try to delete it perfect perfect another thing that bothers me just a bit and i know that it's not very hard to fix is this initial um showing initially this form and then going there and it's happening because uh in our navigation we are checking if the database courier if it's null then we show the profile and initially yes it's gonna be null because it's still loading so let's go ahead in the use of context context of context and say wait let me double check is asking which video can i start as a beginner so complete beginner probably a tesla clone and after that mo more or less all of the videos after that are the same no wouldn't you agree uh there are some some better videos for beginners for example this one definitely is not very very good for just starting out uh but yeah like maybe latunde can share some videos here so you know what [Music] you know what i'm thinking if whenever we query the data store and we set it like this it's going to be undefined it's not going to be nulled right so i'm it means that if it's null it's not we didn't start it fetching it yet if it's undefined it means that we fetched it but um it's not there so i'm gonna i'm gonna add a check here if database courier is actually null then i'm gonna simply return an activity indicator that i can get from some activity activity indicator wave size large like this yes color gray let's import this activity indicator import activity indicator from react native so if database courier is null then just display a loading screen and we're gonna see it here and this way we are not gonna see the profile initially we're going to save a profile only when that database courier is undefined if it loads now yeah and i'm mythic is as well suggesting tesla clone because it shows off basic component but also things that most of the apps use i definitely agree tesla is the best starting point so is it recommended to use typescript with react native so what are the troubles uh you may face probably it is recommended it's very recommended but uh if you are like it's simple like if you are just getting started uh like you're gonna have a lot of troubles i mean you're gonna focus your time and energy on learning react native and i don't recommend like adding typescript on top because that's going to make it even harder but once you have a good understanding and are comfortable with react native van i highly recommend getting into typescript because that's going to improve your um your application a lot like you're it's going to be you're going to have less bugs you're going to have a better development experience with better autocomplete features you're going to detect a lot of bugs early one and these are bugs like these value can be null or undefined or something like that so yeah uh downsides of typescript is only like having having difficulty more difficulty on top and like law it takes longer to code yeah yeah a little bit you find them at the beginning it's the same like with testing like uh yeah like you invest some time into implementing unit tests and so on but if you do this because it's uh it's gonna save you some time in future you sacrifice time over stability of the app i don't get something here i still i i s well i see the activity indicator when i see the profile when i see this screen no i didn't saw the profile it was very like even shorter like for him okay let's see let's focus i'm going to bring some water once okay so i know probably the at first we see a very short time of loading then we see a profile then orders we should try to delete the loading from orders screen and check how long does it actually take to yeah to load the screen you know what try to delete uh like oh comment out a little bit the loading part from the orders screen because right now it's hard to determine whether it's loading from navigation or from orders because we don't have driver's location yet but it first is the loading screen grant profile then order then loading again and and then order screen yeah let's do console.log database courier just to see what values maybe maybe it's not undefined so no null null undefined and then why it's only fine here for a split second it's undefined so initially it's null okay you but we need that undefined because if we if it's undefined that means that their user is there but it's like not registered yet so we need to redirect him to the profile screen to register to complete the registration we want when it's null it means that we just launched the application let's render activity indicator uh if it is defined if database courier is there that means that we redirect him to home screen but if it's not uh buffer false value here is false or undefined and this is where we get into this one so i want when the database courier is undefined to go here but look what i'm going to do but it's going to probably be the same but let's try so i'm going to add um loading set loading use maybe it's going to make a bit more sense so loading initially it's true or yeah let's make it yeah it's true uh we call this one we call this one then we set database courier with this one and also and also we set loading to false and we expose loading here and in our navigation we can also take the loading loading and if it is loading let's render activity indicator actually i can do it here like if it's loading show activity indicator otherwise the children let's try this one right now and then yeah yeah let's go from there and you need to restart the app again let's hope for the best this thing should have been fast now where is that coming from oh that's from multiple so wait did it worked actually didn't even notice what happened actually no and that because it doesn't change we are calling this query when the sub changes but the sub changes the first time as well so this one is called two time so i should do if is different than sub then return and that's it okay i got it i got it i got it yeah that's very good uh it's a bellini um [Music] you need to reload right now it's most likely well probably you should say vodkas now yeah like the first time so now it's not gonna happen it's not gonna happen it's not gonna happen look yeah nothing is happening you see no that's lithuanian just yeah restart your server most likely that's going to no no no no no no no no no too keen i think we should we should listen to me and now we would have had it will be a lot faster to restart the server now we know it will work right away this one is only 50 50. this approach okay it worked yeah it didn't show that profile screen it's loading and then the home screen perfect um regarding this issue someone said that they have this issue uh i researched and uh it's actually yeah like it's coming from amplify but in it doesn't have a proper solution at the moment so the only way to get rid of it is to disable it with log box so [Music] it's just not to see it but yeah like and wait for until it it's going to be fixed setting the timer amplify so you can [Music] disable it with log box by copying these two lines importing yellow box from rec native and ignore warning setting a timer actually i'm mythic said that he has the solution to this one i'm wondering what uh but probably like it involves like patching something behind the scenes and i i saw i saw the solution for patching i don't like it i mean yeah it's gonna work but it's patching like one timer like in in a library and making it more so what's going on here yellow boxes it's lockbox log box and log box ignore warning now it's better will it work lucas what are you uh victory are you like learning react native or just joining these streams for fun log box ignore warning log box ignore warning ignore logs okay ignore logs now and fingers cr this one what's next what's next in our plan um we'll update the driver location um yeah to send my driver location and it shouldn't hopefully if everything goes right shouldn't take too long yeah and we should move to to the next step like to the user side application because take a bit of time yeah let's see so no no no info courier and so on everything is perfect so we can go ahead and actually search where we console log things to clean up a bit for example here i don't need to cause a log anymore here i will leave your no no no no no no no no no you should say uh so now what i want to to do is in the next part we're gonna try to synchronize the driver location uh with and to display it on the user side application but first of all we should always uh i mean when the driver moves in the database of a courier we need to update his current latitude and longitude well that's not too hard because we know how to update with datastore we have our word delivery here index and here we have a function set driver location let's register um a use effect on this set driver location and whenever the driver location changes let's also update it in that database so use effect this and we're gonna work with driver driver location first of all let's make sure that is defined not to have issues then do nothing but otherwise let's go data store shouldn't you pass it in an array yes yes thank you oh data store save we are gonna save we are gonna save scroll a bit uh courier yes thank you thanks who rear that we import from the models uh we're gonna update the courier what is it oh yeah it's courier dot copy of our courier do we have information about it did we ever query isn't it user i think it's uh oh database user yeah yeah is database user so from i think we called it database courier as well not that user equal use of context and it's database database courier perfect that was a good choice yeah so we make a copy of our database courier and we update it so updated we want to update but latitude is going to be driver location dot attitude and uh dated dot lng is going to be equal to driver location dot longitude i hope we won't have the the same problem with the conversions here with updates with versions this would be well the same solution most likely but well here we have we have nothing yet but we are gonna receive them right away here oh yeah okay victor is saying now watching just for fun two years ago i was learning javascript react react native but i found that it's hard for me i don't know you know i'm like nature boy landscape architecture is my key i mean if you know what drives you and i think that's the way to go you don't have to push something and try to put something if you know what makes you happy yeah no there's no point of looking somewhere else so let's go ahead and open one word there because when we open the order it's when we start sending these updates and right away without any updates data amplify studio received our new new coordinates and let's go ahead and try to move on the map for example here and will it change it ends with seven and seven it would end with one and seven so set location drum rolls please oh victory saying it's fun to watch you guys that's very sweet thank you very much oh but you see it didn't update because it didn't move 100 meter probably so let's go here set location what location it should be now but it's still not updating hmm but it's okay like we know how to fix it yeah yeah that's good at least you don't need to look anywhere let let's just double check if if it actually is the same yeah so um that means that um [Music] inside our of context uh when we actually query that database courier we need to update to 2 to 2 to this one to update but for that let's extract the logic into the fetch but you know what here i'm not going to have to re-fetch it because data courier doesn't have a lot of relationship that we depend on so we can simply do consts so equal and datastore.observe we are going to observe a courier with them it can be here it should be in a use effect because at this moment i don't know if we queried it successfully or not but in another use effect that depends on them on that database courier and that has to drive a bit higher we don't see because of the camera database career is null we're gonna read corn otherwise we can work subscribe if we have already a database courier then we subscribe to updates and the id is going to be database courier dot id yeah yes and then dot subscribe uh here we have message and we can say if message dot op type is equal to update feed and we can set database courier with message.element yeah and oh i'm gonna cook to quickly answer one question uh rogelio is asking like it wouldn't be easier to just for restaurant to send the email with their dishes and set in the dashboard but the thing is that restaurants also instead of building the whole dashboard for them but the restaurants also have to like accept the order and also set them to a cooking and then ready to for a pickup that's actually the main reason why we need the dashboard probably if you were actually creating this for reveal world application maybe you would create for a restaurant uh an application as well in order to have on their tabs simply by click or something like that like a worder management system yeah and for a dashboard would be simply for them to put there orders like and stuff like that and again a blue loading circle off not working [Music] reloading won't help you here why you're like this okay so let's go here it should update very soon yes it updated and now let's move our location here it should end with ten and zero five wait be patient be patient last time it took a lot longer time but probably it's not updating what did i say 10 and something yeah i think you said but it didn't these are the same 1138 set location but wait have you waited no i think this one is the previous one 29 17 and if i'm gonna do 12 and something it doesn't seem to know that it's updating have you done everything the same as with the not exactly here i'm not refreshing i wasn't tracking what you were doing just reading the yeah so database courier when it changes subscription subscribe console log um hey frank berry hello and rogelio no problem oh okay i see i don't even need to do anything it's not a bait if it's update my bad now now it should work let's go to an order because that's where it works so now it should update right away yes it updated now if i go here set location it updates yes nice if i said here it updates come on yeah it's maybe it's less than 500 meters also i may think i think he's progressing with his problem he's able to get the dishes table now he only needs to fix the restaurant so i think he is progressing somewhere great so uh what we have managed to do right now is every time um the driver location changes we are saving these updates in our data store and what this will give us it will give us the possibility to subscribe to these updates from the user side application and automatically show them on the map so with that being said i think i'm gonna open that drive the user side application and we're gonna start work there but let me just quickly see if i don't have any console logs here no so what i will do i will say git and a5 finish driver up [Music] and yeah it push origin main um miguel your error is most likely because you have the same names for the screen so probably you in the navigator maybe yeah make one like home tubs and another one home let's go ahead and open our uber it's user application that we have done in the first day in the second day and let's go ahead and start it so npm start here frank berry glad to hear you've managed to do it's installing android studio is always a little bit uh hard so what do we have here we did the word screwed fetch accept update update driver location listen to new orders updates and user side application updates to integrate the map view first of all then to display the position of a word around the map and to subscribe to the date updates and update the location perfect sounds like a plan so here when we go ahead and create a water with one of these restaurants this one add the basket add the basket open basket create order what's going on here type renault is not evaluated model field oh i need to to pull the changes because we have done some modification to our back end so we need to grab the pull command from our amplify studio here on the top let's go ahead and pull our amplifier changes we have them in our driver side but we need these changes in the user side as well yep so where do you plan to add this view in order details probably probably um in them somewhere here let's think yeah it's gonna be in word or details definitely i think it makes sense um so let's think how to add them under the bottom or maybe under the name and then you can because your order probably you already know what you ordered or maybe should we add two tabs at the top okay that's even more you would show how to keep information about the word here and and no map there yeah i would like i would like to separate like the map in a completely different screen so for that reason let's go ahead and create a screen called new folder where there's further no order live updates i don't know yeah order live updates index dot gs and let's go ahead and do recognitive functional export to export this further live updates okay now let's go ahead but we don't have top top navigators yeah that's what i said you would show how to use them yeah if you if you want to but that would add even more complexity but i think that's interesting but yeah like we already added so let's go ahead at react navigation and we're gonna use a top top navigator so bye victor bye see you soon uh so here let's do top we work with material top navigators yeah so from this page let's go ahead and install this one here if you have expo okay we have it first of all installing rack navigation material top tab bars and the rack native top view and then we will also have to install this react native pagerview and and that's it hopefully these material top tabs will work the same and won't introduce the same error let's hope so in the navigation i'm going to create a separate file for these two tabs and that is going to be the order details of the gator.js this file will contain two this navigator will contain two tabs one for the details like restaurant and what the user order and vowel one is about them live updates so let's import first of all create i don't know what from yeah i'm waiting probably just material top top bars and create material top top navigator now let's go ahead and create this app navigator using the create material material top tab navigator and put it into our component order details navigator and we will return them first of all tab dot navigator actually yeah like it all the navigators follow the same uh interface like we have tab navigator the same way as we had like stack.navigator and the same thing with a screen that needs a name the name is details and the component is order screens worder details so let's import these two screens import order the [Music] order details it you'll see no no it's a it heals from prince where the details and the same for them further live updates it's going to be a top dot screen or with a name updates component order live yep juan we did fix that problem where the flashing of the login screen in the query is that yeah and here let's export order details navigator export by default and uh in our index.js where we have our orders orders tech navigator we already have a stack for that okay for the order where we have a stack screen for the worder we are going to provide here instead of a werder details we're going to provide the whole word details navigator order the else navigator and we will have to restart our server and most probably we will also need to hide them with the header so screen option for v stack screen is going to be header shown false now let's start it okay let's see most probably you will have to restart the server as well no because you pulled the changes and also oh you already did okay yeah let's see let's see something doesn't want to comply with you working my pc right now started spinning very fast really yeah we can't hear that i think you had one promise and handled rejection uh shall we fix this with timer but we're gonna do it a bit later no is not an object but restaurant.id maybe somewhere so let's go to the orders let's go to the of details and problem no order restaurant dot image you're not getting the id maybe in the detail screen oh yes you're right um that's a good catch lucas so the way we are redirecting to the details of order from the order list item is where navigation navigate order with this id let's get it into a function const on press and let's move the logic there oh um on grass why now it's not working is because we are redirecting to the screen order and we are sending this data there okay now we are on the order list uh no we are on them worders screen so let's look in our navigation navigation index now we are here and we said we want to navigate to the worder and send data there well that's what we are doing we are navigating to this screen and sending data here but the problem is that the screen that is actually rendered on them on our in our application is a nested screen inside this um where the details navigator it's this details screen so we need to directly send it here uh not simply on the water but order and then details and to do that if i'm not mistaken here we need to provide the screen that we want to ascend to and this and the data becomes roms if i'm not mistaken i think you can yeah maybe like that around sprungs i think so bro let's check let's press here it works updates or the left updates perfect and i said not to show the [Music] header but it still shows it what did you said that but for the details we do need the header yeah yeah i think i think it's okay like this because we need to go back yeah let's see and update okay so we have these updates here what do we have to do is to render a map right yep so let's go ahead and install a react native maps uh react native maps or expo maps or write expo and you'll see it's called expo react native maps app view this one the one that we used in the driver's side so let's install it with expo in our user side as well also we'll need to install more things like like location from expo well how will you get um only for what what what like setting the initial location of our we're going to focus on the driver's location not on the user's location but yeah that would be uh a way with that let's let's not go that way so after that we need a simply to render map view in our water life updates we will render a map view and we will probably need some styles rack native style you'll need width and height style sheet from here it needs weave we open map it meets with 100 percent and height as well yeah you can do with those like hook but most likely view needs to be imported map view from react native webs we have the same problem here with a rendering of a profile screen okay so map is here perfect now now now we need like i don't know are we showing like say the marker of my house where and where he needs to deliver wait a second i'm thinking about we are sending the id to the details page but we will need the idea on the updates as well so we're gonna have to actually keep sending it to the orders stack screen and from there just pass it down here this is a common issue like for example we fix the problem of the detail screen not receiving id by simply components where is it components bus order list item by simply navigating to not the orders tab navigator but directly to the specific tab in the tab navigator called details and this is how we send the data here the problem is that we need this id in the updates as well so we will go back to how we used to send it to them to the order up navigator this order is the tab navigator that contains both of these screens think about like the title it's the order that contains like this and inside the navigation index here um actually where we're gonna receive a route here and i don't need to to use the user out and yeah like const id is equal route dot params dot id and we're gonna have to send it to this component access it safely as well directly not through params but directly there to the component so for that this component um and then i don't remember what is the best practice here but it will tell us if it's not so uh instead of just sending the component here for it to be rendered i'm going to send a a new functional component here that will actually render the order screen and i'm going to send by devayer as id and let's do the same for this one components [Music] like this i think the children wave should work better id equal to id and i had here um where i am no not here with him no yeah not here oh my god it's in the tub navigator yeah we are navigating no yeah we are navigating to the water that means that we get here and here we get the we can get the id from route ramps dot dot id and we can send it here to the order details first id equal id and to the this one second 90 80 yes acceleration would be one assigned and non-empty expression let me check actually how that is done but i think it's the same maybe another option would be as a children of this screen so instead of sending the component is to send it as children like this yeah the children way is the best the better approach uh i don't know the better one but i think this is the one that we've used before but i'm checking that right now well obviously actually uh yeah not exactly this one but uh go back and pass it as children but also with the function like wrap this in an object yes yes like that that's how we used to do in the documentation nope i checked how we used to do it wait a second i i'm doing something wrong here it says must only be assigned an on an empty expression maybe here i did something what no it shows that it's here somewhere yes that's okay that good very good but now uh let's go ahead in our word or detail screen in order details screen worder details screen in the index now we are not going to get the id from the route params we're going to get it right away from the props so it's going to be id here so we don't need id we don't need use route and simply have it like this restaurant use route and details work and in the updates we will also receive them through params here id okay so uh what do we need what do we need we need information about the order itself right so we're gonna have a state order and set order equal use state initially null let's start by fetching the worder because we will because we will have a data about the driver inside the wardrobe so let's start by doing data store dot query worder order use state again so import whoa order from uh models uh and the id is gonna be id and then then we simply set the worder there updates map here okay look what i'm i want to say i just want to simply have a text box on top that will render the status of a worder so status without any styles is going to be order dot status or loading if it's not there so status loading because we didn't set it in state and after we do that we didn't call the fetch worders you see that i was i was out a bit not checking like had to fix some things so now i'm invested in what you're writing here you know like uh five days of live streams and coding is it's quite hard so i move this small mistake that i would usually not do so let's call the fetch order here and let's go in the updates status completed perfect do we need something we've oh it doesn't matter but in status completed it means that we also have information about the driver layer so let's do console log driver not driver you see them i am tired but i believe you on so in updates let's see the data about the worder yes we have a courier here but i'm you know i'm not gonna rely on the data from the courier from here just because we are going to get into the same issues of not being able to automatically update using a subscription i'm going to simply take the order courier id from here and i'm gonna do a separate query in order for me to be able to subscribe separately to the order and to subscribe separately to them updates on the driver itself so let's go ahead and say const driver set set driver use state pull and i will not need fetch orders as i said go away and we're going to have another use effect that will be responsible for fetching the driver only when the order is defined so if order dot let me grab that key order courier id if order dot courier id then beta store dot query uh courier clear and with this id and then we simply set it in state then set who re er said driver why i called it driver i'm gonna confuse everything said courier now having the courier we already have related to the longitude of it so let's go ahead and render it as a marker on our screen because can we find uh [Music] icon i can let me try to so to display that marker we're gonna import marker from roc native maps and let's go ahead and render it here marker it needs some data right it needs coordinate what type of coordinate does a marker need marker props it needs lot long latitude is gonna be driver courier dot latitude and longitude is gonna be courier dot l and g but i'm gonna i'm gonna add this marker only if the courier dot latitude exist because if it doesn't exist we'll not have what to show okay i'm thinking whether what icon would fit here best probably a motorcycle okay like a scooter yeah yeah so we have a marker what else does the mark it means title and description but i don't want to give it just simply coordinate and that's it uh you send it to me right not yet there are no very good ones like i mean this one is the best scooter let me so yeah this is the best quarter that you can actually find there so i think a car would probably be better what would be better but from expo vector icons so let's go ahead in here evaluating order.order.cor oh yes we need to add via question mark here order let's go updates it's there it's there so we need to set initial region something because now like oh to a driver yeah but we don't have it initially we're gonna have it only after getting it so for that we need to we need a reference to the maps to animate it right yeah we can do import use ref i'm not sure if it's possible to animate it like at the start at the start you're just that's what you're gonna see but at the start oh that's where we have it yes yes yes we will need map ref equally use ref null and i'm gonna send it to the ref of the map view map ref and whenever we actually use effect never our courier dot lng or courier dot latitude changes we will follow him so we're gonna do if courier but lng and if courier dot latitude then map ref dot how is it animated now it's current current dot animator region animate region and object of latitude longitude and same for delta attitude is courier god lot altitude rear dot lng uh latitude delta 0.007 we had it there as zero yeah probably this one will work as well i don't know we'll we'll check and see so let's go ahead here let's go here and we see him on the map we can add of course like some view around it i don't know if it's important but we can do that as well so we can start with some fighting five some background color what's the background color green we had it white and an icon green i think it's vice versa border radius yeah might be i don't remember 40. and this one white perfect and we can also add some border just to see it better border with one and border for their color white and probably one or black maybe porter curl black because white makes it like look smaller and white black doesn't do much either but it doesn't matter why is it cut like that maybe because of the maybe because of a border yeah now it's working okay see there's still no animation if after you get like uh the courier location uh there will be no for now for now like it didn't animate it it didn't zoomed in it didn't no but after changing probably it will move i think it moved so worders here update oh okay it's like okay yeah but then it works it works so the last step is to listen to updates of this driver and every time he moves to also move after him so in order to see to see the destination okay so let's go ahead and do it like this do it like this uh when we get the courier but do we need to move it with him the camera i mean yeah because uber doesn't have that you just can't zoom in and see okay that's where he's moving that's where i am uh i think it also follows no if courier that was then we will do data store dot courier with a courier.id and subscribe message if if message dot operation type is equal to update mistake then we're gonna set courier with and actually i'm gonna take it out of this if statement and invert the if statement to if like this then return uh and to be able to do here const subscription equal to this and to unsubscribe if we leave this subscription dot unsubscribe uh okay let's give it a go i don't know updates we are here let's go [Music] in our data store and for the courier vadim we will change the longitude to [Music] 9 here save boom voila i don't know why we don't see the map it didn't finish it didn't load it yet it's like yeah it's totally very far yeah here was eight so i'm gonna go with eight but if we move like this longitude uh seven boom that works lukas that works huh and [Music] and now [Music] i would like to see my location where is he driving the same like but does it matter you can add simple uh use follow user location or something like that or use let me check how it's called do you want us to add them the user location and also the map view directions no we don't need that just add a simple to map view shows user location okay let's do it like that so on that map view shows user location yeah and i think you'll have to reload everything but miguel wants to see map view directions as well i mean but it is completely the same like we have yeah yeah we would just copy paste it here and like it depends it it really depends like i think uber shows it but it depends on what you want with your application because in this case uh you would also make this request to map to the google api to calculate the direction to your house so i think it's just doubling um the amount of requests i mean if that's okay for for the application that you're building or for the business that you're building that's it's perfectly fine but even uber doesn't do that doesn't no it doesn't like it doesn't show it just shows like where he's moving it shows where you are and just like it doesn't show the directions he's taking like i don't care what direction he's taking as soon uh like i if i'm getting my food that's what i'm trying to say and also i misses asking why you like unsubscribe i think and it's because not to keep running that subscription after you leave the screen can you go back to yeah here probably return subscription that unsubscribe in order so when we when we yeah like open this screen and after we get the courier we subscribe to updates on the data store and if we leave this screen we don't want to leave that subscription open because that will cause memory leaks and will the performance will degrade on your application so every time we subscribe to some events we need to unsubscribe when we leave the function always clean up after your mess and also one actually miguel is not asking for directions only to show the location of the user and of um of the courier with the marker so it's not hard as well just copying code probe yeah so what i'm thinking what i'm thinking i'm thinking that we are not done yet uh we are not done yet because this will not work with a new order if you place a new order the worder will not have word or courier id and we never update to updates about the worder so we need to say that okay this function should uh be triggered only when where the courier id changes and another thing is we should also subscribe to updates of a worder to to receive updates about a worder getting from new to cooking from cooking to ready for pickup and and so on so let's do a use effect we have a lot of use effects here but i like that they are all like small and i hope that they they make sense for example we need to subscribe to word base but when should we do that whenever we know the idea of a word right so if order changes uh and also if order is not a null value because if it's if it's being set to null it also will trigger it because it changes values so here we will do cost subscribe subscription equal to uh to what data store dot observe uh order id worder dot id and on the subscribe we are gonna do uh say message if message dot op type is equal to update i want to set order to message dot element and when we unmount we return subscription dot unsubscribe oh okay yeah mythic managed to fix the problem he just created a new table and everything works marvelous and now he's working on finishing the session too that's amazing go little rockstar uh let's go ahead and create a new order and test the the whole process so for the williamson here i'm gonna add this to my basket i'm going to open the basket and i'm going to create the worder why are we not redirected to the word or details after doing this i think we are just going back right or open basket create order yeah i think we should in the basket index oncreate order one create order we need to navigate to or there orders this tab right let's see how to navigate there how to get from the basket uh where is the basket basket yeah uh so sorry quickly going to interrupt uh and i mythic is asking can't you use everything in one use effect and i already see that junon already answered it correctly like you can you shouldn't use everything in the same user effect because they have different dependencies and they they have different logic according to those dependencies as well yeah like you could you could but that's not the point of use effects like we've used the fact like just by looking at one use effect uh order life updates for example this one you look like okay when is this function called okay it's called whenever the worder changes and what does it do okay it subscribe and that's it but this one calls only when we were there courier id because that's what we depend on for this logic and so on yeah so yeah that's correct uh where is the basket oh here here is in the home stack navigator so our home stack navigator is used inside the home tabs so i need to to go to the orders here and this one is where there's tech navigator and after these orders we need to go to the order so after worders and actually i probably have the same [Music] the same issue that my names are the same here is worders and here is worders so let's go call this orders we're not worder stop because this is a tab let's go call order stub orders tab and move the screen called the screen order inside this tab yes to the screen order with the paragrams id what no we don't have it because i'm not sure if we return it here in the new order we george is commenting that like and he really wants a reply uh please don't use absolute values for your styles use percentages or third-party libraries especially font size doesn't scale correctly on ipad devices i actually never noticed that font size doesn't scale an ipad device like everywhere where it makes sense like we are trying to use like relative values like of course like on the icons and things like that we would we are hard coding like the padding and so on because that makes more sense but for for layouts in general we are trying to use relative so here i need to return the new word from the create order function because in the basket we need to get this new order to be able to navigate to new order dot id let's see if it will work and john is asking vadim lukas do you work at the company and vadim does work at his own company here in youtube helping you guys and uh yeah and i'm working as a cdo at a startup so and helping vadim as well here with youtube as much as i can and i'm really enjoying here yep uh so let's give it a try let's create this order here at the basket open basket create worder and we are again oh now go back location navigate okay i'm a bad uh pear programmer but i'm trying to read the comments and then so i was doing a great job because i'm i can feel it i don't know like five days that's not that's it gets a lot and you're tense the whole time as well like it's not that you can go walk take a break my watch is going crazy like after each hour stand up stand up open basket create order now we are here going updates status is new but if their restaurant will from his own dashboard will change the status there we need to see this update here but probably i'm not gonna know which order it is can it be this one cooking save i'm gonna put all of them okay it's this one so you see it automatically updated to cooking and now and now now we need to open another emulator almost like or use your phone or use my phone oh you're not on mac you can't share the screen but you can probably just show it you can mirror your screen because you were if you were on the macbook you could mirror the screen uh let's let's think about it i might be able to run another emulator okay yeah as i said watch again get moving but before that we need to open a new window to be able to start the driver's side application uh courier crazy probably if you're saying that i think then probably i'm doing a decent job here and i'm flattered that you think that way thank you so let's have it somewhere here this is our ubereats courier let's run the server npm start it's gonna start on another port because we already have one project open there uh from android studio avd oh my god but whatever weber emulator was really slow let me just see what if i would uh but yeah again you wouldn't be able to show both screens we could only just change who is sharing it with the screen this one is a nexus and let's try a pixel device j though not this video is definitely not going to be removed tomorrow maybe vadim will decide to do it in a week or two but definitely not tomorrow if you're working on it keep calm work finish it and yeah two emulators streaming a lot of things running we'll see how good the pc is going strong let's go how good it will easy look we're running whoa no problem we're gonna do the demo now i think i need to sign in with my account but i don't remember my credentials i lost my uh emulator i don't know where it is we don't know either we see one of them the user app so that's it everything i missed while like interacting with people we that's a demo um yes let's see how we synchronize okay okay interested interested i just need to sign in with my expo there okay so guys hopefully i'm not sharing the screen right i mean only the emulators everything is good okay i can add the just in case the document pdf not pdf powerpoint or like that our faces you can see our face faces from closer now so yeah guys how are you doing are you this friday beautiful it's probably evening morning later crashes why i can duplicate another one someone suggested to run it in web browser i'm not sure like no i'm gonna have to create real quick a new virtual device pixel 4 next hey vicky finish vadim will be able after this long streak of five days to relax today in the evening get a book read a little bit yeah i'm reading in the mornings um but today like we're going for some margaritas oh you're going out today can you imagine that's actually very crazy when we were living together like in a student life how many times did you end up i didn't do it often either i hate nightlife to be honest but how i think you did once in belgium i managed to once somehow oh twice right we've been to karaoke as well oh yeah twice but one with uh alex and one we were probably i think together somehow i don't know how i managed to pull you out of the house i was maybe four times or five but yeah do you guys like the like nightlife going out with friends and the bars or something no i'm not talking about like drinking alcohol or anything like that's not necessary to go out in the bar and hang out with friends i personally don't really like alcohol too much so why it starts on this but i'm wondering if you like that night life quote-unquote i like actually i also one thing that i'm wondering as well like do you prefer to work in the morning or in the evening because for me i know that lucas is going to be responsible for the polls we will go on youtube like paul yeah i'm actually i hate i know vadim likes to wake up like five in the morning go to gym like read a book everything in the morning i cannot wake up until nine in the morning that's the best i can do so i like to work longer uh in the night because then i'm alone i nobody is like i know nobody's going to call me nobody's gonna like i mean i'm just alone working chill some low five music very very nice i like the vibe as well of working during the night mornings are probably the same like nobody's at five in the morning only a few people are awake already when you go to the gym how many people are in your game that's empty sometimes i leave my parking lot and when i come back it's still empty but like it's crazy like with parking here yeah in 10 years yeah yeah i mean not like crazy crazy but but it's not very very good okay i saw guys it's okay i see it here so i managed to do it on one device now i need to open back another one james is more of an introvert i consider myself more of an introvert as well i like to talk with a small group of people but when there's too many people i'm just like okay i'm turned off and i had enough yeah yeah i'm not just listening to what you're talking to here i subscribe with support i think so we already answered this question amplifier firebase and the demand series what the gain so what he said i'm gonna quote while he's fixing uh if you have experience on one of them that's what you should go for but like otherwise he will most likely all the time suggest amplify if you don't know anything about either of them ola tunde is a night person that's good job same as me uh rogelio look it's not lately i don't go out much i spend all my extra time learning to go low well that's dedication i love to see it love to see what's a job here that's what you need to do if you want to actually succeed and like of course you need to take breaks you need to relax like read a book just lay in bed watch your tv series but i mean spend your time with what you want to i know people who go out probably like to i know that's how they relax spending people spending time with other people or that's how they have fun but is it yeah it depends on what you want in life i think your path is really good oh didn't sleep until 6am this morning well that's very very much of a night person i'm not that much like i usually go till two one something like that oh come on why it's so hard to set them up right now yeah did i i code and play games all the night and i sleep all the day okay yeah that's as well away just code code code and then relax a little bit before going to sleep okay rogelio uh all my extra time has been watching you and vadim this amazing learning experience glad to hear that very very glad to hear that i think vadim is the same he's maybe not listening or maybe with one ear right now while he's fixing the emulators for you but i think he's very flattered as well good job chrissy lucas you're also a youtuber thank you so uh yeah i'm trying to be thank you thank you so let me [Music] okay so one other person wants to know like about amplify and firebase which is better for scalability and yeah i don't know like i never used amplify so i really can't comment much on that but as i said like medium will definitely recommend avs from the things that you saw in love with it from the things that i saw it's like really easy to use and not that it's just only easy to use it it's also very scalable and yeah and they're working hard on it constantly improving updating so from what i see and from i like the surface i think it's the amplifier would be the way to go okay so i think we're getting very close to uh so uh on that right side uh yep think like this so on the right side no let's do it like this first we have a user that just created an order and actually let's but no let's first see if it works and then we can do it again we have a user application here the status of a worder is new so let's go ahead and uh now it's the turn of the restaurant to to to take the water prepare it and then put it into prepared so actually no there was a one cooking so i should just search for it uh cooking here so update restaurant already said that it is cooking and after a couple of time the restaurant will go here by the way the water is not here as you can see yeah because it's cooking still yes now if a restaurant go into his dashboard and says okay it's ready for pickup save order without any update we automatically see it here and i'm wondering which one is it the last one i think now yeah maybe yeah it's definitely the last one and you see that it automatically updated on the user side because the status here now is ready for pickup and it automatically added here but uh the map does not show the driver because no driver accepted it yet okay then i decide that youtube is not for me and i go to work as an uber driver i pick this order i see that is three point four five forty nine kilometers let's accept the order accept automatically accept it and automatically shows the user location amazing and now if the user starts moving driver driver uh if a driver oh my god okay let's travel a bit let's no no no no somewhere here come on where is it kish now i said it correctly yeah maybe [Music] somewhere here so if a driver moves there i don't know where to put this one i'm just gonna yeah i mean like it doesn't we don't really need to see yeah yeah see so i'm gonna move it to another screen just for you to see that so set location driver moves but it didn't move too much it will go here set location it moved there uh but we need a bit more so set location driver moves here and i think it would be nice for the driver as well to to follow his location because now i lost him i can press yeah yeah uh and as you can see like as the driver moves closer to you automatically both application for the user and for the driver updates and shows the new location of a user and i think he missed the turn let's go here set location okay we're almost there we'll almost there sent location driver guest to the restaurant it didn't update because it it's cool we are bidding only each 500 meters and you move like 400 but you can accept in one kilometer radius so can you yeah yeah okay so let's pick up the order we see on the user side the status of order is picked up perfect and we start driving to the user location set location set location i want my pizza it's coming it's coming bro it's coming it's not gonna update now as well it's because oh no we moved more than 500 meters that's good and complete their delivery and the status is completed and everyone is happy uh and once the status is delivered probably we should not uh update to the location because right now uh you will always be able to go back to this order and see where is the driver on why you yeah you could follow him yeah so probably you will you'll check like if a word is complete don't subscribe to updates and don't show this map of the location of a driver other than that everything is done here um i think like that's it yeah you can add like multiple improvements also i saw someone saying like i would like to see where is the restaurant marker and where is my house it's very easy to do that just following a driver's application yeah we have done that already in the driver application to show the marker of a user marker of the restaurant and i think there is a lot of things that you can train and practice and implement it yourself and um yeah see like if you've got all the all the knowledge and all everything that we have uh taught during the last five days oh my god lucas i can't believe it i can't believe it only the restaurant dashboard everything is only a restaurant desperate but we're gonna come with that uh very soon and for uh everyone else for everyone else that wants to uh that are ready to get to the next level as a rec native and aws amplified developer in order to be able to build this full stack mobile application from scratch without anyone's help like taking an application from zero till uh till market if you want to be able to do that then i highly recommend you to check out uh the course the premium course but we've been working for the past eight months uh to create for you guys and it's finally here it's finally coming up this monday 25th of april i'm super tired right now i cannot talk uh and probably i'm not gonna go into a lot of details but i'm gonna send you an email tomorrow with more details about the content and what uh and where to expect it um so yeah the course during course like you're gonna build two real uh real world projects one of them is going to be the duolingo clone which is focused very much on uh fundamentals of react native and it's just the front end and where like we actually cover in-depth like all the fundamentals of react native um and yeah like we we stop on this like more harder topics that some people have problems with like uh hooks or use effects and so on and the second project is the instagram clone which is mind-blowing how uh how huge is that project and during that project like we implement both front-end and back-end uh but yeah i'm gonna talk about more details about the content themselves tomorrow in an email but as well like i mentioned it a couple of times on uh during this week's challenge so i think that you you have an idea what you'll get inside that course and how it's going to help you get to the next level um it's going to help you like here i prepare some success stories of people who are already in the course uh for example nicolas is learning is already working on two side projects as in andy is looking forward to quit his main job while brian has already um two applications on app store and play store so these are just a couple of success stories from our internal members that are that have been enrolled in the course during the pre-launch and with whom i created a course like getting feedback suggestions and testing everything so that's tiring uh anyway the course is launching this monday 25th of april you can make a reminder for for yourself not to miss it where you can join the wait list uh yeah not to to to miss the lounge uh with more details i'm gonna come tomorrow uh with with an email everything else you will be able to find that academy.notjust.dev and for that i'm going to shout out because i'm super super tired but i'm very i know it's good very good the only thing you need to know about the course it's very good very high quality chord that i mean like i'm just that's what i'm saying you i don't know i think you look you can't really say like grade your own work probably you can but not very unbiased by the way there there is going to be a 14 days money back guarantee so if you are in doubt about something like you can join and in two weeks if you don't like what you see like you can request your money back and we'll be glad to to give it back to you uh if you if you don't see it it is valuable but i'm pretty sure that you will love it there's no point at least it's everything that we are doing here on youtube that you already love but 10 times more in depth and 10 times better in quality i mean we have this time to stop at at this complex features like like how does a use effect work or how does that work or why do we need to do that or instead of showing only how to create a user we actually do all the crude operation like create user update user delete user uh read user and so on so we cover uh like all the features in order to make together like a production ready social media application similar to instagram yeah i already love it i haven't seen it thank you very much ah looking forward to join it let's go great presentation thank you very much so lucas we've done a great job yep i'm so happy with with the result that we have here oh my god like this is this is so close to being production already like yes like it's not complete i i i understand that but we showed you and we gave you all the tools to make it complete so if we didn't implement like showing the restaurant in the user side we implemented that in the driver's side so you just can copy paste it there and i think like yeah like with a bit of work here like polishing and it's good that we i think it's good that we left a little features where people can implement upon yeah that's that's how you you know test and uh practice and improve yourself and i get a lot of messages from people that said like uh hey like i i took your let's say spotify clone i continue working on it and now i released it and for a local radio show and we are delivering it to the users and they're having already success just by going one uh one one step uh more than what we are doing here like they managed to get better crazy muhammad is the most beautiful and strong course since that i attend thank you thank you very much and we we really appreciate that so lucas shall we lucas you did very well indeed lucas thank you you did a great job like both keeping up with the community helping me with the code and also coding the driver side application yourself like that's that was a lot of help from your side thank you very much and you made it you made it like this challenge possible because i think if i would be alone for five days for almost five hours a day we did 25 hours of live stream like in in five days and like being alone here i probably would have gone crazy or just like after the second day i would just be silent and that's gonna be my style but we feel it is really interactive and and it has a great experience soccer so thank you very much thank you for your support that means a lot to us thank you thank you very much and i got to know the whole community as well like i already remember so many people that were interacting and also that's very very nice i'm really enjoying that this is the best comment let's go are we gonna see lucas for the dashboard streams are we going to see lucas for their birthday most probably for uh for the ui you definitely will see lucas i hope yeah i think so as well if it's not on wednesday i think i don't know it's gonna be our usual day our it's gonna be fridays most probably not next week because next week is gonna be uh we're gonna be a lot busy with uh with a course lounge and on boarding all the users that we will uh we will get and um but after the first launch most probably we will get right into the dashboard yep then i'm definitely going to be so actually your latinder reminded me of one thing so are you posting a picture of a clown makeup or i'll think about it but the people want to know they're waiting for it do we need to look up to that or it's just yeah keep an eye on it subscribe to my channel so for those who don't know we had a like a short bet and nowaday needs to decide uh whether he wants to paint himself in a clown makeup and post it on his social media or buy me dinner or one of you actually if you that would be even better if someone is in spain but i doubt that someone is we'll see we'll see him uh rico i'm gonna come with more details about your questions tomorrow so keep an eye on uh on your email and also spam folder and also promotion folder or anywhere where any mail can let uh get what is the best way to reach out to you if one has questions the best way to reach out uh is on discord because they are like uh more people can help you like from our team and anyone from the community that might encounter the same problem they can also help you and also get help like if they see an answer to your question so the best way uh from for technical issues were for things like that check out our discord the link you can find in the description below um no like this thing i'm gonna buy him a dinner that's that's for sure like that's that's not a question like we are seeing each other in one month actually we are uh we're gonna spend some time at uh up.js conference in poland so i will definitely have time to to buy lucas dinner what we want the clown makeup more let's just say i think i'm talking for all of them it would be a lot more entertaining for everybody you think so i know so i don't think so okay we're gonna think about something in that regard okay so i think that um we can call it today we can call it a week absolutely i i i still don't uh realize everything that we've built and i need some time to because right now my mind is just blurry it's like i don't know i just need some time to realize but yeah like it's impressive and um i'm really happy with our first challenge how it went a lot of we governed a lot of people around it uh people that are ready and are hungry to to to learn to um upgrade their skills and to be able to build these mobile applications and from from end to end and yeah this is what we are trying to do here with not just dev and um if you support us subscribe to the channel down below and uh yeah have a nice end of a week um what else what else lucas i'm gonna miss you guys it wasn't great we're gonna be back soon yes in a couple of weeks back to work so uh don't forget on monday we have a launch of a course i'm gonna see you there most probably i'm gonna do a live stream on the channel yeah i'm gonna do a live stream we're gonna do the opening of the of a course the launching of a course or live on the channel so i'm gonna see you in two days or three days yes so have a nice end of a week bye bye guys

Channel: notJust․dev

Views: 51,863

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react tutorial, uber eats clone, uber eats clone app, ubereats clone, food delivery app, how to build a food delivery app, how to build a uber eats app, food delivery app development, uber eats react native, amplify tutorial, full stack mobile development, build a full stack uber eats clone, coding challenge, uber clone tutorial

Id: Os49oPTfzuU

Length: 213min 27sec (12807 seconds)

Published: Fri Apr 22 2022