🔴Build Twitter Fleets (stories) with React Native and AWS Amplify

what's up guys welcome to a new stream i hope you're doing well uh and today we're gonna build the new the hot uh innovative call it what you want we're gonna build the twitter stories well i mean twitter fleets of course so um yeah experts are saying that 2021 will be the year of stories and sooner or later all your loved applications will have implemented stories and i think i can bet that even your fridge will have stories in 2021 and yeah i think that we should get ready uh to this new era of stories and we should learn how to build them and be ready to implement them even in our applications okay let's uh go real quick uh into what we're actually going to build today and what we will have ready by the end of this video so um yeah first of all we're gonna implement the fleets overview on top of a feed and uh these are displaying a list of users who have posted fleets and it will be always on top of your feed so you can access them uh and whenever we press on on one fleet we will see a display of the actual fleet and that's going to display either a image or a text for um or a text yeah and uh after that we're gonna implement this with a graphql api so at the end we will have a full stack working uh system for stories and we're gonna uh implement the backend api using aws amplify um so yeah more details on that later and advanced of course we're gonna create a screen where you can actually create and post new fleets and as well here you will have two options either to write some text over a background or the second option will be to uh just upload the image and that will be shared so yeah uh hello everyone from the chat how are you doing guys where are you joining today from so uh quickly about me my name is vadim thank you very much for joining if you are new here on this channel i'm trying to do uh to to teach react native naws amplify basically full stack mobile development and i'm go i'm teaching this based on uh on building projects because i think this is the most efficient way to uh to learn a new technology and to to master it uh yeah because i know that a lot of my friends uh have been stuck in this tutorial um life cycle where they are watching tutorial uh and we never actually start building and i think that this is um this is why they never succeed and if you actually start implementing this messing it around yourself building something even if it's something simple that's when you actually learn and the whole process of learning becomes much more enjoyable because you see a real result a real product that you can share with your friends you can create like some dummy applications and share and you can even publish it on google play yeah i know one one of my friends just created the simple pet projects of his own uh and now he's earning even some money because it was just for learning purposes and he's like checking in like a couple of hundred dollars per month so yeah that's that's the cool part of it so yeah let's learn together by building application and today that's gonna be twitter fleets hi hi guys hi george hi sumad uh sereno alexandra hello jack hi uh manav hello alexander is saying there are a lot of tutorials on firebase however your idea of being different and use aws is much appreciated thank you very much alexandra uh yeah that's i'm using aws because that's what i use every day and i really love it and i think that it's very suitable for even for production ready builds so okay guys um yeah if you will find this enjoyable please consider subscribing to the channel and smashing the like button uh to help me with the growth yeah thank you very much let's get started so uh what are we go going to use for this project uh for the front end we're gonna use uh react native and expo uh sdk uh we are going to write everything in typescript and if you didn't work with typescript don't worry too much because it's the same like javascript with some types however if you are new into typescript you can write javascript and it will compile um and we are of course going to use react nate uh navigation uh for navigating between um uh yeah stories fleets of course uh for the backend we're gonna use as i said aws amplify with aws up sync so aws amplify is is nothing new is just a set of tools uh that uh aws already had and they just made them much more easier to integrate with front-end applications that's like mobile or even web yeah web applications so in our case for our api behind the scenes um amplify is using upsync to create a graphql api yeah don't worry i'll talk about this a bit later when we get to it it's really uh and surprisingly easy to to integrate and yeah we'll we'll see how we do that um so uh one second let's uh go with uh prerequisites so first of all you will have to configure aws amplify if you don't have it already set up and to do that on amplified documentation you will see a very good documentation on how you can configure and set up amplify i'm not going to follow this because it takes some time and i already have it set up yeah you have to have node.js installed then you have to sign up for an aws account and here i just want to give you a a note like aws account is free to sign up however you need to um put in the details of your credit card uh but uh most of the services that we you will ever ever use and all of the services that i'm using in this tutorial uh have a free tier and that's basically like uh aws is giving you a free period for the first year they give you free use of all the services that they have mostly all of them like be be careful and do some research if you're doing something different with what i'm doing in these tutorials and yeah i've built around five projects on this channel and all of them are hosted on aws and i haven't been charged uh not a single dollar so far so that's uh yeah however uh if you uh work on your project and publish it uh to production um aws is pretty costly if effective and for uh for example my startup is serving around 15 000 users and our monthly costs are under 70. 70 dollars per month so it's really cheap for for that amount of users yeah here you have even a video from nade hello nade and he helps you install aws amplify cli after that you have to configure it it will ask you to create a yam user you'll figure it out i hope if you have any troubles guys join the discord channel the link you can find down below and ask there a question and i will try to help you so after you do that uh let's see uh after that we need to initialize the project and yeah today found out about this cool command from amplify and you do amplify you run amplifying it dash app and then you give the url of the github for of a twitter clone that we have already built in the previous videos so if you have already built the twitter clone from the previous videos uh you have to skip this part because this will just install that wet application however if you're new here and you don't want to go through all the setup of twitter and everything that we already did and i'll show you the state of application at the moment uh in a couple of minutes so we run this command and this command will clone the project it will install the dependencies it will do yarn install or npm install then it will set up amplify back and then push it to the cloud and after that it will also run the project so uh after you run this this command you yeah um expo will run the project and you'll see this page so from here you can run the application either on ios simulator or android device uh the application will work on any other platforms so it depends on your preference or if you're on windows you uh you have only like the android device or emulator option so yeah i'm go i'm gonna run it on ios simulator just uh it's just my preference but it works on both because some of the users were asking me uh if we can run it on android so yes guys you can run it on android and after you run it on ios simulator you will you'll probably not see this page you'll see the authentication page so you need to sign up just provide your email address you'll receive a code you sign up the process is straightforward and after you sign up you can go ahead and post some tweets into your into your application so um yeah let's have a look at um uh let's have a look at what uh the application how the application looks right now so after you do all of that and sign up into the application um i think you uh most probably you will not have any data here because there is no uh tweets in your application so you will go ahead and see say like hey this is the first tweet you will tweet it and if it doesn't appear in the in the list just do close the application and open it again and now it should work hey this is the first tweet so yeah uh you you will see that your tweets appear in the list you can add upload even images as you see in our tweets you can like the tweets and it will increase it will show also we have here navigation setup and you can navigate through different screens we didn't implement those screens because we focused only on the main part all the tweets of posting tweets uh authentication is installed is implemented also the back end and all of these tweets are not dummy data they are coming from actual uh back end and um yeah this is uh what we have and what we will work with mostly we will not touch anything that is already built we'll just focus on uh twitter fleets today so probably you don't have to have a lot of knowledge of the current project if you didn't follow it along you will you will manage to do the fleets uh without the knowing everything just have a little uh walkthrough understand like how app looks what is implemented and what not and then we are good to go yeah one more thing uh if you follow the along the project that was a couple of months ago most probably when you run the project you will have an error and that error is because your api key expired so if you have that error and if you will have it in future follow these two steps in order to rotate the api key so uh in order to delete the existing api key we will set create api key to zero uh in the parameters.json and then do amplify push after that's done we set create api key to 1 in the same file and do again amplify push first step will delete the ap key the second one will generate a new one so the new one will be um yeah will it will be yeah come on the d find a word yeah it will work with a new one it will not be expired sorry so yeah uh you have to do that in the file amplify backend api parameters and here you add it you add it as a new option and first first time you add it to zero you do amplify push after that you come back and do one and again you do push and it will generate a new key okay so uh i hope now everyone is on the same page uh people who are new to to the twitter clone and can start working on the fleets along along longas and also with people who have followed the clone in the first two or three videos also are on the same page and then we can start before that let's have a look at what people are saying in the chat sorry guys so hello from india hello from nigeria hello nigeria uh colombia hello novedad uh because of spotif uh george is saying because of spotify clone yesterday he landed the client for 800 that's so nice congratulations george i i'm really happy i'm really happy for you and it really made my day like oh is is this your first client or did did you include it into your um portfolio or how did that happen yeah i'm i'm interested into that so please uh yeah write me on instagram or on discord and let's chat about that it's pretty interesting hello savik from india hello calm from kenya make cereal yes a serial application yeah a lot of people are saying to make this application suggested but i have never used it so i might have a look at it and do it in future hi faizy uh i like your video so much sir thanks for your precious time lots of prayers for you thank you very much uh anas is asking this project depends on the previous twitter clone yeah we are building on top of a previous twitter clone but you don't have to build the previous twitter clone uh to follow this one because you everything all the code is available on git on github so with just one command amplifying it up and supplying the link to the twitter clone you will be at the same at the same place as where i am and you can follow along from uh from this point so yeah it doesn't depend okay guys so let's have a look the first thing what we're gonna build is a user fleet uh preview component and here i'm talking about one specific user that is gonna be displayed on top of a feed not all of them but one one specific user so we're gonna build a component out of that one and we're gonna reuse it multiple times to display multiple users in that component so yeah we for that we need to display the image and the name of a user image name underneath and they display the outline around the image and here the outline is gray we will do it with blue because blue is uh the outline when you didn't see uh the fleet yet so it's like active so let's go here um and let's start coding i have my coffee let's drink some coffee stay hydrated guys don't forget about that okay so let's uh generate this component so uh we create a new directory let me see it more comfortable i feel it's gonna be a long stream so uh fleet how was it user fleet preview yeah uh for user fleet preview we are going to generate the index dot tsx and of course styles styles.ts so for the styles let's uh declare the boilerplate plate here so let's import style from react native and const styles equal style should create export default styles yeah by the way guys do you know any tools that generate the boilerplate of components because i feel that i'm wasting a lot of time just writing over and over with boilerplate so if i find a tool that helps me do that it will speed up our process so let's in the index dsx let's import react from react let's import image uh text a view um and probably that's it at the moment from uh react native react native react come on react react not like this react oh it's equal no equal react native yeah and now let's declare the component and yeah that will be our user fleet preview so we will return initially we will return just i don't know a view and inside the view a simple text just to know that it actually displays text hello so let's do export default user fleet preview and we should import it somewhere uh in order to display and that's gonna happen in some of our screens uh and probably in the home screen yeah here we display the feed and before that we're gonna display this uh user fleet preview uh yeah first of all let's import user lead preview from components like that and just render it above our feed let's save and yeah i can see some something there i don't know why it's underneath the header so uh okay right now we will need to render a image and the name of a user and this information we are gonna receive from the props so because we are working in typescript let's declare the type of our props and this basically means like how will the props uh look like what shape it will have what types all the properties will have so for example let's say user fleet preview props is equal to it will have um and will display the name of the username like the twitter handle or the actual name i think it's uh it's um it's the username so username string did they do it correctly let's check how to how to do oh it's type is not interface yeah uh export type like that and also do we have a user type user type id name username image yeah we can actually use that so our user will be a user not user instance just user type and user type we will import it from import user from types all right is it there user type command user type user type yeah so basically in the types we already have defined how a user should look like and it will have an id it will have a name a username and an option an optional image so we just import that type into our component and we say that our properties will contain a user which will be of a type user so let's say uh yeah props will be of type user fleet props like that and here we can destructure them uh we can destructure the user from our props and we can forfeit this structure like to to take even um deeper fields for example name and image because that's what we will need so to do that we uh yeah this structure like this the username and the image come on image is it just image yeah it's just image so for the text uh here we can actually display right away the username uh for the image for the image we are going to let's have a look how we display the image uh for example here in profile picture profile picture yeah we have a component actually for the profile picture so i think i will just use this component profile picture and not that the image import profile pic profile picture yeah from profile picture and we need just to send the image and a size which will be 50 by default if we don't say any size so let's render the profile picture here profile picture we need to send the image which will be the image that we have here no username sorry for that and for the size let's leave it by as the default value and we'll see uh shortly if it works so yeah profile pictures source all right image yeah i think that's how it's done and now we should go back to our where is it let's have a look uh the screen the screen home screen and you see already here we see a red arrow because property user is missing uh from the props and this is the advantage of typescript because if you are not using typescript you might miss errors like this but typescript will say like hey you you forgot to add this user property so our user property will be an object with id uh let's say one name uh but dim and image let's have a look i have prepared some images uh come on come on over here yeah a url of the image you can paste here um yeah any url or you um yeah i can you can probably find this in the dummy data of application a bit later and what else what else a user a username right a name and a username as well username is as well vadim let's save yeah i see something there i don't know why it's underneath hello why is it underneath [Music] container flex 1 adding some padding to the top just as a life hack save yeah something like that i don't know why i think that's because of of a safe area or with the top bar yeah i think that's that's a bit better yeah we see our avatar there i think it's quite small and we can uh give it a bit bigger size so here in the index for the profile pictures we'll send i don't know 70 pixels let's try it like this yeah now i think it's a bit better and yeah i think it looks good now it just need a bit a bit of styling so for this view i will give a style dot container um i will put the profile picture into another view in order to display the circle around the image i hope that that's how it's supposed to be but we'll see so uh image the adjust image will be okay and let's put the profile picture here and lastly uh some styles to them uh username username now let's open up the styles and declare the styles for the container uh what else we have there the image and the username image and lastly username let's save the error should come on come on come on come on what are you didn't messed up something in the index most probably yes we will not need the image but that's not the problem i think we didn't import style and it's no style but styles yeah let's import the styles styles from this folder dot styles and yeah right now it's much better so uh for the container yeah yeah thank you alexandra is uh told me from our part of the house styles thank you so for the container we need to align the items in the middle to have a name centered center yep um let's work with a username first and probably will need like a margin tops something very small like five pixels like that uh font size a bit bigger 15. a font weight bold and the font color some gray font just color yep color i don't know light gray save i've got a comma here yeah it's too light gray i'll paste in some random color and from here i can choose the color oh here so yeah and gray like this save yeah that looks a bit better okay for the image we need to display let's just play some background color to understand if something is happening there and the background color will be the color of the system and the color of the system is somewhere constants colors and tint color so let's just copy paste it from here yeah with um yeah this is uh this is something that we are looking for so before uh rounding the corners uh we need to add some uh padding to this container and this padding will define how frequent this border will will be so let's say um padding 10. probably too much yeah definitely too much five and um border radius um i know 50. yep like that however i think that that blue is a lot darker something like that too dark all right you know what um yeah i think it's good or we need to add some a white line between this blue and the image so to accomplish that we might do it like this we say how is it called the the outline um border right not border writers border weave i don't know like uh three pixels border color let's say let's put will you work save yeah and now we make this one blue and we make this one white yeah and now you see this uh this effect let me try to make it a bit bigger so you could see something here uh yeah basically fact that there is some spacing between image and that little outline and this looks uh makes the the image pop so yeah now i'm happy with what we have in the home screen we can even add a bit more because we don't see the whole image yeah like that so yeah i think we are done with this particular component to display one user in the fleets preview so let's get add get commit user fleet review component and let's close everything else and for one minute see what your guys uh saying so how are you guys feeling are you following along or are you planning to do that after the live stream uh recording what they say is asking are you from romania uh i'm actually from moldova uh es7 react redux graphql rank native snippets extensions for vs code users uh okay hope that is the extension that i was asking for oh rack native snippets okay that's uh that's something that i have to look into alexander can you remind me about that uh yeah hi guys hello everyone who is just joining so to give you a little overview uh today we are building uh twitter fleets and we're gonna be we're building this in react native uh with expo and then we're gonna integrate it with a backend uh and that will be using aws amplify which will will create a graphql uh api so right now we just finished building the user story component now the next step uh will be yeah the next step is uh the user fleets preview list and yeah once we have one component we can take the same component replicate it put it into a list and display multiple yeah components multiple users in that header uh using that reusable component so that's what we are gonna do right now um and yeah let's start and yeah before that i'm gonna grab some dummy data uh i'm gonna create a file in the data called uh i don't know user users with fleets because this is gonna be an array of users and each user will also have some fleets inside uh yeah let's add this here and let's say export default uh export default probably it will be an array so yeah let's have a look at the dummy data that um alex has prepared for us uh yeah if anyone from you guys are following along and you need this dummy data to to continue uh please let me know in the chat and i'll try to yeah to to give this data to you somehow uh but this this is going to be available on github under the data you will find this file users with leads so users with leads is an array of users so yeah all of these are users a lot of them and each user has like id has image name username all of that and also has a a fleet which contains an array of of his fleets and each fleet will have an id a type and a image or if a type is text uh a text but more about that a bit later so let's uh not focus on the fleets we will uh focus only on the array of users because we will need to import this and for each object that we have in this array in this case like uh one two three four five for each five of objects that we have here we need to just to render one uh component that we just build and uh we will send the username and also the the image to that component so without further ado uh let's uh yeah let's create a new component because everything in react and react native is about components so that's gonna be um let's see let's think about a good name suggest me a good name yeah um user please uh list list yeah bad name bad name with him but let's move on yeah index tsx again uh styles but for styles i'm too lazy to create them i'll just paste them here and yeah i'm pretty sure we will have a container there so let me leave it there we even might not need styles here but we'll see so in the index uh uh again yeah let's start it from scratch not to confuse anyone so let's import uh react from react uh let's import our newly created component which is called user fleet preview from yeah from this folder that we just created but yeah let's add it a bit down below and from react native we will probably need a view and a flat list and flat list is the component that will help us to display a list of items in this case a list of fleets so let's import it from react native and also we need the dummy data import users with leads from somewhere here data users with fleets so yeah let's do const user fleets pre list and it will return let's return initially uh yeah we don't have a text we will probably implement it right away a view here let's not forget to export default user fleet list and inside this view we need to display a flat list and yeah um here our uh feed is as well a flat list uh so you can go there and see as an example how we did it there uh however yeah but i'm gonna explain like what we need to supply to the flat list in order to to to display uh a list of data so flat list has two uh required properties and first one is data and the data is yeah an array of items that we need to display like all the data like uh but it should be an array so our users with leads if we see here this is an array this is array of users and for each user our flat list should know like how should i display how should i render each user and how should we render is a property called render item and here we supply a function and we receive an item and the item uh will be one specific user that the flat list is trying to render at the moment so initially the item will be this first one and it will contain this object with all the id name and all the information uh the next one the next time it will contain the second the second object and so on it will loop through all of the objects in our array and it will call the render item function for each of them so for each item we want to render a user fleet preview component a component that we just built and we will send as a user this item that we receive so like that and that's the only two properties for flat list in order for it to work so let's save and let's cross our fingers and hope that it will work yeah of course it will never work because we never imported the user flat list so let's go back to our uh screens home screen and instead of importing user fleet let's import user fleets list from user leads list save let's render it here and now the user at least doesn't need any properties because it takes one from the dummy data so it's going to be as simple as that let's save and now we see yeah now we see our list of users uh of course we see a problem hey lucas thank you very much for the donation uh thank you you are always here to support me i really appreciate that so uh yeah as i was saying we see a problem with the stories are displayed vertically so let's go ahead and fix that and in the index uh and i forgot how was that property uh can i see them here let's check the documentation i think is a direction or something like that react native flat list and yeah horizontal just yeah we have to just pause a property ho re zontal save and badum badum it displays something i don't understand what and why uh let's try to re-render it [Music] we're going that's very weird uh let's have a look here not sure if that's yeah this error is yeah i know about that it's nothing uh critical hmm why aren't you why do you disappear maybe there's somewhere yeah one thing i could try is yeah let's have a look at the home screen we have our feed so we can display our how is it called user user fleet list inside the feed as the header as the header of that flat list so let's open the feed here we see flat list and let's try to add a property uh list header component uh if i'm not mistaken let's find adder yeah list header component but should be a capital l list header component is equal to the user fleets list and did it import it correctly yeah it imported it correctly and now let's try from our home screen to remove our user fleets list because we render it in the feed let's save and now yeah now it works properly because sometimes when you render two flat lists into the same page because we have like the bottom flat list which is a feed and also the header flat list which is uh the stories uh yeah it's uh not very advisable to display them uh on the same page however you can display the the second one as a header component of our feed so in our feed in our feed we display it as a list header component and that's why when we scroll we are remaining at the top like with with all the posts oh i blocked the phone come on all right so yeah that's how we display that and i think one more thing we need to fix is to hide the scroll bar and who can help me to hide the scroll bar because that's a very big name horizontal something whole horizontal hide something like hide horizontal um scroll view scroll bars or something like that horizontal show horizontal scroll indicator false save and no it didn't work yeah i think it's something different show horizontal alex help me oh but that's in the feed oh sorry i messed it yeah yeah exactly not in the field but in the user fleet list here yeah uh save and now yeah now it disappeared the horizontal thing so yeah now it's perfect and in our home screen we can remove the padding top because we see some margin unwanted margin there and yeah that's how we want it to look maybe adding some margins but it's good without that as well so let's save let's add get add git commit user fleet let's preview list implement done so yeah we have our user fleece preview list uh let's have a look at what people are saying here do you have any experience with firebase um yeah not a lot of experience i work with firebase at my startup but we are doing only like some basic analytics stuff and everything else is done on aws so someone is saying that they'll follow along after the live stream because it's very hard to code along in a live stream is it because my pace like i'm doing going too fast or and you want to to go slower and understand everything but yeah i think that makes sense because i'm trying to keep the live stream quite relatively short if you can call like three three hours short but yeah that's that's what it is someone needs a dummy data what if i just do git push i think that would be the easiest and you can now find it if you go to my github account and twitter clone the link is here i can send it in the chat and if you go here to the data you will see the users with leads so you can download it from here i think that's the easiest way to do it uh does he ever look at the chat yeah i'm looking at the chat however i'm trying to stay focused on what i'm building at the moment because you can imagine people uh afterwards are watching so they don't they don't like when i get disturbed and i'm all over the place so yeah i'm coding a feature then we can talk guys you can ask questions and event we can even have a like q and a session and uh also i am i will put down below timestamps of um all the chapters like all the steps that i i took to build the application and this way for people watching after um after the live stream uh we are not disturbed by our uh chat and talk here and if you have something more into depth that i cannot um take a lot of time to answer feel free to to write me on instagram on discord channel you can find the link down below and i'll try to help you guys so yeah please understand me [Music] yeah thank you once again lucas for the donation that really helps uh helps me uh yeah thank you for people suggesting show horizontal scroll indicator fix that uh need the users with fleet data yeah i just uploaded it to the github so feel free to download it firebase is expensive i'm i didn't i'm not sure about the prices of firebase and a lot of time uh it really depends on how you're using them so even in aws if you are using it properly all the services uh you can have like really really cheap um like cost but if you're going over we had like and have like i don't know like gpu instances then your price will skyrocket so yeah keep this amazing job up brother thank you very much duane yes but to follow up with the real time we need the dummy data at least the game can prove a code we will have it um yeah i'm planning um for the next live streams i'm planning to have a bundle like a a file with everything that you will need during the the live stream and that will be like the dummy data the images phones icons and so on so i'll i'll try to to provide this at the beginning of each stream so ok guys let's uh let's move on and we'll uh talk when we finish the next feature and the next feature for us is okay this is uh is starting to getting in to get interesting and this is the flat uh the fleet screen and uh whenever we press one of the fleets uh here in the preview we need to open the fleet screen and to display the actual fleets uh yeah for the text fleets we will display a background color as you see here on the left and then we will render the text let me why do i have a fly in december go ahead go away go away please so uh all right go away yeah let's close everything to have it clean all right um that will be in this case i think a screen because yeah it's gonna be a navigation screen and we will call it fleet fleet screen come on lead screen dot tsx so let's real quick import everything we will need cost fleet screen will be a very simple component at the beginning and we will return just um let's return just some dummy text hello there uh let's export default uh the fleet screen to be able to import in our navigation and actually navigate here and also let's uh import the text because we forgot to do that from react native from react native all right so now we need to uh define a navigation screen uh for this fleet screen and that we're gonna do in navigation uh and not in the bottom tab navigator because we don't want to show it here however we will do it in the index and in the index we will display it here let's first of all import it and i'm just going to duplicate the previous line because i'm too lazy and change the name fleet screen and flit screen the same i'll do here i'll duplicate the new tweet line and for the name i will say fleet and for the component split screen uh yeah it says that type fleet is not assignable to a type root um this fleet because we defined all the possible screen names in order not to have like um yeah to mistype something or errors so we just need to add this name fleet in the types bottom not bottom but root stack and here we will define it as yeah undefined this is just to say like what uh possible values can the root stack program list contain so let's save and now yeah our red arrow is gone okay we have our fleet screen there now we need to somehow navigate there and where do we want to navigate we want to navigate whenever we press on one of the fleets here so let's go into the components user fleet preview and here we need to to replace this view with a touchable uh component and we will assign a onpress function that will be that is going to be called whenever we press on the userfully preview component here well i think we need to add some margins between them because we are too close to each other so i didn't see that so for the container let's simply add some margin 5 5 10 something like that save now yeah now it's much better all right uh so now whereas in the index uh let's import touchable without feedback and we're gonna replace uh the top the root view with attachable without feedback in order to uh expects only one children um all right so no we're we change the strategy we wrap our view inside this touchable let's save yep yep yep and we have to assign on press um on press so let's define this function above const on press and here we need to say like navigate to um fleet screen but before that let's just do a console word to be sure that this um this function uh is get is called so yeah i'm doing that uh all the time like whenever i have a event listener first of the first thing i'm doing is just uh do some console worn to be sure that that function is called because a lot of time uh yeah you miss you you have some errors and you think that it's an actual logic but uh the only thing is that you are not assigning the function correctly where you forgot something so in this case we are sure we are pretty sure that uh it's implemented correctly and this function is called whenever we press on on a component and we see here fleet so now we need to instead of console logging we need to navigate to do that we need the uh navigation object uh so for that we are gonna import a hook called use navigation and this this is from react navigation navigation slash native so yeah let's save and using this hook we can have access to our navigation just by doing that use navigation navigation yeah a simple function that gives us access to the navigation and it's so powerful because uh previously you had to pass this navigation through props before hooks were introduced so now yeah it's uh it's much easier so in the on press we say navigation dot navigate where to uh the name uh yeah to the name of um of a screen that we defined here so in our case it's fleet so let's go to the fleet and we need to also send some um some properties in order to know like to which on which user we pressed so that is going to be user id user dot id right or let's just destructure it from here and paste like this id um yep hopefully that's yeah and now let's try to press on uh on one of these components let's press and we see that we are redirected to our fleet screen and yeah in the top corner we see something there like hello um maybe you cannot see it but yeah it's there so we we know that we are redirected and we when we go back we are here so the navigation and the basic component is done now we need to actually render something there so all right so let's open our screen where is it fleet screen and i think that we are going to add it into a directory because we will need some styles here screen and let's add it in the directory and we can even refactor and rename it to index to to keep it consistent with all our components yeah like index and styles and yeah let's do the styles as well styles currently is just empty boilerplate uh alright so yeah the first thing is to display a background color and then render with text content however we need to wipe this name change during refactor flat fleet screen all right so um again we need to import the dummy data about the fleets so let's do uh const import uh users users with leads from data users with flits so we're going to use this data to actually render our fleets and yeah a little bit later we're gonna need also to display like to know which fleet of the user we actually want to display but right now let's just display the first one so let's i'm thinking if we should put the actual rendering of everything in a separate component and here in the fleet screen only to to manage the ids and all that all the hard logic and yeah i don't see why i wouldn't do that so hey uh priyank thank you very much for the donation i really appreciate it so yeah let's get back uh and let's create a new component i think that's gonna keep our code uh cleaner so let's say fleet fleet fleet fleet display or feed fleet view i will copy paste these two styles and index not to waste time creating them fleet view let view flip complete rename it to actual fleet view and and and and here we will in the fleet view we need to receive data about the user and also the data about the fleet so we will have um export type fleet view which will be will contain a user and this is a user type that we will import from our types import user type from like that no types come on where are you we are here components yeah i think it's just like that types yeah user type yeah i forgot to add the curly braces and also data about the fleet which will be a fleet type which we don't yet have so let's import it and then go ahead and define how will a fleet look like what the data will athlete contain um okay i'm gonna answer all your questions in the chat after i finish this feature so let's now go in with types and the same way as we define a tweet type we will define a type for a fleet fleet type and it will contain an id which will be string it will contain created at which will be a timestamp or a date in a string format to know when was this fleet published it will also contain probably a user user user type um it will contain uh we will have two types of fleet a text fleet which will be just a simple text that you write and you render on the screen and also a image fleet which will be which will contain a url to a image and we will display that image so later on you can also declare a video of lead which will render a video and so on and this type of a fleet will will be a string and will just uh save like a like a text type or image type so [Music] in order to know like what data we should expect there and if it's a string type if it's a text type we will have the actual text that that fleet contains and that is again a string and the text will be optional because if it's an image type there will be no text and the same way for the image let me just have a look at the dummy data to be sure that i'm doing it correctly users with leads and the fleets has a type image and it has an image and if his type is text it has it has text so image uh again will be optional and it will be a string so for now i think we are good to go with uh this type and later on we can edit it so let's close the types our fleet type um has been imported correctly and why have it with capital yeah like this fleet and yeah let's go further and declare props that will be of fleet view props let view props and we will destructure the user out of it and we will destructure the fleet out of it so let's all right all right all right from props of course yep all right so first of all let's put everything inside inside the view and we will add some background color to that view to make it look nice so let's put it into a view and then in the middle there will be the text of a fleet and initially let's try to just render a text type fleet and then we will do the checks if to render a text or an image so here we'll display fleet dot text the view will have style styles dot container the text will have styles styles dot text and yeah something like that let's import our styles because we didn't import them yet import styles from styles save split view where where are you styles here let's open a fleet view and here um however wait a second uh are we importing fleet view somewhere in our fleet screen no we are not so let's finish defining the structure in order to this to render something so we in the our flat fleet screen we are going import fleet view from component components fleet view so instead of this we are gonna display the fleet view and it needs a user right lead view components fleet view lead view it needs a user and a fleet user and fleet so where are we getting these values from we will get them from users with fleet from the dummy data and const user let's say it will be the the first one and later one we will do some logic out of it like not just taking the the first one but the actual user that you pressed on but initially that will be enough so user with leads again zero dot fleets and we will take the first fleet yep so let's send here fleet let's end here user lead view are you okay jsx element full view has no corresponding closing tag yeah because we should close it here let's save and define is not the object fleet dot text fleets our data leads oh because the first one is a image so let's display the second one that's a text leads where is it the screen one now and you find is not an object fleet dot text fleet um i think this this one doesn't take it correctly i think that if we just console dot log fleet and then console log the actual a string to to see better there let's save let's open a fleet and let's open our debugger here fleet and then nothing nothing don't text what's happening undefined we see undefined we see undefined maybe it's not called fleets data all fleets dot items yeah we kept this dummy data because that's how our back-end will respond us with so yeah let's just change uh let's just change it to fleece dot items and yeah here fleets dot items at position one yeah right now it should work save go here and fleet view hello there is this from our dummy data it displays hello there yeah i think it's from our dummy data yeah hi there so okay it displays correctly now let's just style it let's just give it some styles to display it properly in the middle uh okay okay that's in our uh fleet view styles and we have a container and a text so for the container let's align items center to display the text in the middle and justify content as well justify content center come on uh where is our text hello uh flex 1 yep right now the text is in the middle let's declare some background color i don't know some dark color not black but something like dark gray or we have something like blue i don't remember you can play around with this color and even render um gradient but i'm gonna go with a simple color like this when i find a proper one yeah let's go with that and yeah that's good and now let's define the styles for the text and the styles for the text will be uh first of all it will need a color which will be close to white probably a grayish um font size i don't know 30. something like that then font weight bold [Music] what else okay now it displays uh okay you can even adjust the font if you want uh to have a different font and a better one but let's go ahead and try to to have a long test text and see how it displays because i feel it will not display very well yeah let's just copy and paste this text a couple of time save no it actually displays very well i i can just add just a bit of um paddings to the container like parting i don't know 30 uh 20 save and should we text align center text align center yeah let's go with something like this it looks much better uh so this is in case our tweet is a text tweet and let's think about how we will render uh image image fleet not tweet sorry so in k yeah this is the second um fleet and let's try to render the first one so let's go into our fleet screen index and take the fleet at position zero save and it should not work and then in the fleet.index let's just let's import the image component i'm thinking if we should use image or image background we'll try with image if we if we don't manage to do that with image we will do it with image background the source will be uri fleet dot image and the styles styles styles.image so let's go ahead and define some styles for this image so first of all weave we need 100 percent 100 percent height as well or will the height be automatically no height 100 percent save nothing is happening yet no it's happening so yeah we see something however we see the padding of of a container so the image doesn't look very well here and the parting form container can we add it as as margin to the text so we take it from there we put it here but we change it to margin or margin so let's save yeah the image now looks much better one more property we will define um how is that property called to cover the value is cover um vadim is blanking react native image cover mode of course resize mode is cover in order to cover the whole view with it it contains all right so uh one more thing is that we need to di to to render this image only when the type of the fleet is uh is image or we can even say like display the image when the image is not null so to render conditionally we will do as following so we'll say like fleet dot image so if fleet dot image then we will display the the image so we leverage the end operator in javascript and it works because the second part of the end will execute only the first one is true so if this is true or a true full value like a string which is not empty then it will execute this one and it will display however if image is undefined then it will not display anything and it will not give us any errors so let's save now it works uh however if we go into the fleet screen and put that in item 1 which is a text now it displays the text and nothing is broken so uh yeah that's the fleet screen and yeah that's the fleet screen uh finished and uh where can we we will come on we will continue with rendering the top part of the fleet screen where we will display the user but before that let's take it one minute break and undo git commit fleet screen and let's see what people are saying i see new faces here hello daniel all right uh let's see let's see hi man what do you think about using phps back in with react native well i would say like uh in the beginning go with the technologies that you know uh if you have like a project and later on you can learn something else but if you don't know neither php nor i don't know node.js or amplify or other technologies and you just want to learn i would definitely suggest going with node.js because uh it will integrate better and you'll code like in javascript in both front end and back end so yeah sai uh thank you very much for the support uh use sql for the back end um interesting question yeah sql is um yeah it's not a for actual back-end but yeah um i don't think i will use sql for the database um like mysql or anything like that i don't know there are better solutions for what i'm doing currently with a project uh i want to follow this tutorial but i came to support you thank you very much again priyank have a dim would you do a simple recipe up where it uses filter method to fill recipe and show corresponding response please indian chinese american polish when click on indian it will show indian recipe like recipe 1 rsp2 yeah that's a good idea if you can find some actual application doing that for example ubereats i don't know if that's something similar of what you mean probably it's a bit different but yeah if you can find something um that i can use the designs uh because they don't like to to start designing then it will be easier volume streams are the best on youtube disagree then who is better thank you very much daniel uh yeah someone was helping me with user fleet items thank you very much uh good luck on your journey thank you very much joshua okay uh so yeah thank you very much guys for the support and for all the messages all right let's uh get going and see what we have next so uh next we have yeah displaying the user info on top of our on top of our fleet story so let's start doing that okay we will close everything everything should be clean please lead view index okay here should i make it a separate component or inside this one let's start inside this one because i feel that i already have a lot of components and you might get confused but uh at least everything is clean and all the components are like i don't know like maximum 50 lines of code and you can easily navigate and change and understand like what uh every component is doing so i suggest doing that as well in your real-life projects because it will save you a lot of time in future okay um we need to display their image name username and the time when the fleet was published all right that's going to be in a view we will give some styles user header user header container and here we will have first of all a profile picture that component that we already have we defined it so let's go ahead and import it so import profile picture from there and we define it here profile picture image will be user dot image and the size will see if we need to change it uh yeah after that after that we need to put we need to put this uh uh valver part inside the separate container because it changes the direction so uh yeah these two views are displayed in the same line and then the name and the username is displayed in separate lines so we will put them into a separate view with styles user names and display view not view but text style user name do we have the same style no one is bold okay uh just name and the text will be user dot name let's duplicate this line and declare the styles username and user.username for the second line and i think that yeah we need also to display like 10 seconds ago and yeah but the time that the fleet was published at so in order to display that we will uh use moment moment is a library that helps us this uh render times but initially let's do a hard code detect text i don't know like two days ago uh and let's and we should come back and change this to actual values right so let's go ahead and define these styles so if we save we see something here all right so user header container let's work with this one user names then you name and username and user name so first of all let's give some colors to this text because they are black and you cannot see them color ffff something like that and the same one to this one save yeah we see them there okay all right now uh to put that in in the same line for the user header container we will say um flex direction uh not column but row save now we're on the same line and we will also say justify content space between to move them around no why space between no flex start because we need them at the beginning let's start why is that happening background color i think i i understand red yeah it's only this one and if we do flex one it's oh no oh no oh no we've 100 percent yep like that so let's delete the background color here uh and end and let's adjust a bit the size of a profile picture size will be 70. everything is too much i think it's good and now we need to position the names in the middle uh usernames is it in the usernames or here align item center yup and for the name let's font size i don't know 18. yeah i think that's good and font weight bold yeah to make it pop the font size of a username will be probably also 18 but uh the font weight is not bold and yeah let's add just some margin vertical margin vertical five pixels to have some spacing between the names yeah that that looks a bit better we need that add here and we will need some some spacing between these two days and the other one so can i add the text inside the text what do you think yeah i think i can and styles dot uh time we will add some margin to the left in order to yeah to have some spacing between the username and the time so margin left 20. no i think i need to or putting padding will padding save our self all right so we will need to put them like that move back to margin give color give font yeah a lot of repeated stuff and we need to put them into a view to make them into the same line that's a lot of code for and this style i'll just add it here justify um their flex direction flex direction will be a row safe yep and probably 20 is too much then much better yeah the only thing is left is to somehow display it at the top so for user header container user header align self flex start will that work probably not okay let's think or user header container to display it as position absolute what do you think and just put it at the top not to mess around with other content that might work this position absolute top zero and yeah left is okay so yeah probably not even zero but like like 50 pixels from the top yeah and the thing that the header container is absolute it will not mess around with our actual content that we want to display so for the user header container let's also add some padding to to have some space between the image left and that will be 10 pixels like that yeah that's uh that's actually good and yeah i think let's just try to to display image fleet and see if it actually works as well good so save no it doesn't but why because the image is displayed on top of it if we displayed it if we render after the image so to render the image yeah but the text should be no the text can also be there yeah if we displayed it after the image it will be displayed on top and we can actually see it because previously it was underneath so if we set one it's back to normal yeah and maybe some spacing between the image and the and the text we need there so for the image let's add some margin right then no not for this image but for the no actually for the usernames and that would be my uh reverse margin left for the left 10. good yeah uh yeah i'm pretty happy with this one and we can um yeah we can add and commit it and move forward git and git commit minus m uh fleet header oh one more thing we forgot to display the the days dynamically from the fleet itself so uh we can have a look at our tweet component in i don't know somewhere finding path moment so yeah that's how we were displaying it yeah simply moment we give it the the created that of the object that we need to display and then we call from now so in this case it will be a moment uh we give fleet dot create that created at dot from now and we also need to import moment from moment like that save yeah and now it says a few seconds ago and that's the image fleet and if i go to our data users with leads yeah the fleece right now doesn't have created that but yeah later on yeah i think we can just copy one created that from here and add it to the image fleet and set it to i think it's good save three months ago and if we put the month 10 is two months ago and so on so i think you get the idea 23 days ago and so on so now the the time is as well displayed dynamically hit commit display created at the dynamically save all right guys how are you doing uh i am a big fan thank you very much please add a blue tick for a special person for movie star um yeah i think that's not that hard to implement but yeah let's try to to focus on the most challenging parts uh like to display now we will get into navigating between navigating between fleets and that's a bit more challenging than this bluetick button you can either display it as an image or style it with some background color and icon and that's it how are you doing guys how do you feel are you still following along i need to drink some water so let's see yeah the next part will be quite interesting all right so let's go the next step [Music] the next step will be the fleet screen navigation and we want to go to the next fleet whenever we press on the right side of the screen go to the previous screen whenever we press on the left side of the screen whenever we we reach the last fleet of a user we need to we need to go to um to the next users users fleets so yeah that that is our stats that we need to implement and let's uh yeah let's try to implement them here let's again close everything and now uh all our most of our work will happen in our fleet screen so uh yeah first thing that we need to implement is for example whenever i press on the dim it displays the the fleet of myself however if i displayed it for the second user it again displays the the fleets of the first user so let's go ahead and try to display the the fleet of a user that we actually press on and to do that we will uh take that data of the user like the user id from the parameters because we will already send that and uh i'm gonna show you where we send that is in user fleet preview index and when we navigate to the fleet screen we send uh additional data which is user id so we need to take that data in our screen here and find the user with vet id so for that we will import a hook called use route because that data is contained in the route of the screen from react navigation native so let's say uh const route equal to use route okay we have a route and now user uh we will do a filter and we will try to find no let's first of all take the const uh user i d is equal to or should we yep i'm thinking if we should save this in a state yeah yep yep yep yep let's save a user id now let let's go along with like this and later we'll see if we need that instead so user id we will take it from route dot params and because it's also called user id we can actually destructure it and let's go ahead and just console log it in order to be sure that we are actually receiving something console worn user id save what's that does not exist on okay let's go here it's one all right that's good we receive something if we go there it's free so uh no this one so const user is not the first one but is dot filter um and how we're gonna filter based on id so if ids are equal to the user id that's the the user that we that we need so here again we're gonna take from this user but we need to make sure that it exists so let's add question mark not to have um uh undefined errors so let's go here lucas uh undefined error lead dot image so let's console.log the user to make sure that we actually oh not filter but find because filter will return an array but find will return the first item that it finds so lucas we see lucas story if we go back alexa we see alexa story and yeah that's uh that's actually uh cool i'm from kaliningrad daniel are you from kaliningrad and lucas probably has an image that doesn't um he's downloading and it's not shown yet so yeah now we implemented that thing uh so all right think think vending so we need to register um we need to register clicks on left and right on left and right side of uh of the screen in order to to move to the next story and to move back so to do that we're gonna send we're gonna send these functions uh from our flat screen because all the logic will happen here and we're going to hand pass them down to our flat view in order for the flat view to just call this function and we're going to handle all the logic here so let's do const [Music] next story or next fleet go to next lead and this will all right all right guys so this will initially just console uh worn next and the same thing go to previous um fleet go to priv fleet so let's just pass them down to the view go to next fleet and go to next to previous fleet [Music] we called it pr prevent i mistyped them yeah so yeah we implement all the logic inside here and uh currently it's uh just console warning and we send this information to the fleet view so let's go in our fleet view fleet view index here and we're gonna receive them as function here so let's say go to next fleet will be a function how do you define the type of a function probably like that and go to previous previous fleet is as well a function so let's take them from props and we're gonna call them whenever we press on one side on or valver it's interesting how we will implement that handling these clicks on one side or the other so let's it's either we displayed with a position absolute on top of everything all right so i guess that we will display them something here like a view inside the view we will have two touchable without feedback [Music] touchable without feedback on press we will call that on no go to private and for the second one let's just import that from react native on press come on what what's happening is equal to yeah do the same for the go to next fleet and let's let's add some uh background colors to understand if they're positioned correctly because we need one of them to be on the half screen and the other one to be on the second half of the screen so styles background color uh will be red let's save uh only expect to receive single react native element uh that's for the without feedback but what about opacity are you also expecting something save this one is uh doesn't expect and for the second one let's add it with blue color blue save we need some styles for the view i don't know if 100 hundred percent uh position absolute and i don't know background color here as well background when something is messed up with rendering just do background color green save top zero top is zero where are you height with maybe also uh uh height as well height one hundred percent save okay everything is there so let's just delete the uh background green and see if we no we don't have let's add again this width and height save and this one save the width should be 50 or should i just let me think if i say for both of them flex one will you work flex one and if we do uh justify um flex direction row now we are talking right so let's put all the styles of this container let's take it from here yeah when we press we see next when we press we see uh again next why next oh we that's what we are displaying um priv press previous next yeah we are working okay so let's remove this red and blue let's save and let's now see if we press we see next if we press we see previous pretty pretty good pretty pretty good we just need to take out these styles and put them into button container button container into styles just to keep our component clear button container and we paste in all the styles we do some formatting and we are good to go next previous all right so uh with this implemented now we can uh implement the logic of switch switching between fleets so let's go into the index and here and here uh and here now we will probably thank you very much adores so right now let's put the user and the fleet inside state because we will have to change them and if we change them right now nothing will happen because [Music] the component will not re-render it so in order to render on changes we need to add it to state so let's just import use state from react use state and we will added here const user set user is equal to use state and initially it will be probably null but the types of it will be null or user type that we can import the same thing with a fleet we save it in state delete set fleet and fleet type again let's import it okay uh we let's move this here to keep it same and and and and yeah i think initially for the user we can just put user fleet find and so on right just to move them above user id property user there's nothing yeah it's it exists i know it exists argument of type string yeah right now uh well the the issue is that in our dummy data i'm not having all the necessary fields of a user so that's what it says but i think it uh it will work and we will not have any errors so okay like that and [Music] for the fleet let's again say user um yeah this might not work but let's see save let's go back let's open someone else sorry yeah it it works alright so uh one more thing we need to keep track of the fleet index so let's say that a user has like 10 fleets so we need to keep track of the index of uh which fleet uh we currently are displaying so it will be initially zero so we know how to to get it then we will increase it and it it will go to uh one so for that let's also have a const fleet index set fleet index equal to use state initially the fleet index will be at position zero and we need that in order to display to yeah we will put it right here to take the fleet index from the items that that we have in state so to when we go to the next fleet we will increase the fleet index we will set yeah set fleet index i'm just gonna copy i'm too tired to type and we're gonna just increase it flitting decks plus one and this will just increase the fleet index and it will not change the actual fleet that we're displaying so to do that we need to register effect so whenever our fleet index changes we will change the fleet itself so let's um define a use effect a bit yeah somewhere here use effect and as dependencies we will put the filter index and this use effect will be called only when the dependency when filter index will change so we can say that fleet is equal to but not fleet is equal but set fleet sorry guys set fleet to the fleet with with updated index so let's save and let's see which user has more fleets everyone has one and only the first user has two so let's go to the first user and let's try to press on the next we see a different story from this user however if we press one more time it's going to be undefined because there are only two fleets but we are trying to access the third one so in that situation we will need to actually go to the next user but before that let's before that no let's let's continue with this one to go to the next user so we need to go to the next user how are we doing that we need to find in our array of users the current user and his id like the index so what are you doing here yeah let's go here fleet index so let's check if the fleet index is equal to the length of the items length yeah if it's equal to the length of items then we will need to move to the next in to the next user and to say that the fleet index will be zero because we need to see the first story of the next user so lastly we will say set fleet index to zero but before that we need to go to the next user and the other one is in else go to the next user so i need to find the index of a current user so uh or i just need to do a for loop that's [Music] let's do a simply for uh i don't remember when was the last time i i did four uh traditional four loops for let i equal zero i less than user fleet items dot length i plus plus and if um if if if what no we need to look through users not through fleets we need to look for users user length not user but users with lead my team is a bit tired but come on so if users with fleet at position i dot id is equal to uh our current user id um dot id then we found our current user and we just need to take the next one so [Music] let's let next user id uh no let next user index it will be easier is equal to minus one initially and we will say next user index is equal to i plus 1 because we found the current one and we need the next one and we can break out of this loop because we don't need to to find another one and here [Music] if if users with fleets dot length is more uh yeah if users if more of a next user index only then because if we have actually other users to go to then we need to to set it not to again have set next set user to users with leads next user index right and this one again here save let's just hope that it works next is my story and when when i press next i should go to the next user story and i find is not an object evaluating fleet dot image [Music] where and what happened because i'm doing a lot of things so um let's let's console word um the word next user index because that's where the errors might happen let's go here next one next one and find this down to an object if lead dot index u is equal to fleet not items but items dot length save let's go let's go lucas next one press daniel next one you see alex next one and i think yeah elon musk tweeted something uh of course i still love you yeah that's the name of the pod of from um and if we press again it doesn't okay what happened there oh okay let's say if it's more or equal if it's more or equal and now let's go to alex press ellen mask and if we press nothing happens because we are at the end of all the stories so now let's do the same uh for the to going back so when we want to go back we will do minus one fleet index minus one and we will need to have a if statement uh to check if fleet index is less than zero if we go to minus one then we actually need to go to the previous user we need to go to the previous user okay i think we can uh simplify a lot with you with a user index and the same way as we have flit index to have a a user index but i'm not sure about that yeah let's just um yeah copy this one a bit on the top next user index and change it from not next user index but just user index because we will need it to go both in front and backwards so uh user index will be just i so if fleet is more than length yeah let's check uh user index user plus one because right now we need to do this here plus one and we can put this if statement here and go to the next user yeah and we will do the same if statement to check um yeah to check if fleet index is less than zero which means that a flat index is less than zero if flip the index that basically means that we we are yeah we need to go to the previous go to previous user and and also if user index is uh more than zero in order to be sure that we have uh still users to go previously because if he's the first user we don't need to do anything because it will um yeah we don't have anywhere to to go previously so then we go to the previous user minus one right yeah interesting logic here regime next previous next previous working if we go to the next user it goes correctly if we go to previously yeah it goes oh but when we go back we don't want to go back to the first to that user's first fleet but we want to go to that user's last fleet if we get what i mean so i'm gonna say set user not zero but uh fleets dot items dot length minus one yup exactly user fleet items land minus one uh let's check because when i go back from the next one i should come here let's go to lucas come back yeah i come here that's uh correct yeah it works the navigation and define is not an object nice else in fleet index else all right i think i understand what happened that's because we took out that if statement and in order not to yeah not to do a lot of checks underneath i think it will be better to do the check here if go to the next user set fleet index and like that and with a user index as well we put it into the if statement inside okay go to the previous user and let's have a look next next next next next next works previous previous previous previous yeah it works all right so um yeah the only thing that um i think it goes there you flip the index yeah else set fleet index to zero yep and there else set fleet index to not to go very very far away like to keep to keep it there dot length yep like that and right now if we press and i press a lot of times and yeah yeah it works i press a lot of time back when i go in front i see it there all right that's that was quite a journey all right guys let's um i think we can commit get odd get commit minus m stories navigation navigation and we are done with stories navigation yeah that was a bit challenging but we managed to do it how do you guys feel how are you doing are you following along is too focused on the work like i'm trying to to manage everything and maybe i lost a bit of energy but i think we we are good so uh i think we are gonna skip for now automatic navigation based on progress um and i'm gonna better show you how to integrate the backend because this stream is taking a lot of time so the next one will be yeah we can we can do that we can do that to display from the backend uh all right how are you doing guys uh someone is asking uh niklas when did you start learning javascript uh when did they start learning javascript i think let me remember well i use javascript that at my previous startups that i tried when i was like i don't know 16 like five years ago or even more but i started using more often javascript uh when i started working at my start current startup because we started working with react native with node.js and yeah already all the js technologies and that was i think three or four years ago i'm very bad with like dates and years and stuff like that and hats off for you buddy thank you very much adarsh may you suggest how to start with animation iraq native for beginner in case you would like to share your puff first for same uh for animation check out um i i will share with you some good channels on youtube that are doing uh that are focused only on that so everybody need to go thank you very much for joining and i will see you later don't forget to join the discord channel and let's continue with discussion there hats off to your dedication thank you very much for appreciating uh keep up a good work thank you love from india yes best session till date oh thank you for appreciating yeah it's a bit more challenging but i'm having i'm having fun love you bro thank you love you all right guys so so now let's let's go with uh graphql api so until now everything we had was done um with dummy data and now we want to actually uh integrate the back end so all our fleets will come from the database and we're gonna use aws amplify uh to create this this backend for our fleet yeah our backend is already created because we display tweets and we display user we have we have users there and yeah we're not going to go through setting up everything because it's already set up you can uh go back to previous videos of twitter clone to check out how we did that but here we'll just gonna implement uh the fleet model to our graphql schema and if you're not familiar with graphql um yeah the schema is a place where we define how our data model will look like what data fields will happen with what other models it will have connections uh yeah after that we will push the changes to the cloud we'll create some fleets directly in aws console i'm going to show you how to do that and i'm going to fetch the fleets dynamically from the api um yeah before that someone is asking me to push the changes to github till now so we can easily do that here you go brother and we can start implementing them fleet schema in our api so let's close everything and our everything about our backend is inside our amplify folder open it up and here you'll see backend in the backend there is the api and here we see the schema.graphql so let's quickly have a look at what we currently have we have a user model which contain his username email image and a list of tweets and uh when we will think about fleets fleets are from our database model perspective are very similar to the tweets they are posted by a user they have some content there we have an image they're very similar so whenever we see tweets we will think how we we should change it to fleets basically that's uh how i always learned i saw an example i was thinking like that's similar to this one let's just copy paste adjust it what we need and then see how it goes so in this situation when you see tweets think about how we will adjust it for fleets fleets are stories so here is a twit tweet model it has also content it has image it has a user id it has a relationship with a user because it it is posted by a user and it also has likes yeah for likes we don't need to to get into that so what we need to do let's just copy the tweet type and adjust it to our fleet type very original name so our fleet will be a model it will have a key uh by user and the fields will be user id the same as for a tweet again it will have id for content i think we named it text let's open our yeah i i remember what we have there so first of all we have a type which will be a string and this type will be either or we can even have it as a num you know but let's keep it a string to keep it simple then if the type is text we will have a text and it's not required it's optional we will have an image if type is image again is not required user id will have a relationship with a user to know which user posted this fleet that's the same for a fleet a user connection user id and likes we can delete now in the user model the same way as we connect a user with his with a list of his tweets the same way we will do with a user with a list of his guess what of course fleets so yeah the fleet will be an array of fleets and it's gonna use the connection by user uh from the fleet and it will it will check it based on user id from a fleet and id from a user so that's how we receive user fleets and if i'm not mistaking that's everything we need let me just quickly check the dummy data if we have anything else there id type created that and updated that this are managed automatically and created by amplify so we don't need to do that image yeah i think that's it so let's go ahead and publish these changes to amplify and we'll do that with amplify push push me and now we will have to wait one to three minutes until amplify pushes all our changes for our database into the cloud let's go here yes yes and yeah this may take a couple of minutes and we're gonna wait until yeah all the changes um are created in the cloud and behind the scenes you don't have to know that but it helps if you know how it works behind the scenes uh each model type each type that you annotate with a model keyword uh will represent the top level model and amplify will take this model and will turn it into a database table and amplify behind the scenes is using dynamodb this is the aws key based database which is very fast and it's very very scalable yeah when i was working at amazon like we were using a lot these dynamodb tables and you can imagine if these dynamodb tables are serving millions of requests for the amazon website then you are in a good position with uh with using it in your production application so yeah i highly recommend uh if you will get more into this dynamodb you'll understand that there are some limitations it's a bit harder to paginate in dynamodb but you can work around that and accomplish good results with it so yeah that's a little bit about dynamodb what's your favorite state management library uh nicolas so at my startup i'm using actually uh apollo client to manage the state because our backend is a graphql api and we use apollo to communicate with this api however apollo also serves very well as a global state management so if you are using graphql i highly recommend apollo it's uh it's very it's a very good tool um yeah it it it manages a lot of things magically uh automatically behind the scenes and you get a very um responsive application and whenever the data changes in one part of application it automatically updates everywhere where you uh query where you display the data so yeah it's uh it's a lot of magic there for simple applications i i would recommend react context the context api and using the because it's much simpler than redux or other state management libraries all right i love your teaching wedding keep of a good work thank you all right okay what's happening uh all right our resources has been created and what do you don't like reload let's try to reload our application uh undefine is not an object of a tweet likes tweet likes with likes uh what tweet likes by tweet did i mess up something and get this what did i mess up okay i think i know wait a second let me just check come on oh here it is so yeah i i changed this manually i don't recommend doing that uh i recommend taking uh this query and making it into a file but at that time i didn't um yeah i didn't have time and i changed it directly there and whenever you push amplify automatically overrides it so let's just list tweets i will do the same again but if you have time i suggest taking that query outside so queries list tweets and here in the likes we need to declare these items because we we need to take information about them and let's delete this and let's save and yeah now it works hey brother thank you very much for the donation thank you thank you a lot much appreciated all right so now everything is working we can um we can do uh amplify uh console api and this will open the aws console and here we choose graphql where we can see our api data api structures we can also run queries directly there so for example we have a new query here get fleet so not get fleet let's do a list fleets list fleets this will return a list of all the fleets id image let's run there is no fleets yet however we can create one so let's first of all we will need the user id to know which user is creating this this fleet so i think i have only one user in my database and that's vadim and this is his id i will copy paste this one and i'll change to annotation and press add for the mutation i will do create fleet uh user id will be i don't kind of like this view here i always enjoy more writing them here so user id will be the id that we copied from myself uh type will be let's say text and text will be text will be hello there from aws amplify uh like that create fleet must have a subfield okay and then we select the id and the text to make sure that we actually added them correctly so let's run my mutation it's there and if now we run list users and for each user we will query the fleets of that user id items yep items id type and text and image probably image let's run my query let's put it here we'll see that vadim has some fleets and it has only one fleet of type text with a text hello there from aws amplify that means that we added correctly the relationship between user and fleets we can add more and to be able to see this is my second pleat let's run my mutation and we can also uh i don't know uh image image and image image i'll try to find it somewhere avatars images let's copy and let's paste the image here save let's run the notation text is null because we don't have any text there if we run my query we will see here a couple of leads uh i don't see the the last one oh no it's here what happened there yeah it's image and it has the image there yeah we added uh manually some data through aws console now let's go ahead and fetch this data in our application in order to display it and not to display the dummy data that we have so first of all we will need to go let's close everything and we will first have the components which is the user fleet list indexed and here we are getting these fleets from our dummy data so here we will need to fetch them from aws backend to do that let's import api and graph ql graphql graphql operation from aws amplify when we need to import a query and the query you will find in source graphql queries and these are queries that amplify automatically generates to make your life a bit easier however you can define these queries yourself for example if in one page you don't need for fleets you don't need the user you will just delete them and query only the things that you need so yeah i suggest querying only the things that you need but when you are lazy where when you are during a live stream i will use this queries and i will need list users list users and i want to make sure that please okay they don't query the fleets that's why i will take it out like this and i will do what i suggested you to do i will take this query outside and edit it myself but don't try not to edit it inside this file because this file as you s as you saw is getting overwritten by a double simplify push whenever we do that it's overriding this so you will lose all the changes and you'll have errors so i copied this list users query and i'm going to go in user fleet list i'm going to create a new file named queries.ts and everything that is here is not overwritten and we will have access so for the list users we will we don't need tweets that's what i was saying like in order to display the fleets we don't need to query the tweets uh we don't need to query created and updated it of a user we need only id username name we don't need by mail we don't need the mail image and yeah fleets but for fleets we need to specify uh information about the fleet that we want to get and that one we will find somewhere here fleet let's go and that's id user i'll copy everything from here but i will delete the user because we already have a data about the user user we don't need the user where does the user end i think it's here right yep yeah i hope that's that's how we should do it so in our index let's import this uh query import uh how is it called list users from queries okay so so yeah the users with leads we will save them into a state variable because we initially there will be no users with leads then we will have to query then we will have to save them somewhere so we will need state variable set users users is equal to use state initially it will be an empty array so these users will be used in our flat list can't find variable use state because we didn't import it import let's go okay so now you see there are no user stories there um so whenever we mount this component and that's we need to fetch the data so we will put this fetching the data inside a use effect so let's declare it const patch data a sync because it's a synchronous and let's call fetch data now here put everything into a cache because there might be some network issues so whenever you have an error your application will not crash because that's not something that depends on you as a programmer it's something that the user might not have internet or no no permissions or something like that so that's why whenever we do network calls it's better to put it into a try catch const data is equal to a weight await api dot graphql and inside that we put graphql graphql operation and which operation the list users that we just imported list users and let's set users to data dot i think data.data.getlistusers or no data. let's just console.log i wanted to do it without console.logging because i thought that i remember the structure of the data but now you should always come so long to see the structure of data let's save and let's see in our here data dot list users dot items you see yeah data.list user.itemsdata dot data.data dot list users dot items and yeah we put that into a set users save all right so at top we see only one user and that's because we have only one user in our database with his um fleets so if we will press uh it will crash because we have different ids we didn't implement yet in that fleet screen fetching from the database so let's do that right now let's delete the dummy data from here because we are done and we implemented fetching dynamically from the database all the information hey thank you for uh donation uh let me try to pronounce your name pushkar thank you very much let me know if i said that correctly i really appreciate that so let's go yeah i'm feeling tired but i think it's worth it right guys what do you think so uh yeah we need to implement the same fetching in our uh fleet screen where is it screens split screen index i think this could be simplified a lot but okay so uh what we did here we have our users and initially they are initially away so here we will have probably a null because in the beginning we don't have any any users yet so we'll need to wait until uh the users are fetched and then we'll set the user so the same things go here the fleet will be null initially okay so let's import the graphql api here and for the fleet screen yeah i would actually copy and paste that query here and you will adjust it as you need here because for example i don't know maybe in this place you need more information or you need less information because oh yeah for example in user fleet list you don't actually need the information about the the fleets you need information only about the users and yeah that's something that you can play around with and optimize okay we have our users so let's declare our use effect with the fetching of a data yeah it's similar we just copy and put them here to fetch all the data set users and whenever we set users whenever the users are changed we will change also the current selected user so let's do user or use effect and this use effect will depend on the users so let's check if user says null if user says null or users the users that length is equal to zero then we will return we don't want to do anything because there are no users however if there are users we need to why did i uh delete that line from here because i need that one we need to set user users dot users dot find u u dot id equal equal equal to uh user id right but this argument of type 95 is not sent to parameter it's a state action action yeah or here or null yeah if it didn't find any user all right and then we also need to to set the fleet okay let's better and whenever the user changes no no no no here we just see set lead index to zero initially it will be -1 let's hope that it will work i'm not sure let's open and null is not an object fleet dot image but yeah but where is it located user fleet we should say if if there is no fleet then we will return i don't know like a loading indicator uh activity indicator i think tv indicator because initially there is no fleet and we need to show like a loading screen or something oh you saw loading so let's open uh null is not an object if complete is but where i need i need answers i need exactly where oh i'm up console logging too much there let's go okay lead view split screen index 90 90 is here lead view if fleet is equal to null null is not complete screen at 122 fleet click screen add scene view what man where is it let me try to comment out some of the use effects because this one is getting a bit complicated so this use effect for example let's try to commit it out and see what's happening yeah nothing is happening here complete index all right and yeah there are somewhere here so i think it's because there is no user if there is no user then let's return yeah this is my first fleet hello there from aws amplify and this last one should be a image and it should hope yeah it was loading yep it's working and yeah and somehow it takes oh it takes it from we need to delete these users with lead because it's taking the next ones from there and only work with users uh users users users yeah does it work let's close let's open the first one this is my second fleet hello free from aws the image next nothing happens back hello there yep it works guys so yeah even we see that this one was posted 18 minutes ago previous one 20 minutes ago and the first one 19 minutes ago so that's how we actually take the fleets from aws and display them in our application what do you think about that guys are you still here how are you how are you doing so let's just get odd get commit fetch fleets from aws from um let's say backend api and get push i are still here guys how are you doing all right so i think i have three hours without any stops and without any breaks and yeah toilet breaks so let's drink some more water why not so yeah uh we added the fleet model uh to schema uh based on what we already have there we push the changes to the cloud we created with some fleets from aws console and we also fetch the fleece dynamically from the api so guys um yeah i think that we are coming closer to an end with this live stream and i would like to give you some uh suggestion uh where you can take this uh build and continue and what you can uh build extra to practice and to actually actually learn under grasped the concepts and to yeah practice make makes perfect so the first thing that uh i would do and here i think i will add because i didn't manage to do that uh create create fleet screen and this will be a screen it's going to be very similar to or should we do that i'm pretty tired but a screen that will be pretty similar to the create a tweet screen and here you'll be able to write something here you'll be able to pick an image you know what guys let's do it let's do it and let's do it pretty simple based on this screen because it's quite similar so uh i will sleep better and know that um that i explained everything from start to end um okay now let's go here it's probably going to take like around 10 to 15 minutes and we're gonna clean where we will upload fleets and that will support creating a text fleet and also creating a image fleet okay let's go to our screens new tweet screen we will copy paste it and we'll change it to new fleet screen uh let's change everywhere from tweet to fleet let's see the imports okay use navigation permission okay uuid okay instead of create tweet we will do a create fleet from mutations right uh has no exporting create fleet let's see how it's called source mutation create complete yeah there is one what's happening new fleet screen yeah now it sees so new fleet screen um text set text for the text of a fleet uh image url another state for vet we will also need it navigation uh some permission to uh access the camera roll uh we will grant the get these permissions whenever we mount the screen that's good uh we have a big image that will yeah pick the image from the gallery after that we upload the image to s3 so for more information about all the technical things that we did here please check out the previous live stream where we implemented this screen so you will understand better like how it uh how it works right now we will just adjust this to work with fleets as well so i'm not going to go into a lot of details so we here upload the image to the storage which is the s3 and we here have on post fleet let image if image await upload to ok try current user we get the current user new fleet the text will be text which we can skip image will be image and the type will be if image if image exists the the tweet will be a image else it will be a text user id current user and then we create fleet new delete navigation go back return on post on post fleet value text set set text pick a image you alright yup i think that's everything that we need so let's go into our navigation uh index and uh copy the new screen and the same way here complete new fleet and let's add that button to create a new fleet we need to add it we need to navigate here whenever we press on yeah let's go to our components into our complete view lead view user fleet list and in this flat list i think that we can uh do at least header component and here we will add just a touchable opacity render add button button const and here we will return touchable touchable opacity uh on press we will say we will need navigation to navigate to that screen import use na vi gation pro native and here const navigation is equal to use navigation we take it from there heavy gate so on press navigation navigate to the screen new fleet and here let's just display um i don't know an icon like a plus icon and that's it like as simple as that um i will copy paste some some i can or or no better let's let me think where do we have that i can sign kansai against bottom top navigator profile picture user image but where do we get the user all right we set it there profile picture user we take the user from the home navigator we need to put it in the state here and this is like the current authenticated user so to fetch the user we will use this use effect so let's try to save and yep it's there the styles are not the perfect one size not 40 but hello uh 70 uh was that 70 or more some let's add some styles here some padding then yeah let's go with that one and if we press on it we go to the new fleet screen and here we can say this is a fleet from the application let's tweet it probably instead of tweet we should say fleet it and if we close and open again the application not this one let's check if we actually twitter clone and let's press on this one this is my second fleet this is the fleet from the application yes guys we did it uh yeah now you have now you have everything to create to display the fleets from the application i would suggest you go and try to implement here the plus sign that you see in where uh not here yeah like here like a plus sign like a plus icon to to display that you want to add a other fleet layer and then you can also adjust the styles of the fleet screen to be something similar to what twitter is having but the functionality you have it everything is working you create a fleet uh you then are able to see that fleet in the screen so i think that's really cool and yeah um so uh for the improvements that i suggest you uh continue improving this project uh is let's say adding support for video fleets because that's really important and crucial for twitter but we didn't have time to implement that however it's not something very difficult if you want to to know more details about videos and how you can upload them you can check my previous tiktok clone where we work a lot with videos sorry we render we select when we film them from a camera we upload then you will do basically the same here catholic [Music] you meant catalina pit yeah he is here so um next one is keeping track of scene fleets so whenever you uh see a fleet you want um yeah not to display the same fleet to the same user next time and that's basically how twitter and instagram stories are working you always see the new tweets so for that you will need to probably store in the database a relationship between that fleets and user who seen that fleets or you can store that into your phone memory um depends on uh your choices the next one will be to sort the fleets in the preview to display and see if unseen fleets first that's what i was talking about uh because if you saw that all the users fleet you want to move that to the end then you will probably also want to integrate automating automated navigation automated navig navigation uh to the next pleat after i don't know like five seconds i didn't have time to implement that but that's really uh interesting feature and yeah go ahead and implement that and if you uh share that with me i'll it would be really interesting uh the next feature that you can implement is stopping a fleet progress when you tap on it and you tap and hold then the progress will not show uh and also you can implement animated transition between fleets so yeah this is like your homework uh if you want to trust play and improve forever if you are interested in um in these features and you want me to implement that let me know down below and i will try to to see uh maybe i will do them in future um and yeah worry if you want to see other projects that's also welcomed and uh yeah suggestions are welcome i am so tired to talk and yeah my brain just freezes so let's see uh vadim silver button soon yeah let's hope let's hope are you going to do that now no i'm not going to do that because this stream is already three and a half hours and yeah each stream is longer and longer and longer and they try to make with them as condensed as possible so because yeah i know that a lot of people um are struggling with attention span so it's better to keep them shorter but maybe in future if you guys are interested interested i can do them take a break uh buddy it's been very long yeah three and a half hours and i think that's the first stream when i don't take any breaks and not even toilet breaks yeah regarding react react native animation i didn't work a lot with animations in react native because i'm not a front-end developer uh yeah that's a bit of a surprise um you have a front end at my startup is uh is taken care by my team i'm mostly with the back and then all the architecture um that's why yeah but i know a lot of um i know a lot of guys are doing um [Music] only content about uh react native animations so you can um learn from them so i'll give them a bit of shout out and first one is uh william uh forgot yeah yeah william is doing a lot of react animation tutorials uh yeah also you can have a look at catalin uh he is also doing uh nice animations in react native and that's from top of my head maybe there are more um channels on youtube regarding greg native animations oh thank you very much carousel social network for the donation uh that's that's really appreciated 15 dollars like that's probably the highest donation so far thank you very much and i think it's worth that i stayed till the end three and a half hours you made my day so let's see whatever people are saying uh please make react native and use backhanders python junk of it gonna be amazing uh we'll see we'll see i'm trying to focus on specific projects on specific technologies at the moment uh and that's as you see react native and amplify and as far as i would like to to to go into other technologies that i'm using like i don't know like even like node.js and um yeah over attack like react.js i'm trying to hold and uh and be laser focused on these technologies until i see some traction and then i can branch out and do all our stuff but yeah in future i will definitely do different technologies because yeah i'm i'm actually using day by day a lot of technologies but yeah i'm not teaching here on youtube so i thought that yeah this this combination of react native and amplify is the best best way to to learn and to get started because you can actually build application that you can use and share with your friends and you can actually build something and publish and market and start earning money like in in a week if you have like an idea and you implement it of course it needs a lot of like you can build something that you can see you can you can show it to your mother in the evening and say like hey i built that so yeah that's that's the power of react native and and aws amplify i love them um i'm in my engineering college evan moss good job i have good hands on state and basic ui by struggling in animations yeah like follow what uh our resources our youtube channels are doing on animations uh i think that they are probably better because it's something interesting for me as well i'm not sure if i have that patience for design and like that find i like to to move and to see progress faster and more with more like data and back and stuff but i'll try um can you also make an app with payment integration that's a very nice idea we might do that so let's we are now in the question and answers so i will stay probably a couple of minutes and uh to answer your questions guys following william and catelyn along with you good job you are lagging yeah i see that my network is not the best so sorry for that guys is that amazon amplify free so let's put it that way uh to start they offer you a free tier so everything that i was doing so far i have built already four or five projects on amplify for live streams and i haven't been charged anything but if you of course publish this application you start getting like millions of uh users to that application you'll of course get charged so for more information you can find all the pricing of that but you are safe if you are using it just for learning and testing because you have a free tier your god of react native thank you very much thanks a lot uh yeah always learning i wouldn't think that i am a god but yeah learning and getting there uh i'm going to start your tic toc clone form tomorrow thank you very much and i hope you enjoy it and um get good results because uh i don't know if you were here before but uh one of my subscribers said that he landed a project of almost one thousand dollars because of uh my uh spotify clonid if i'm not mistaken so he put that into his portfolio and one of his like one client was impressed by that and yeah he landed that client and signed the contract so that can help are you interested in coding in tech like uh ocr phase detection and other similar stuff uh i i worked uh when i was working in one company i work with more like graphical visual ocr i don't know like face detections smile detections we were doing like interesting installations like interactive installation for example you're coming to a stand and the more you smile the more points you get and that uh yeah some gamifications like this kind of gamifications but at the moment in time i'm not doing a lot of that can you show how to publish replication uh to the respective stores please um i should do that yeah definitely uh i should do that because that's a very important part of uh of building application is just to yeah put them out there because you don't have to to wait like two years and until you get a perfect application it's better to make something that works but it's not perfect publish it and you'll receive feedback from your users and then you'll be able to improve on that so i will have to to do the deploying video so yeah like a couple of more questions guys and i should go because i hear all my family in my house like laughing and i don't want to miss out on that because they are at the dinner do you have resources you can share for people getting started with react native resources to share um probably i should be more prepared for this question uh in order to give you an informed uh answer because um it was a long time when i started learning react native and i don't remember what i was using back then because right now i mostly use the react native official documentation for everything that i need and um but yeah for beginner friendly uh yeah i will i will uh do that you you can ask me on discord and i'll do some research for you uh what is the best used backend as not just django.net like backend api or amazon amplify well yeah it it depends on a lot of things and um for example if we're speaking about like uh and node.js a back-end versus an amazon amplify with node.js you have more control but at the same time you have when you have more control you have to work more so for example in aws amplify the thing that i wrote manually for my api was let's see where is it amplify back-end api schema how many 38 lines of code 38 lines of code for my api guys at my startup i have i don't know hundreds hundreds and thousands of lines of code that i had to write however if we look here at the schema this is just the schema guys and the schema has let me try to scroll the schema has 400 lines almost 400 lines and that's everything that amplified generated automatically for me and this is only the schema it's nothing about resolvers or how we handle like uh the data and all the all the logic behind it so on one hand you'll get very easy uh you get started very easy and i would recommend this for any any project that you are testing for example you have an idea and before going all in and spending like one year building that idea with a perfect node.js server uh scalable and the perfect architecture and the most optimal and then after one year you publish that application and you find out that nobody wants it that would be painful on the other hand you go with a simple solution like with amplify you code something yeah very functional very secure also very scalable probably less you have less um control over it in in in some way because yeah you might get some roadblocks that you cannot accomplish here but you have more freedom to and flexibility to accomplish with a node.js however in like two weeks you can have the application up and running and you can test it with your users and if it works you either improve on it or you like i don't know hire developers and uh and accomplish what you set in your mind okay guys so yeah a lot of questions guys thank you very much you don't want me to to go eat with my family right right can you show uh okay where i was your channel need more subscriptions you're doing amazing job thank you very much but yeah it's step by step and if the quality is actually good i think with time everything will will happen uh have you ever built an app with multiplayer matchmaking algorithm multiplayer matchmaking matchmaking multiplayer my brain doesn't work right now probably not or i don't understand uh exactly what you mean if you can explain maybe maybe i build something i'm struggling in making model like instagram got one of the library but has lots of bugs can you do that model like an model like instagram what instagram is using models for [Music] guys i would suggest let's let's follow up all these questions on the discord and if you didn't join the discord please consider doing that now and let's let's follow the discussion there and i will go um i'll go right now with my family in it so guys uh thank you very much for joining and for staying till the end and thank you for your interest in everything that i'm doing i really have a lot of fun in doing this and um more fun when i see that people are appreciating my work and uh when you find value out of it and you actually actually do this you learn you learn new technologies you land new clients uh yes today one of a subscriber landed um a client of almost one thousand dollars so that's that's really insane and that really makes uh makes me going so uh thank you very much don't forget to subscribe to the channel leave a like if you enjoyed this video let me know down below what uh what i should do in the next week live stream because we are doing this live stream every week on fridays uh would you like me to continue with twitter fleets would you like me to continue our clones that i already built or you want a completely new project uh but they will start from um from the beginning i always like starting new projects uh so yeah maybe we will start something interesting uh next week we'll see but today yeah thank you very much uh the link of the discord and all the link are they are in the descriptions the link of the repository you can find also in the description

Channel: notJust․dev

Views: 54,734

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, typescript, react tutorial, build a tiktok clone, tiktok clone react native, tiktok clone tutorial, aws amplify, react native, react native tutorial, javascript tutorial, programming, tiktok clone, react native clone, react native app, react native for beginners

Id: a3DVa_ErUp0

Length: 223min 9sec (13389 seconds)

Published: Fri Nov 27 2020