🔴 Let's build a Simple Threads App with REACT NATIVE using MongoDB

hey everyone welcome back to another project in react native so in this project we'll be building a simple threads app and react native using the Expo framework and we'll be making use of mongodb as a backend and if you find this interesting please smash the like button and also subscribe for more such content so let's get started so firstly let's look into the demo part of the application so over here towards my right we have the first screen being shown where we have different kinds of user posts over here so for each post we can pretty much you know like the post dislike the post and even add a comment to that particular post just like this okay and coming to the next screen that is a thread screen over here we can you know pretty much share our post to the home screen so after that we have the activity screen where we can you know see the different kinds of users in this app so we can uh follow user and unfollow a user as well and coming to the profile screen We have basically the information regarding the user that is the bio of the user and the number of follow So currently you're seeing one followers because we are using you know a proper email authentication so so I'm using my uh two emails that I have so for that reason you're seeing one followers over here so we're going to keep the app as simple as possible and we'll be doing all the different kinds of implementations required so if fancy testing please smash the like button and let's get started with the project right away so now the first step is to create a Expo manage project so let's go do that so firstly inside my terminal I'm going to go into my build folder and over here I'm gonna write Expo in it the project name so in my case I'm going to see threads app and then I'm going to press on enter so this would ask us to choose a template so I'm going to choose the first one that I selected as default the blank template and then press on enter so this should you know install all the JavaScript dependencies and then create as a project structure that is with the folder name as threads app and then we're going to go into that particular folder so let's wait for some time okay so as you can see our project is ready so the next step is we're going to go into that particular folder and look into the folder structure all right so I'm going to say file open folder firstly go into my build folder over here and then the first one all right so this is basically the project structure experts given us when we initialize Expo manage project okay so this is the main app.js so basically we are they're returning a view which contains a text which says open a pad open up app.js to start working on your app all right so this is the starting point of our application so now the first step is we're going to run the app so to do that I'm going to open up a new terminal over here and we are correctly into the threads app folder so here I'm going to say Expo start so this should give us some options to open the app so we have uh Android iOS simulator and open the app on the web so in my case I'm going to use iOS simulator so I'm going to press on I so for Android use uh so for Android users you need to press on a all right so here I'm going to press in I so this should take a couple of minutes to install the app on the simulator and we should just be seeing this text when the app opens up because that's what is there in the main app.js so let's give it some time so as you can see the app has been open and we are able to see the text at the center part of the screen all right so it is currently at the center part because of the default styling that they've given that is because of align items of Center and justify content of Center so now the next step is we're going to create some folder structure over here that is one for the screens and the components so here I'm going to say screens and one more folder is for our components all right so now the next step is we're going to initial initialize a new project in the back end all right so let's head over to Chrome over here and search for mongodb.com so here we're going to initialize a new project that is threads app and then we're going to connect it to the front end part so let's press sign in okay so now the next step is we're going to press on new project over here and here you're gonna give the project name let's say threads app okay so let's give threads project and let's press on next okay so for this project I am the current owner as you can see so after this let's press on create project all right so now let's press in create and make sure you use the free version that is m0 and for the other details I'm going to leave it as default and I'm going to press and create so after this the next step is to choose the username for this so here I'm going to keep this as a username and for the password I'm gonna keep my name my name itself and then I'm going to press in create user so the next step is IP address so since this is a tutorial I'm just gonna pass in this IP address so so it's accessible from anywhere right so I'm gonna press on ADD entry and then I'm gonna say finish and close okay so press and go to overview all right so enough it's going to take in a couple of minutes to you know initialize our backend so while this happens we're gonna come into the code over here create a new folder for the API so I'm going to say API over here so now we're going to go we're gonna go into the new terminal and firstly go into the API folder so the first step here is to create our package.json so to do that I'm going to press in npm init so this would ask us a couple of questions so packaging is going to be API version is going to be this one so description you can give it anything and for the other ones I'm just gonna press on enter is this okay yes so as you can see inside the API folder our package.json is being created so now the next step is we're going to add some dependencies into the package.json so let's go to that so with the help of yarn I'm gonna add some dependencies like body parts are we need Express we need course we need access to Json web token you also need access to mongoose we need a node mailer and we need node mon okay so these are some of the dependencies that we need for this project so let's press and enter so all of the dependencies should be installed into our package.json so as you can see all of them have been installed so now the next step is I'm going to create my main index.js file where all the backend code goes into so here I'm going to say index dot Js okay so the first step over here is to you know import the required things so let's start doing that so I'm going to say const Express equals to require Express const body pasta equals to require body passer const mongoose equals to require one goes and then const ant crypto equals to require crypto we need access to node mailer as well so const node mailer equals to require node mailer so now I'm going to create an instance of an app so I'm going to say const app equals to your initialize Express and I'm going to choose a specific port so I'm going to choose 3000 and I'm going to initialize my course equals to the required course and here I'm gonna say app.use of the course okay so here I'm going to write summer middle west now so I'm going to say add reduce uh basically the body parser dot URL encoded and I'm going to pass in extended as fonts and after that I'm gonna say I have to use bodypasser.json and I'm going to initialize my GWT over here so con zwd equals to require off the Json token all right so now the next step is we're going to go into the mongodb and get the connecting URL so here let's press on connect so we're going to choose the third option that is mongodb for vs code so copy this piece of URL and with the help of connect method we're going to use this right so here I'm going to say Mongoose dot connect just copy this I mean just paste this URL over here and make the changes so for instead of the password you need to give the password you had given previously right so that that is my name itself and for this I'm going to provide some options that is use new URL parsa I'm going to set it to be true and after that I'm gonna say use a unified topology I'm going to set it to be true all right so after connecting I'm going to apply the then method it's going to take in a function so in this case I'm just gonna you know console.log or message so I'm going to say connect it to mongodb and if at all there is any error in connecting I'm gonna catch that error over here so I'm going to say catch of error so here I'm going to say console.log error connecting to mongodb just like this I'll write so now the next step is of course you are to use the app dot lesson method so here I'm going to say app dot lesson this is going to take in the port that you've already initialized so just pass in the port and over here taken a function and in this case I'm just going to say console.log or server is running on Port 3000 all right so that's it so the next step is we're going to initialize we're going to initialize the starting point in our script that is basically we're going to initialize this the start script in the package.json over here so here I'm going to say start so it's of course gonna be node mon index dot Js all right so now let's come to the terminal and to start the app I'm going to press in yarn start so if at all everything is accurate we should be seeing connected to mongodb and servers running on Port 3000 so let's do yarn start then press on enter so as you can see Server is running on Port 3000 and connected to mongodb so we have successfully connected this app to the mongodb backend so the first step is successfully completed so the next step is firstly we're going to initialize react navigation and then we're gonna you know design two screens that is the login screen as well as the register screen so that we can switch between both the screens so firstly let's initialize react navigation so let's head over to Chrome first and then search for react navigation dot org let's press and redox and over here firstly we're going to install react navigation slash native so copy that piece of code and we're gonna paste it into the new terminal and make sure you install this into the threads app and not into the API folder right so after that we need access to these two things so copy that piece of code and we're gonna paste it right here all right and next is come to come to hello react navigation and then install the react navigation slash native stack so paste that code over here and after that we need access to the bottom tabs right so search for react native bottom Tabs go to the first link and then we're gonna install this one uh this one also so paste it over here all right so we have installed all the dependencies required for react navigation so the next step is I'm just going to create a stat navigate a file over here so here I'm going to say stack Navigator dot Js okay foreign so let's copy this piece of code that is a navigation container and paste it over here import navigation container from react navigation slash native all right so we have initialized the first screen that is stack dot screen so firstly let's create two screens inside of a screens folder one is the login screen login screen.js rnfe s to get the shot on snippet and then the register screen dot Js rnfe has to get the shot on Snapchat save the file and save the file so here we are going to initialize the first screen so instead of component home screen it's going to be login screen and the name is gonna be login so similarly for the next one I'm gonna say stack dot screen name is gonna be in this case register and the component is going to be register screen so make sure you import register screen from the screens folder just like this and save the file so now let's go into the app.js and I think I forgot one more thing you need to import I mean you need to initialize this and import the create native stack Navigator so just copy that over here and import this one save the file so now the next step is we're gonna include the stack Navigator into the main app.js so here I'm going to say stack Navigator so save the file so hopefully we should be seeing the login screen as the first one all right so let's refresh the app once hopefully this should work out so as you can see we are able to see the first screen that is a login screen right because that's the first screen which we have given in the stack Navigator okay so we do not want the header to be seen in both login screen as well as a register screen so for that purpose I'm going to say options head of shown I'm gonna say false so the same thing I'm going to do that over here also so as you can see the header is gone so now the next step is we're going to start designing the login screen so firstly over here I'm going to initialize my safe area View so let's copy I mean let's yeah let's copy this video View and use it instead of the normal View so the first step is I'm going to give some styling to the save data view so I'm going to say Style so it's going to have a flex of one and a background color of white and it's going to have align items of Center so I think we can remove this piece of text that's not required so the first thing inside the login screen is the image logo that's going to come up so for that I'm going to initialize my view over here okay so I'm just going to get the code for the image okay guys so this paste is the code for the image I'll write and for the view I'm gonna give it a bit of margin top let's say 50. and this is the styling for the image that is with the 150 height of 100 and a resize mode of contain I'll be sending the source Link in the description you can just copy that out so the next step is import image from react native and save the file as you can see that's looking better so now after this view I'm going to initialize my keyboard avoiding view import that from react native and here I'm going to initialize my view which is going to contain the text I'll write which says our login to your account so this text is going to have a particular styling so I'm gonna say Style it's going to have a font size of 17. it's going to have a font weight of bold and it's going to have a slight margin top let's say 20. and let's save the file as you can see that's looking better so now we're going to give the style for The View so it's going to have align items of Center and the justify content of Center okay so let's increase the margin top to be 25 okay so now after this we're gonna start initializing our input Fields so initialize one more View give it some margin top to this so I'm going to say margin top of 40. and over here I'm going to initialize my first View for the input field so over here inside this view it's gonna it's gonna contain the icon and it's going to contain the text input so the first step is to get the icon so the first one is going to be the email and second one is going to be the lock icon so let's search for export.icon.fyi the first link let's search for email and let's use this one so firstly import the icon family and we're gonna paste it over here and copy this piece of code we are going to use it right here all right after that I'm going to initialize my text input import that from react native it's going to have a placeholder which says enter your email and firstly let's save the file so now I'm going to give the styling for the outermost view that is this one so firstly I'm going to give it a flex direction of rho align items of Center and I'm going to give it a gap of 5. it's going to have a border color of this color code and it's going to have a border width of one it's gonna have some padding vertical of five and a slight border radius of 5. save the file as you can see that's looking good so now I'm going to give this styling for the text input so I'm going to say style over here so firstly it's going to have a color of Gray and it's going to have a margin vertical of 10. and it's going to have a specific width of 300. okay that's looking good so now for the icon I'm going to give some margin left since it's almost touching the left part of the container so margin left of 8 and save the file so this is going to have a color of gray instead of black yep that's looking good so for the place of farming for the texture input I'm gonna say placeholder text color it's gonna be Gray yeah that's looking nice so the next step is we're just going to copy this one more time and then make the changes so just copy this out okay let's uh copy the entire View this one also so it's going to have a margin top of 30. okay yeah so now let's make the changes so over here instead of enter email it's gonna be enter your password and apart from this we're gonna change the icon so it's gonna be the lock icon so we're going to use it from let's say and design so firstly you know copy the icon family import it over here and copy that into component code and we're gonna paste it instead of the material icon and it's going to have again the margin left of 8. and the color also is gonna be Gray as you can see that's looking good so now after this we're gonna have one more piece of view it's gonna have a different styling that this is going to have two texts okay so firstly format once and over here I'm gonna say View it's going to have two texts so the first one is gonna say uh keep me logged in and the second piece of text is gonna say uh forgot password something like this so let's save the file let's give this style into the view it's gonna have basically a flex direction of row align item Sub Center and justify content of space between and it's going to have a margin top as well so margin top of 20 or let's keep it to be 12. yep that's looking good so now we're going to give the style for the forgot password so it's going to have a font way to 500 and it's going to have a color of this color code that is 0 0 7 FFF okay that's looking nice so now we're gonna you know initialize the state so that we can store whatever the user is typing in both the fields that is email and the password so let's initialize to two states one is for the email so I'm gonna say cons email to my set email equals to use state initially empty string I'm going to say const password comma set password equals reuse State again an empty string make sure you import you straight from react like this let's come to the first text input and provide the value so in this case it's going to be whatever stored inside of the state that is email after this we have the on change text which is going to take in the text and we're going to set it we're going to say set the email to be whatever the text is that is whatever the user is typing so let's come to the second text input and here I'm going to say value of course it's going to be the password so let's say password and it's going to have the on change text again so on change text it's gonna take in the text and here I'm gonna say set the password to be whatever that particular text is so one more change we need to make in the styling all right so let's do that for the text input so that is over here so if at all we have the password then we're gonna you know change the length so to do that firstly I'm going to say font size if at all we have the password I want it to be 16 else also I want it to be 16. okay so the same thing I'm going to do that for the email field as well so instead of password it's gonna be email okay that's looking good so now the next step is we're going to initialize the buttons I guess that is for the logging in and if at all the user doesn't have an account to register right so that's going to happen over here I guess after The View so this is going to have a self enclosing view with a particular style let's say a margin top of 50 or 45 you're going to initialize the priceable first import possible from react native it's going to contain a text which says login so let's give the styling for the how to most pressable so I'm going to say Style it's going to have a width of 200 and it's going to have a background color of black and it's going to have basically some internal spacing padding of 15 and it's going to have a margin top of 40. it's going to have a margin left of Auto and margin right of Auto so it comes to the center most part of the screen and it's gonna have a slight border radius so border radius of 6. so format once and save the file as you can see that's looking good so now for the text we're gonna make it white color so here I'm gonna say Style so I'm going to say text align of Center okay and the font weight of bold and let's give it a font size of 16. okay color to fight we forgot that yep that's looking nice so enough after this principle we're gonna have one rupee suppressable so that we can navigate to the next screen so here it's going to say text or don't have an account and then sign up okay so for the principle let's give some styling so I'm going to give it a margin top of 10 and for the text here I'm going to say Style firstly tax align of Center so it comes to the center part of the screen and font size is going to be 16. all right I think that's looking good so now we're going to initialize our navigation and if at all I press on that I need to be navigated to the next screen so I'm going to say cons navigation equals to use navigation save the file so now let's initialize on press event on this principle so I'm going to say on press taken a function so here I'm going to say navigation dot navigate to the name of the screen we want to navigate to that is going to be register so let's press on this one so as you can see we are coming correctly to the register screen so now the next step is to design the register screen so just copy out everything that is there inside the login screen and then we're going to make the changes it's going to be super similar so copy this piece of code and paste it over here so firstly let's start importing the required things that is safe area View pressable and then we need access to the image we need access to text input we need access to keyboard avoiding View and here we need access to I think use State I guess so use state also we need access to the icons so let's copy all the three and paste it over here let's also copy the initial things that is the state and navigation all right and apart from that let's see keyboard awarding view is imported image is not important I guess so image so let's format once so I think that's it so let's save the file once image has already been declared okay let's remove that okay so yeah now it's working correctly so now what we're going to do is we're going to start making the change so instead of login it's going to say register all right and after that over here the first thing is going to be the name field and after that it's going to be the email field and then after that it's going to be the password field so firstly what I'm going to do is I'm just going to copy the first View uh or just a minute uh we can copy let's say this one and we're gonna paste it after this view this is going to be the first one so angel of enter your password is going to be enter your name okay and now let's make the changes so instead of the lock icon we're going to make use of the person icon so import the icon family over here and copy that into component code and we're gonna paste it over here interrupt the undesign icon so firstly let's you know copy the margin left styling give it over here and it's going to have a collective Gray all right I think that's looking better so now the next step is I think there is a a bit more spacing over here compared to this one so let's keep this to be 30. yep now it's looking good all right so now what we're gonna do is we're going to remove this P this piece of styling that's not required over here so you can just remove that view I mean just this one and instead of login it's gonna be register and now I'm going to initialize my third state that is for the name so I'm going to say const name comma set name equals to use state of an empty string so now for the text input instead of the password it's gonna be name and over here it's going to be set name and for the password field I guess we forgot to give secure text entry equals to true so let's do that this one secure text entry equals to 2. so the same thing should happen inside of the login screen as well there it is over here yep that's looking good so here are here the final thing over here is make the changes for this one so we are gonna say already have an account then and then sign in so instead of navigation.navigate we're going to say navigation dot go back save the file so I think that's it so let's one sec if at all all the states have been you know uh written properly so for the first one it's going to be name and on change success set name and second one is going to be email okay so email and then set email that's correct and the third one is going to be password and set password I'll try it yep so let's press on this one so as you can see we are able to switch between login screen as well as the register screen so the design has been completed so the next step is we're going to initialize our models inside of our index.js file and after that we're going to write some endpoints that we can register as well as login so firstly I'm gonna you know create a new folder inside my API folder that is gonna be models okay and the first thing we're going to initialize is the user model so I'm going to say user.js so here let's start defining our user model so firstly to do that I'm going to initialize my mongoose so I'm going to say const Mongoose equals to require mongoose and over here let's start defining our user schema so I'm going to say const user schema equals to new Mongoose dot schema all right so here firstly we're gonna write the first one that's going to be the name so this is going to have a type of string right and we're gonna see unique this is going to be true and required is going to be true so this is the first one after name we have email so the name is coming the type is going to be string required is going to be true and unique also is going to be true and after email we have of course the password so password type is going to be string required is going to be true all right so after password We have basically the profile picture so type is string and required we're not going to pass that okay so we're just going to pass the type and apart from that we're going to say joined date so we're going to say type is going to be of date and default is going to be date dot now all right so the next thing is uh send follow request so in this sum might not be of use but still we are writing it so we look into which is uh useful for us and which is not useful right so here I'm going to say type it's gonna be a mongoose dot schema dot types dot object ID and the reference is going to be of type user so reference of type user and after this we have received follow requests so so this is going to be the similar one and again it's going to have a reference of user apart from that we have the followers this also is going to be in in the form of an array so we're going to say type Mongoose dot schema schema typescript object ID reference is going to be user and after followers we have verified so initially it's going to be a type of Boolean and default is going to be false when the user verifies verifies that email we're gonna make this to be true and we have one more thing that is the verification token so I'm going to say verification token it's going to be of type string okay that's it so yeah we can save the file and now we need to export the required thing so here I'm going to say const user equals to Mongoose dot model you're going to say user model and we're going to pass in the user scheme address and here I'm going to say module.exports equals to the user yep so we have defined a first one that is the user model so the next thing we'll be looking into is the post model so let's define that also create a new file that is post dot Js all right so firstly as usual import mongoose equals to require Mongoose and I'm going to say const post schema equals to new Mongoose dot schema and here firstly we're gonna write content that is a text content of course it's going to be type of string right so type is going to be string for the content and after content we have the user who has written the post or was posted the post so type is gonna be Mongoose Dot schema.types dot object ID and the reference is going to be of type user we're gonna say required as true required us to okay so after the user we have the likes so for a particular post it can have n number of likes so we're gonna make it in the form of an array so I'm going to say likes so type is one of the Mongoose dot schematur types dot object ID and reference is going to be of a user all right so now after the likes we have the replies to a post so I'm going to say replace so of course a post can have n number of replies so again it's going to be a form of an array so let's write that so here I'm going to say so in the replies so we're gonna have basically an array of object that is uh the replies done by which particular person and what exactly is that reply right so firstly it's going to be a type of user so I'm going to say type among who's dot schema or type.objectid reference is going to be user all right so for a reply we we need to you know know which person did the reply and we need to know what did the uh what the reply was so for that we need the content right so here I'm going to say type it's going to be string and required is going to be true and after the content we need at what time it was created at so I'm going to say created at so this is going to be a type of date and default is going to be data now all right I think these are the things required for our post model so format ones so basically we need access to the content the user who has posted it the likes of that particular post the reply to that particular post and the created at that particular reply and apart from that we need also access to the created ad of that particular post so type is going to be date and default is going to be day dot now all right so after this we're going to export the required values over here so const post equals to Mongoose dot model of post I'm gonna pass in basically the post came out to this and here I'm going to say module.export module I mean module.exports come on equals to post yep that's it so post schema okay yeah now it's looking correct yeah so we have defined both our models that is the user model as well as the post model so now the next step is firstly let's import the required values that is we're going to say firstly cons to user equals to require go into the models and access the user let's access the post so const equals to require firstly go into the models and access the post okay so now the next step is we're going to write some endpoints one is to register and the other one is to login all right so here I'm going to say end point to register a user in the back end so here firstly I'm going to say app.post and it's going to be forward slash register and it's going to be a async method and it's going to take in the request and the response so firstly over here we're going to initialize our try catch block so firstly let's define the cache block with the error so I'm going to say console.log error registering user with that particular error and we're gonna say result dot status of 500 dot Json message is going to be error registering user something like this okay so now inside the try block firstly we need access to three things to register as you can see over here the name the email and the password right so let's get that so here I'm going to say const name email and the password equals to the requested body so firstly we're going to check if at all the email exits in the back end so to do that I'm going to say const existing user equals to the weight user dot find find one with the help of the email so if at all we get any existing user we're gonna pass in the result so to do that I'm going to say return result dot status of 400 dot Json with a message saying email already exists or email already registered all right okay so now the next step is you're gonna say create a new user so I'm gonna write const new user equals to new user access the model and pass in the three things that is the email uh name email and password sorry name email and the password all right after that we're gonna say generate and store the verification token because we need to send this verification token to the uh to the registered user email so do that I'm going to say new user dot verification token so this needs to be the same spelling of this one okay so I'm going to say new user.verification token equals to access the crypto so I'm going to say crypto dot random bytes of 20.2 string of hex so this is going to give us a random string of 20 characters which will be useful first and after that I'm going to say save the user to the back end so to do that it's going to be a weight new user dot safe that's it right so after that I'm gonna say send the verification email to the user just like this and firstly let's define that function over here I'm going to say send verification email so it's going to take in two parameters that is the new user.email and it's going to take in the verification token that is stored over here okay so that's it so under the next step is we're going to send the result I'm going to say result dot status of 200 dot Json with the message being a registration successful please check your email for verification something like this okay and yep that's it so format once so now the next step is we're gonna you know initialize the send verification email Okay so not sure why it is giving that red mark over there okay let's start defining that over here so firstly I'm going to say const send verification email equals to async it's going to take in two things of course the email to which we have to send the verification email and the verification token so verification token okay yeah so let's see where we've gone wrong over here all right so let's remove the entire thing which is going to give a single message let's say registration successful all right so over here inside the function uh firstly we're gonna say create a our node mailer transport transporter so to do that firstly I'm going to say const transporter equals to node mailer dot create transport we have that method so I'm going to say create transport so this is going to take in basically the service so in my case I'm going to say Gmail all right and it's going to take in the off so the auth is an object it's going to take in the user who's sending the email and it's gonna contain the passcode as well so I'm going to say user I'm going to I'm going to write in my own email so this one and it's going to take in the passcode right so to access the passcode I've already showed you in the previous project so let's do that once more let's review to Chrome open up your Google account okay press on manage Google account you would come to this screen and over here search for app passwords the first one so I'm going to enter my password over here okay so as you can see now we need to select the app over here so I'm going to say other custom name it's going to be node Mila and after you press on generate you would get a 16 digit or yeah I guess 1600 digit character so just copy that out and then come back to the code and we're gonna paste it over here in the string right so let's do that okay so I've just copied down that particular characters and I've just pasted in in the password I mean in the passcode block so after that the next thing is we need to compose the email message so here I'm gonna say const mail options equals to basically I'm gonna say from you can give it anything let's say threats.com and we're gonna say 2 to that particular email and subject is gonna be our email verification and we're gonna pass in the text so basically initialize your back text I'm going to say please or click the following link to verify your email so that is going to be http in just a minute http localhost forward slash I mean localhost 3000 forward slash verify and forward slash whatever that verification token is that is going to come from the parameter that's it so the next step is we're going to send the email so to do that firstly initialize try and the catch block over here so here I'm going to say console.log of error error sending mail with that particular error and inside the drive block we're gonna say await transporter a transporter dot we have the send mail method and it's going to take in of course the mail options so just write mail options over here so that's it so that's pretty much the code for sending a verification email to that particular user so now the next step is we need to Define this end point that is if the user presses on the link we need to verify the user so let's do that over here I'm gonna say app.get so it's going to be forward slash verify and forward slash token so it's going to be a async method which is going to take in of course the request and the response I'll write and over here firstly we're going to define the try catch block so catch of error firstly I'm going to say console.log of error getting token something like this and we're going to send the result so result Dot status of 500 dot Json where's the message being email verification failed right that's it about the catch block so inside the try block firstly I need access to the Token so to do that I'm going to say cons token equals to requested params.token just like this and firstly I'm gonna find the user with this particular user ID I mean for I mean with this particular token so I'm going to say const user equals to await virtually access the user model dot with the help of find one method you're going to say verification token should be equal to this particular token that we get from the link correct so after doing this we're going to check if at all there is no user with that token we're gonna say return result Dot status of 404 dot Json with a message let's say invalid invalid token something like this all right so if at all there is user with that token I am going to say firstly we are going to mark that user as verified so I'm going to say user.verified so initially we had a Marg Woody file as false so if the user presses on that link it's going to become true so I'm going to use user.verified equals to true and user dot verification token is going to become undefined because we do not need that anymore right equals to undefined then we need to save that user so await user dot safe and we're going to send the result so result dot status of 200 dot Json with the message being her email verified successfully okay so that's it about the email verification process that is to verify that particular link which we have sent to that particular user so save the file so the next thing we'll be looking into is we're gonna pretty much you know initialize the login endpoint so I'm going to say app.post so it's going to be forward slash login it's going to be async method of course with the request and the response in the Callback let's initialize our try catch block so I'm going to say try and the catch of header so firstly here we're going to say result.status of 500.json with a message being our login field something like this and inside the try block firstly we need access to two things to login as you can see the email and the password so let's get that real quick so const email comma password equal to request dot body right so request dot body all right so now firstly we're going to check if at all the user exists right so const user equals to the weight per user dot find one with the help of email okay so if at all there is no user you're gonna send the result 404 dot Json with a message being invalid username or invalid user or ensure that you can say invalid email so if it all the user is present first we're going to check if it all the password is correct for that particular registered user so if the user.password that the user is entered by logging in is I mean first if you're going to check if it's not equal if it's not equal to the password that is stored in the back end then that means the password is wrong correct so I'm going to say result I mean a return result Dot status of 4.4 which a message being invalid password if at all the email is if at all the email is correct and the password is correct for that particular email we need to generate a token so I'm going to say cons token equals to JWT DOT sign all right it's going to be the user ID user ID so to access that it's going to be user dot underscore ID right and we're going to pass in the secret key over here so secret key we're gonna do that in just a bit to access the secret key and after that I'm gonna say return or we can just say result.status of 200 dot Json of that particular token okay so now I'm just going to get the code for the secret key okay so I've just pasted the code for the generation of secret key so firstly I have initialized a function that has generated secret key and or everything will be stored inside of this particular secret key and the same thing we're just using it over here so yep that's it so we have defined uh three endpoints one is register login and to verify as well so now the next step is we're going to go into the front end part and then we're going to initialize on on press function on the particular register button that is over here so here I'm going to say on press handle register all right so I'm just going to copy this function and Define it at the top over here so here I'm going to say const antial register equals to a arrow function so to register we need access to three things as we know that is a name email and the password right so here I'm going to say const user equals to the name is going to be name the email is going to be email and the password is going to be the password all right so after initializing this object I'm going to say axios first let's install axios so I'm going to say Yan alexios all right so after installing axios firstly here I'm going to say axios input axios from axios dot with the help of post method this is going to be the URL that is HTTP localhost 3000 forward slash register and it's going to take in the object that is the user itself and after this I'm going to apply the then method which is going to give us the response so you can consider log the response if you want so I'm going to say console.log of the response so here I'm going to say alert if at all there is no error I'm going to give a alert box alert dot alert uh here I'm going to say registration successful you have mean registered successful okay something like this and after that I'm gonna make all of the fields again empty so I'm going to say set name to be empty and then set a email to be empty and set the password to be empty if at all there is any error while executing the registration process I'm going to catch that error so catch of error and firstly I'm gonna say alert dot alert okay registration field we're gonna give an error occurred during registration something like this and just show me whatever that error is so here I'm going to say console.log uh error and then that particular error so I think there is one more error over here let's look into that I think the bracket error yeah I think I forgot to put the arrow here I guess yep now it's looking good so format once and I think that's it save the file so now let's give this a try okay so I'm gonna enter all of the values over here firstly the name and email so after entering the email I'm going to enter my password over here and I'm going to press in register okay it says registration field error occur during registration so let's see why we've gone wrong so okay wrong spelling of console is it console okay console let's see over here if there is any errors yep there is an error okay wrong spelling of models Mongoose dot model I think it should be just model I guess so let's look into that firstly let's go over here so in the post it's going to be model yeah my bad so here it needs to be just model not models okay so I think that's what the error is let's give one more try so here I think everything is correct yeah let's give one more try so let's press on register so as you can see registration is successful so okay let's go check out our mongodb first over here so let's you know refresh the app once and we're going to go into the collections so let's press on browse collections so our first user should be added as you can see over here users so there you go the first user has been added right so currently verified as false we have the email password username and the original ID that is generated and this is the verification token and the joined date so now let's go check out my email if at all if at all I have received that particular verification email right so let's go over here press on my email so as you can see this is the email verification link so as soon as I press on this link uh this this endpoint should get triggered off that is verify one where is that yeah this one and we should you know make the use uh make the user as verified that is you have to mark it as verified and the verification token should become undefined so let's give this a try as you can see email verified successfully so now if I go over here and refresh So currently it is false now if I refresh it should have become true yep so as you can see this particular user is verified so I think that's looking better right so this part is done so if at all you're trying this on a phone okay I'll I'll just put up the steps that you need to follow in the description you can follow that if at all you get again the same error that is axios network error I think it's better to you know change the port over here as well and over here as well this one you can change the port here and you can change the port over here also that is in the front end part over here okay so the both should be same so yeah this part is done so the next thing we'll be looking into is the logging in right so let's go to login First and we're going to create a on press event on the login button that is over here so here I'm going to say on press let's say handle login something like this and we're going to Define this function right at the top over here so let's define const const handle login equals to Arrow function so to login we need access to two things as you can see that is the email and the password right so let's define that over here so I'm going to say const user equals to an object uh email is going to be email and the password is going to be password all right so now let's import axios from axios Okay so axios okay let's import it manually so here I'm going to say import axios from axios just like this and here I'm going to say axios dot post method and this is going to be my URL that is http uh forward slash localhost 3000 forward slash login this is the end point and over here we're gonna pass in the retails that is the user and after doing this I'm going to apply so this in turn is going to take in of course the response and over here I'm gonna say console.log of response okay and enough for we're gonna get the token from over here okay so we need to store that token inside of async storage so firstly let's install that package so here I'm gonna say async storage Expo the first link and install with the help of this piece of code so open up a new terminal inside a threads app paste it over here so after Consulting the response I'm gonna say firstly const token equals to response dot data dot token okay this is the correct value of the token and after doing this I'm going to say access the async storage that we just installed so it's going to be async story it start with the help of the set item method we're gonna store that particular token so this works in the form of key value path so for a particular key we're going to give the value so in this case I'm going to say auth token is going to be my key you can pretty much give any key you want so I'm going to say auth token and the key is going to be of course the token itself just like this and after doing this I'm going to say navigation dot navigate to the home screen So currently we do not have the home screen so we're gonna just Define a random screen in the stack Navigator firstly let's create a home screen so inside our screens folder here I'm going to say home screen dot JS rnfe es together short on snippet all right so save this file and now we're going to include this into the stack Navigator over here just here after the register screen so the name is going to be home over here and component is gonna be basically the home screen so just for testing purposes I'm just gonna initialize this after the login part has been finished we're gonna we're gonna initialize the bottom tab Navigator so here also header shown is going to be false so here I'm going to say navigation dot navigate to the home screen so yeah response spelling is wrong over here so let's look into that so here it needs to be response I'll write yep and if at all there is any error while logging in I just want to catch that error so I'm going to say catch of error I'll try it so here I'm going to say consult clock error and that particular error okay so format once and I think let's also give alert messages over here so alert dot alert we're gonna say login error and make sure you import alert from react native how to write so let's import it over here alert and yeah I think that's it about the login function so save the file yes I think we can give this a try so if at all everything works correctly we need to store the async I mean we need to show the token into async storage and then we need to navigate to the home screen so firstly let's write my email over here and let's write in the password and let's press in login so as you can see everything is working fine we are correctly coming into the login screen that means this also worked correctly that means we have stored the token inside of async storage all right so that's working absolutely fine so now the next step is we're gonna check if at all the user is logged in or not if at all the app is refreshed and again opened up right so to do that we're going to initialize our use effect over here okay so make sure you import use effect from a react that is over here so I'm going to say use effect and we're going to initialize a function inside reuse effect let's say const uh check login status right I'm going to say const check login status equals to async function okay so here I'm going to initialize my uh try in catch block firstly so here I'm going to say firstly console.law whatever that error is if at all there is any error okay so error let's write that correctly so inside the try block firstly we need access to the Token that is being set so to do that I'm going to say cons token equals to await so again async storage so now previously we had used the set item method so now to get the token we have the get item method all right get item we need to use the same key which we use to set it so the keywords auth token so I'm just going to write the same over here as well auth token so here I'm just gonna apply the condition saying if at all we have the token all right then uh I'm gonna say redirect to the main screen right so here I'm going to say set timeout of let's say 400 milliseconds that is 0.4 seconds and here I'm going to say navigation.navigate or navigation dot replace to the home screen but when we initialize the bottom tab we need to make the changes over here so it it it will be main over here instead of home right so after that else it's gonna be the login screen itself so save the file and we're going to call the function over here let's say check uh login status okay so save the file once and let's refresh the app and let's check it out so hopefully we should be seeing the login screen for a couple of seconds and then it needs to navigate us to the home screen so as you can see that's working fine right so the next step is we're gonna you know initialize the bottom tab Navigator over here and then we have different kinds of design that we saw in the initial part of the video and then we're going to design that so here I'm going to initialize my tab firstly so cons tab equals to create bottom tab Navigator so import that from react navigation slash bottom Taps okay so now I'm going to initialize my function over here so I'm going to say function bottom taps just like this a normal function so here I'm going to say return tab dot Navigator is the first one and here we are going to have the first screen that is the tab dot screen so the name is gonna be home for this component is going to be home screen home screen is already imported and we're going to provide of course the options for this so I'm going to say options firstly tab bar label it's going to be home okay so after this one we have tab bar label Style it's gonna have a color of black and we have header shown uh it's gonna be false all right and after that we have the tab bar icon I'm going to say tab bar icon so this is going to take in a prop that is if at all it is focused or not so if it is focused we're going to show a different icon else we're going to show again another different icon so here we're going to apply the condition saying if it is focused we have one icon else we have a different one all right so for for the focus it's going to be uh the home icon so let us search for this one over here home icon so it's going to be from n-typo so copy the icon family imported over here and again you know copy the render component code we're gonna paste it if it is focused if it is not focused again it's going to be the home icon that is outlined version of it let's say from and Design so copy the render component code and paste it over here I mean copied out I mean that was the import one right so yeah copy that into component code and paste it over here so this is the first one all right save the file so now I'm just going to copy this a couple of times three more times and then later make the changes so again we're gonna initialize some screens that we want right so this is going to be the thread screen dot Js and we have the activity screen dot Js rnfes save the file over here also rnfe s save the file and yeah so for the second one it's gonna be threads or just thread and the component is going to be threads screen so import that from the screens folder and over here icon is going to be create let's search for create okay iron icons has already been imported I guess uh no Pi it's not so firstly import it out and copy that into component code and if it is focused it's going to come over here all right I mean if it is not focused it's going to come over here if it is focused it's going to be the same icon okay but it's gonna have a different name that is create all right that's the second part now for the third one that is going to be the activity screen so then the name is gonna be activity and the component is gonna be activity screen import that from the screens folder just like this and after that or tab or label also should be changed so here is going to be activity and here we can give it any name let's give it create or thread all right so yeah we need to change the icon over here as well so it's going to be from and design right and it's going to have a heart so I'll just copy this out here it's going to be just hot all right so that's it so the final one is going to be the profile screen so let's create a new screen for that so here I'm going to say profiles clean dot Js rnfe yes to get the shutdown snippet save the file so enough instead of name a form that's gonna be profile and over here it's gonna be profile screen so import this from the screens folder all right let's import it manually so import profile screen from screens of our slash profile screen so yep that's done and yeah tab our label it's gonna be profile and the apps over here uh it it it's gonna have a person icon so let's search for that person so ion icons is imported so if it is focused it's going to be this one and if it's not focused it's going to be the outline version that is this one person outline so I'm going to paste it over here and now I'm going to make the change over here first is going to be login screen register screen and this is going to have a different name that is Main and the component is going to be this function that we just initialized that as bottom tabs all right so save the file so now we need to make the changes uh firstly with the login screen so here I'm gonna say navigation dot replace to the main tabs all right so as you can see now we are able to see the bottom tab Navigator seen correctly so this is the home create activity and the profile all right so now everything is working fine we have set up the bottom tab Navigator so nav I'm gonna create one more user uh in the back end so that we can you know connect both the users and then we will look into how we can implement the the follow and unfollow method so enough I'm going to create the user and then after that we're gonna initialize and design the activity screen so I have created a new user in the backend with my other email all right so now the next step is we're going to start designing the activity screen so let's go into the activity screen over here and firstly here I'm going to make use of the scroll View okay let's import it and we're going to make use of the normal View interrupt the normal view just use the scroll View and over here I'm going to give this style well let's say a margin top of 50. all right so inside the activity screen okay so this screen is going to contain all of the users okay so the first step is to show the the three different things that is basically requests and apart from requests we have people and then we have all right so let's look into the design of that firstly let's remove this text I'm going to initialize my view with the text which says activity so let's keep the styling for this it's going to have a font size of 18. and a font weight of bold so font weight of both all right so for this view I'm going to give some internal spacing that is a padding of 10. just like this and after that I'm going to initialize my second view over here so this is going to have basically a touchable opacity import that from the agnative so this touchable opacity is going to have a text which says people so I think it's not imported all right so you're going to give the style for the view over here so it's going to have basically a flex direction of row align items of Center and it's going to have basically a gap of 10 and a margin top of 12. all right so now we're going to give the style for this particular text or for the opacity I mean for the touchable opacity it's going to have an array of styles so I'm going to say style equals to an array of styles so the first one is going to have this style so Flex of one that's gonna have a padding vertical of 10. all right and after that we're going to give it some padding horizontal as well of 20. it's going to have a background color of white it's going to have a border color of this color code and it's gonna have about a radius of 6 and board of width of 0.7 all right so now we're going to initialize the state that is which button is exactly selected and which is not so here I'm going to say const selected button comma set selected button so pretty much we have three buttons equals to use date so initially I want the people button to be shown so I'm gonna pass in the default value that is people right so apart from that I'm going to say const content set content equals to use state so initially it's going to be all content or let's keep it as people content so I'm going to say people content all right so now uh we're gonna go back over here to the Style part and then we're gonna firstly apply the condition and check which is selected so if at all this is selected that is if this selected button equals equals to for people then I wanted to have a background color of black and it's gonna be another all right so now we're going to give the style for the text this also is going to have an array of styles so I'm going to say style equals to array of style so the first one is going to be the default one that's gonna get applied so text align of Center a font weight is bold all right so now apart from that we're gonna again apply the condition in check if at all the selected button equals equals to people so if this is true then that means the color should be white all right else it's gonna be black it's going to be black over here it's format one so this is the style okay so if it all selected button equals equal to people the color should be white and the background color should be black else it's going to be black as if so yeah save the file U state does not exist so let's import use state all right I think I have commented out the login screen I mean this one so let's uncomment it so that we can navigate to the main tabs all right so as you can see this is the default styling right so I'm just going to copy this a couple of times inside my activity screen that is basically the Touch of opacity this one copy this once and then twice so the second time it's going to be requests or you can give it as all and this one is going to be requests okay yeah so here we're gonna make the changes so over here it's going to be selected button equals equals to all background color is going to be black other than that it's going to be the same thing over here also select button equal sqls to all it's going to have this color of white else you want to be black and for the final one also we have selected button equals equals to requests me it's going to be this one over here also requests okay save the file as you can see currently people is selected because we have given the default as people so for that reason you're seeing people as defaultly selected right so the next step is we're going to initialize onpress event on each of the touchable opacity so let's do that from the first that is over here so I'm going to say on press it's going to take in a function and here I'm going to say handle button click of the people so let's define this function right at the top over here so I'm going to say const handle button click this is going to give us the button name that we pressed on right so here I'm going to say set the selected button to be the button name right so let's do one thing let's also copy the on press for the remaining buttons as well so here it's going to be requests I mean the for the second one it's going to be all right over here and this one is going to be requests Yep this is going to be requests you will write so as you can see currently all is selected so the background color is black for it and request is selected background color is black okay so I think that's it so we have you know implemented the initial design of the activity screen so now the next step is we're gonna uh we're gonna define endpoint in such a way that we're going to show all of the users other than the logged in user because the login user cannot follow themselves right so for that reason let's come back into the index.cis file and here we're going to define the end point over here so I'm going to say endpoint to access all the users except the logged in user because that particular user cannot follow themselves right so here I'm going to say app.get so it's going to be forward slash user and forward slash user ID so user ID and it's going to take in of course the two things in the Callback request and the response and the first thing is we're going to initialize the try catch block so try and the catch block over here so here I'm going to say firstly result dot status of 500 dot Json which the message being error uh getting the users something like this and inside the try block firstly we need access to the logged in user ID so I'm going to say const logged in user ID equals to request dot params dot user ID all right and after that I'm going to say with the help of access the user model user.find so I'm going to pass in basically the underscore ID which should not equal the logged in user ID so to do that I'm going to say dollar not equal the logged in user ID so after that I'm going to say the dot then method which is going to give us the users excluding the logged in user ID right so here I'm gonna say result dot status of 200 dot Json send me all of the users that's it if at all there is any error I'm going to catch it so catch of error firstly I'm going to say console.log of error whatever that error is and apart from that we're gonna send the result so I'm going to say result dot status 500 Dot and Json error you can give any message all right I think that's it it's format once okay so now the next step is we're going to go into the activity screen and then with the help of a user fact we're going to fetch all of the users except the logged in user so here firstly I'm gonna initialize my user fact just like this all right so let's import use effect from react okay so now if I need access to my user ID in in every point of my application right so to do that I'm going to initialize a contact at the global level let's say I'm going to create a new file over here with the name user context dot Js okay I'm just going to paste in the code over here it's going to be the same thing that we have done from the previous two projects so firstly I'm going to import create context and use State and I'm defining my user type equals to create context with the help of that method and I'm going to Define my user context over here which is which is going to return the provider and provider is going to take in all the children that come from the props so you can pretty much copy this out and save the file and this is the state that I want that is the user ID and the set user ID so I'm passing uh both the values over here as the value prop over here so now for everything to work we need to include it in the main app.js so make sure you import user context from the context file just like this and put the stack Navigator inside a user context save the file so now let's come back to the activity screen and we can start defining our function so here uh I'm gonna say const let's say fetch users equals to async all right so firstly I need access to my token right so let's get that so I think that we've already done in the login screen just copy this piece of code and paste it over here make sure you import async storage all right let's just copy this one all right so now we need access to basically the token right so to do that firstly we want to install a dependency so here I'm going to say yarn at JWT T code so let's press on enter and here I'm going to say const decoded token equals to her JWT underscore decode of that token that is present from the async storage so let's import gwtd code over here just like this I'll try it so now after doing this I'm going to say const user ID equals to A decoded token dot user ID and after that I'm going to say set the user ID to be whatever that user ID is just like this I think that's it so now I'm going to say axios dot get so it's going to be this end point that is HTTP forward slash localhost 3000 forward slash users and forward slash your ID right so firstly let's import axios from axios and over here let's make use of bat text so that we can get access to the user ID that is this itself I want to see user ID all right and after we have done this I'm going to say apply the then method which is going to give us the response and here I'm going to say set the users to be the response dot data first let's initialize the state to hold the users equals to use state initially it's going to be an empty array all right so yep after this I'm going to say yeah set users of response.data and uh after all there is any error I'm going to catch it so console.log error on that particular error okay that's it it's format once so yeah set user ID is undefined because we need to you know get it first with the help of the use context hook so here I'm going to say restructure the value that is user ID comma set user ID equals to use context and we need to pass the context that is the user type so let's import user type okay let's import use context from react and okay you can just pretty much copy this out that is the user type so now let's you know call the function over here that is fetch users and let's console.log if it will be getting the correct user so we should currently get one user because we only we only have two users in the back end so I'm going to say users users so let's give this a try save the file and okay we have an error request field with status quo 4.4 okay there is no error over here oh that's that was the previous one so yep let's see where we have gone wrong let's check the end point once inside of the index.js file okay okay so here it's user user ID let's check over here if it's the correct spelling or activity screen up okay we have made a mistake it's going to be user so save the file and as you can see we have the user all right so this is the other user okay so with the help of this information we're gonna design the initial part of the activity screen so that's going to happen after The View that is over here here I'm going to say View so firstly we're gonna check the condition that is if at all the selected button equals equals to people which is true by default I'm going to say then on the show this particular design so inside the view I'm going to map over the user so I'm going to say users dot map for every item and index I'm going to firstly create a new component so into my components folder I'm going to say user.js rnfe s to get the shot and snippet save the file and here I'm gonna say import the user component from the components folder so to the user component I'm going to pass in the key which is going to be the index and I'm going to pass in the item itself that is containing all of the information so item equals to item save the file so as you can see we have we have only one user for that reason you're just seeing user being shown over here so the next step is you're going to start designing the user so firstly let's give some margin top to this here so Style margin top of 20. and over here firstly let's destructure the props so it's going to be item and first thing is we're gonna initialize the image right so for now I'm just going to use the dummy image that is the profile image of the user that is going to be the person icon similar to Icon so I'm just going to get the image now okay because I just presses the code for the image so let's import image from react native as you can see that's going to be our image so enough I'm gonna say put this inside of that view that is the image and after the image we are gonna pretty much show the username so let's say uh over here I'm going to initialize my text attribute so to access the user name it's going to be item dot name right so here I'm going to say item dot name let's give the styling for this so I'm going to say style font size of 15 and it's going to have a font way to 500. so save the file as you can see that's my username and after that we're going to have the pressable to follow that particular user so it's going to save text and we're going to say follow so let's get the style for the principle so it's basically going to have a border color of this d0 d0 d0 and it's going to have a bottle width as well so bottle width of let's say one and it's going to have some internal spacing that is a padding of 10. a slight margin left and it's going to have a specific width of 100 and slide border radius of 7. so save the file precipulation does not exist so import principle from react native so yeah let's give the styling for the outermost View so Style Flex direction of row so it comes into the row and align items of Center and justify content of space between I don't think that's required let's see how that looks space between nope so let's remove that out all right so we want the button to come towards the rightmost part so for the text we're going to give it a flex of one so it pushes the button towards the right most part just like this so for this text I'm going to say Style uh text align Center font size 15 font weight bold yep I think that's looking nice and for this particular text we're going to give the styling margin left of 10. or instead of that we can give a gap over here I guess let's give a gap of 10. let's remove this out okay yep I think that's looking better all right so we have designed the user component so now the next step is we're going to Define an end point to follow a particular user and unfollow a particular user as well so let's come into the index.js file and here I'm going to say end point to follow a particular user so here I'm going to make use of the post method so I'm going to say app.post and it's going to be forward slash follow I'll write and it's going to be a async method which is going to take an of course the request and the response in the Callback firstly we need access to two things that is the current user ID and the selected user ID right so here I'm going to say const current user ID so this is the ID of the person who is logged in and the selected user ID is the ID of the person whom you are sending a follow request or or whom you are following right so it's going to be selected user ID equals to or request dot body all right so firstly let's initialize our try catch block over here so catch of error so here I'm going to say console.log edit and Digital Dot status of 500 dot Json with a message sync error and following a user all right so inside the try block firstly uh what I'm going to do is I'm going to update the followers array of a particular user so here I'm going to say await user dot find by ID and update okay so we need to update the followers list of the selected user ID right so it's going to be selected user ID and here I'm going to say dollar push just access the followers and here I'm going to say push the current user ID because this is the person who is following this one circuit user ID right so format once I think that's it so we are just going to look into the followers and then we're just going to push the ID of this particular person who is logged in into the followers list of this particular person so after doing that I'm gonna say result dot send status of 200. yep that's it for the follow so format once and save the file so now the next thing we'll be looking into is the unfollow so here I'm gonna say end point to unfollow uh unfollow a user so here I'm going to say app dot post it's going to be forward slash users forward slash unfollow it's gonna be a async method which is going to take in the request and the response all right so firstly we need access to two things over here that is the current user ID and the target user ID so here I'm going to say logged in user ID comma Target user ID equals to the request dot body all right so let's initialize our try catch block so here I'm going to say result Dot status of 500 dot Json with a message being error unfollowing the user so inside the drive block I'm just gonna simply remove whatever uh ID is there from this particular followers array so I'm pretty much going to remove this logged in user ID from the followers array if at all any user presses on the unfollow button so inside the try block I'm going to say the weight access the user model dot find by ID and update find by ID and update so we're going to update of course the target user ID because the login user ID is unfollowing this one right so here I'm going to say update the Target user ID right and over here I'm gonna say with the help of the pull method access firstly the followers array followers and here it's gonna be remove this particular user ID from the followers adding that is logged in user ID so I think that's it about the unfollow method so follow means we're just going to push the current user ID unfollow means which is going to pull that particular user ID from the followers array so I think follower spelling is wrong so let's use this one all right so that's it save the file so now let's go into the activity screen and then initializer on press function on the follow button I mean not to the activity screen to the user component basically yeah so where we have the follow button I'm going to say on press so it's going to take in a function here I'm going to say send follow of we need two things firstly is the user ID so user ID is already stored inside of the state and the second one is the selected user ID or the target user ID that's going to be item dot underscore ID so let's do one thing so as soon as we you know load the app I need the set user ID to be set I mean I need this value to be present so let's do one thing so let's come back to the activity screen copy this piece of code okay this one and we're gonna go into the home screen uh over here home screen and paste it right here so make sure you import use effect and I just need to you know set this one this is not required so make sure you import async storage and we need access to this also jwtd code so let's do one thing import it from the activity screen all right so yep that's done so now we need access to uh two things that is the state with the help of use context so I'm gonna copy this piece of code and we're gonna paste over here so make sure you import use context all right and the user type as well so as soon as a page loads I want the user ID to be set right so for that reason I'm doing this so yeah we can save the file no it is that's good so format once and then we're going to go back to the uh activity over here use a component and yep let's you know initialize uh firstly let's get the values that is user ID and the set user ID make sure you import use context use contacts as well as the user type from the context file just like this format once all right so now let's firstly check if at all we have the user ID right user ID so as you can see we have the user ID present it is not undefined so enough we're going to define the function right at the top that is send follow so on press equal to send follow you're passing two things there is a user ID logged in user ID and the target user ID or the circuit user ID so here I'm gonna say const ant send follow equals to async method this is going to take in two things that is the current user ID and the selected user ID all right so firstly we're going to initialize our try catch block so catch of error we're going to say console.log error message it's gonna be the edit itself so inside the dry block I'm going to initialize my response so cons response equals to await fetch and this is going to be the URL that is http forward slash localhost http forward slash localhost 3000 forward slash follow all right so over here we're going to pass in some options that is the method that's going to be of post and headers how are we going to say content type application slash Json of course the next thing we need to provide is the body because it's a post method so here I'm going to say Json Dot stringify we need to pass in two things if you would remember that is the current user ID as well as the select user ID so I'm going to say current user ID and this help is already both are coming from the parameters from the function all right so after that I'm going to check over here if at all the response dot okay that means you're going to do something so firstly I'm going to initialize my state if at all to check whether or not the request is sent so I'm going to say const request sent comma set request sent equals to use State initially it's going to be false and if at all the response is okay then only we're going to set it to be true so here I'm going to say set request set a request sent to be true all right so now we can save the file I think that's it about the uh follow function usually does not exist right so make sure you import use state I'll try it so let's come over here so now uh we're gonna give this a try and now also to change the UI we're gonna apply a condition over here that is where we have the follow button so here I'm going to say if at all request sent is true which is going to be true if at all the request is okay after all this is true or or if at all our item dot access the followers list if the followers followers dot includes our user ID then this means that we are following that particular person right so if this is the case then that means I'm gonna say following if this is not the case then I'm going to say follow so here it's going to be following and we're going to change this function in just a bit okay so yeah this is the condition that we are applying if at all this is true or this becomes true then it's then that it means we are following that particular person all right else if it is false it's going to be follow itself so save the file once okay so let's give this a try so currently let's see what is my user ID Okay so so my user ID is this one so that is 6 4 D9 so if at all I press on this this user ID should be uh inserted into the followers of this particular person right so let's give this a try I'm going to press on follow as you can see we are following that person so just to check if it is correctly working or not we're going to go into the back end and this particular ID should be present in the followers array of this person so let's head over to mongodb once and refresh so this is me all right so because this is my ID that is 64 D9 and this is the other person so let's check the followers of this person as you can see my ID is present okay so this person has currently one follower and over here it should be still empty this that is the in my followers array as you can see it's empty right so that's the way this thing works so enough if at all we're gonna press an unfollow we're gonna Implement that as well so what I'm going to do is firstly we're going to initialize a new function over here let's say handle unfollow handle unfollow and here we are interested in the item dot underscore ID all right so now we are gonna you know Define this function right at the top so over here here so I'm going to say const handle unfollow equals to a basic async function which is going to take in of course the target ID all right so here so firstly I'm going to say try block and the catch block so firstly just show whatever that particular error is if at all there is any error so inside the drive block firstly I'm going to initialize my response so I'm going to say const response equals to await fetch and this is going to be my URL that is http localhost 3000 and forward slash users forward slash unfollow so this also is going to be a method of post headers it's going to be contents type application slash Json and we need to pass in the body so here we're going to say body it's gonna be Json Dot stringify the logged in user ID that's going to be the user ID itself and the targeted user ID or the target user ID Target user ID it's gonna be the target ID that is coming from the params parameters of the function yes that's it so Target ID it should work properly so save the file so now if at all the response is okay if response dot okay then that means I'm going to say set the request sent to be false and here I'm gonna say console.log unfollowed successfully so let's save the file so if I press on unfollow my ID should be removed from the followers array of this particular person right and over here we should be seeing follow so let's give this a try okay I guess it didn't work correctly so let's go check out once in the back end so over here in this particular followers array okay so this is correctly working in the back end but over here in the front end part it's not changing right because uh we need to you know show here as follow again because we've unfollowed that person so now let's go check out the index.js file I think that's where you have made the mistake I guess because in the backend if it's working correctly over here the UI is not getting updated right so I think we forgot to you know add the result over here when we unfollow a particular user so here I'm just gonna paste the code there is a result of status of 200.json message it's going to be unfollowed successfully so save the file so now if I'm if I go back to my user.js file and if and if I'm gonna press and unfollow automatically we should be seeing the UI getting changed so let's give that a try so as you can see that's looking absolutely fine so we can follow as well as we can unfollow right so yep that's working absolutely fine so now the next step we'll be looking into is we're going to start designing the create screen where we can you know send a post and after doing that we're going to write some endpoints to create a post and furthermore we have to we have to write the endpoint for liking a post and unliking a post so let's get into the design of the create screen that is basically the thread screen over here so firstly over here I'm going to initialize my view like this and firstly inside the view I'm gonna have my image so I'm just going to get the link for the image over here okay you can pretty much copy it it's going to be the same link that we've used earlier that is for the URI so make sure you import image from react native all right and uh yeah after this I'm gonna say text this is going to contain the username so for now I'm just going to hardcore it when we initialize the end point you know to get the profile of that particular user then we're gonna make this look dynamic so I'm just gonna say and save the file all right so now for this let's give some styling so firstly let's give margin top or or let's make this actually a safe area View so over here I'm going to say safe area View so here and over here all right so now we're gonna give some styling to this one so basically some padding all right and we're going to give the styling for this one we're going to give the flex direction of rho line items of Center and we're going to give it a gap of 10. all right that's looking good so let's format once I think the padding is not being applied not sure why okay padding of 10. yeah that's looking good so now after this view we're gonna have basically the text input to enter the text so here I'm going to say view initialize the text input import or text input from react native as such so it's going to have a placeholder which says type your message so placeholder is going to be type or your message all right so the placeholder text color is going to be black and now we're gonna give the I mean we're going to initialize the state to hold the text so we're going to say const content comma set content equals to use state it's going to be initially empty let's import use state from react all right so now we're going to give the value to this so value is going to be content and we have the on change text so I'm going to say on change text it's going to take in the text whatever the user is typing and then we're going to just say set the content to be of that particular text all right so yeah we have value this is the value change on change text correctly being set up so save the file now we're going to give this type for the view over here so I'm going to say Style Flex Direction row and a bit of margin left of 10 and some spacing on the top margin top of 12. all right that's looking good so the next thing is we're gonna make this look multi-line so I'm going to say multi-line okay I think let's remove the margin top ones yep I think this also is looking good so after this we are going to initialize a button right which says share post so button import button from react native as such here we're gonna say title I think we can make it a self-enclosing tag over here so we're gonna say title equals to share post okay and apart from that we're going to give it some Style a margin top of 20. or let's keep it to be 40. okay I'm not sure that's being applied 120 no so margin top of Auto kind of flex selection of row okay never mind so let's do one thing let's just give you know uh basic height over here let's remove this out and instead of this we're just gonna give a basic height in view let's say Style we're gonna give this uh margin top of 20. yep I think that's looking better so yeah format once and save the file so now the next step is we're going to initialize endpoints to create a new Post in the back end so let's head over to index.js file and here I'm going to say uh end point to create a new Post in the back all right so we are going to make it to the post method so I'm going to say app.post that is create post it's going to be a async method with the request and the response so here firstly I'm going to initialize my try catch block so I'm going to say try catch of error firstly result Dot status of 500 dot Json with a message saying uh post creation failure that is correct post creation field and over here I think we have a bracket error yep that's correct so now inside the try block I need access to two things that is a user ID and the content that is whatever the user is writing so I'm going to say const content comma user ID equals to request.body okay so here I'm going to say if at all there is content then that means I'm going to say new post data dot content equals to content let's define the new post data at the top so I'm going to say const new post data equals to an object so it's going to contain basically the user with the user ID that's coming from the request body all right so now we're going to initialize a new post so I'm going to say const new post equals to new post access the post model and it's going to take in the new post all right so yeah I mean the new post data so this is going to include the user ID as well as the content effort all the content is present right and after that over here I'm going to say wait new post dot safe just like this okay so save the file and then we're going to send the result so here I'm going to say result dot status of 200 dot Json with the message being post uh saved or created successful anything you can write save the file okay so that's the end point for creating a post so now the next step is we're going to write the endpoint for a liking a particular post so here I'm going to say end point for a liking a particular post so again this is going to be the put method so I'm going to say app dot put forward slash post forward slash we need access to the post ID whatever is that and we need access to the user idea also user ID and forward slash like so it's gonna be async method with the request and the response so firstly here we're going to initialize our try catch block so try then the catch of error I'm just going to say console.log of error and 0. status of 500.json of message okay we're gonna give a different message let's say an error occurred while liking yep that's it so inside the try block we need access to the two things that is a post ID and the user ID so here I'm going to say const post ID equals to requested params.post ID const user ID equals to requisite params.user ID so after that I'm going to say const post equals to away post dot find by ID first we're going to find that particular post with the help of the ID so find by ID of the post ID that we are getting from the params and we're going to populate it to get the details of the user that is basically the user as well as the name that's it so now we need to you know initialize a updated post where we need to you know increase the like of that particular post by one so here I'm gonna say const updated post equals to await post dot find by ID find by ID and update so we're going to update the post with the help of the post ID that we have all right so here I'm going to say I'm going to apply the method that is add to set we're going to access the likes array and to and inside the likes array I'm going to pass in my user ID okay so I'm going to say user ID just like this so I think there is a kind of bracket error so so this is going to take in basically the post ID and after that we're gonna say add to set we're going to access the likes and here we're going to add in the user ID okay and after that we're gonna say new equals to true yep that's it what we're doing is we're just gonna add uh the user ID who has like that particular post with the help of this statement and over here I'm going to write the conditions that if at all there is no updated post then we're gonna say return status of 4.4 dot Json with a message saying post not found all right after that I'm going to say updated post dot user equals to the post dot user okay so I'm doing this because I need access to the username and I wanted to come inside of the post itself so for that reason I'm gonna say updated post user equals to post dot user and I'm going to send result dot Json of the updated post just like this we have completed the end point to like a particular post okay so I'm just going to copy down the next endpoint to unlike a post because it is super similar to the like the post right so we have to just make one change okay so I'm just paste the code for unliking a particular post it's like super similar to the liked one one change is instead of you know add to set we're just gonna pull that particular user ID from the likes array apart from that everything is going to remain the same thing you can just look into this one and this one okay make this make that change over here and that's it about the unliking of the post so the next thing is we're gonna say end points to get all the posts so here with the help of the get method I'm going to Define this so it's going to say get posts it's gonna be async method with the request and the response so firstly we're going to initialize our try catch block so catch of error pressure dot shade is a 500.json with a message saying an error occurred why uh getting the posts all right yeah just like this so inside the try block firstly I'm going to initialize my posts so I'm going to say const posts cons posts equals to the weight post dot find dot populate based on the user and we need access to the name and the profile picture name and the profile picture if you do not have the profile picture just give the name because we're going to use the same profile picture that is this one all right so we're gonna sort also so such that the latest post come towards the top part so here I'm going to say sort created at minus one just like this and format it so after doing this we're just going to send it in the result that is basically the posts array so here I'm going to say result dot status of 200 dot Json send the posts so where did that go yeah format once and save the file so yep that's it so we have you know defined the endpoint to get all of the particular posts so with the help of this we're gonna you know start designing I mean start you know uh implementing over here firstly we're going to initialize the on press event on the thread screen and we're gonna call the function that is yeah we're going to initialize onpress event on this button so here I'm gonna write on press handle post submit okay so I'm going to Define this function at the top over here so I'm going to say const handle post submit equals to a function so here firstly I'm going to say const data equals to the user ID so firstly let's get access to the user ID so over here you can copy this piece of code and we're gonna paste it right here make sure to import use context and the user type user type also all right so after this I'm gonna say if at all the content is there then here I'm going to say post data dot content equals to content enough here I'm gonna say axios input axios from axios dot post this is going to be the URL http localhost 3000 forward slash create post and it's going to take in of course the post data and after doing this I'm going to apply the then method which is going to give us the response so here I'm going to say set the content to be empty again after sharing the post so yep that's it and after all there is any error while doing that while doing this so I'm going to say catch of error and here I'm gonna write console.log error creating post and we're gonna write the error over here so format once and yep I think that's it save the file okay missing some semicolon I I think I forgot to you know add the Arrow mark yep I think now it's looking good so yeah save the file okay so first let's try this out if at all it's working correctly so let's add any kind of content so you know let's head over to Chrome and search for anything let's say motivational quotes okay so let's just copy this one and we're gonna paste it over here all right so if I press in share post this post should be created by this particular user and it should be stored in the back end so let's give this a try all right so there are there were no errors so hopefully let's go check out the back end once so here refresh and let's check our posts collection we should be having the first post as you can see this is the first post so this is the content this is the user who created the post and we have the likes array and the replies array and the created add post all right so with the help of this firstly let's get this post in the home screen so let's start designing the home screen first so firstly let's go to the home screen and initialize the user fact so it's gonna run one time so here I'm going to initialize a function let's say fetch posts all right so let's define the function over here let's say const posts equals to a async function let's define the try catch block and here I'm going to say console.log error fetching posts I'm going to pass in the error and inside the try block I'm going to say const response equals to weight axios import axios from axios dot get method and this is going to be the URL that is HTTP localhost 3000 forward slash get posts all right so firstly let's initialize the state to hold the posts so I'm going to say const post comma set posts equals to use State initially it's going to be an empty array because we can have n number of posts right let's import use state from react like this and yep let's see if this is the correct spelling index.js if if we have written get posts correctly get posts yeah it's correct so let's come back and yep let's call the function I mean yeah we've already called it and here we're gonna say set the posts to be response dot data yep that's it so keep a format once and let's you know console.log the posts so save the file so as you can see we are able to see the posts array over here we have currently one post and it is in the form of an object so with the help of this information we're gonna style the home screen so firstly inside the home screen we're gonna make this look like a scroll View so let's import scroll view from react native and we're gonna make use of the the scroll view instead of the normal View so it's going to have a margin top so I'm going to say margin top 50 it's gonna have Flex of one and a background color of white all right so the next step is I'm gonna get the image link and I'm going to paste it over here instead of the text okay guys you can just pretty much copy this out so we have the image with the same link I guess I'll write or you can you know copy this link out or I'll be sending the link in the description and this is the style for the view and for the image we have given a width of 60 a height of 60 and a resize mode of contain so let's you know import image from react native as such and save the file so as you can see that's coming to the center part of the screen so now we're going to initialize our view and map over all of the posts so I'm going to say View so to this I'm going to give it a style let's say margin top of 20. and here I'm going to say posts dot map for every post I want you to return a view all right so over here in the view firstly we need access to one more view I'm going to write one more View and this view in turn is going to have the image yep so this view is going to have the image so let me just get the link for the image okay guys you can just copy out the link it's pretty much the same that we that we've used earlier right so this is the source and this is the URI this is the style we have given to the image so from at once so as you can see we just have one post and we are able to see that particular uh image coming on the screen so now we're gonna give this style for this View so firstly we're going to give it some padding internal spacing 15. we're going to give a border color of this color code and we're going to give it a border top width of let's say one as you can see that's looking nice so enough after the view we're going to initialize one more View from here we're gonna write in the post content so initialize this view like this and over here we're gonna have the first text attribute to access the content it's going to be post dot content so I'm just going to write that over here that is post dot content just like this and save the file as you can see that's the content we had posted so yes after that we're gonna post I mean firstly we need to post the first thing we need to show the username so it's going to be post dot name okay so currently there is no name I guess okay so to access the name it's going to be post dot user.name my bad so it's going to be post dot user dot name as you can see that's looking better so now we're going to give the some more styling to this particular view basically we're going to give Flex direction of row and align items of Center for I mean for these two views that's that's going to come over here so format once save the file as you can see that's looking good so now we're gonna give the styling for this particular text so I'm going to say Style it's going to have a font size of 15. and a font weight of gold okay and we're going to give it some margin bottom of 4. right yep that's looking nice so yeah after that we're gonna have the view which is going to contain all of the icons that is a heart icon and the comment icon and so on so over here I'm going to initialize the view and we're gonna get all of the icons over here so the first one is the and design icon that is that is the heart icon so let's head over to Expo icons over here search for heart so from and design we're going to use it import the icon family copy that into component code and we're gonna paste it right here all right so after that we have the second icon that's going to be the comment icon so comment we're going to use it from let's say this one import the icon Family First and after that we're gonna copy the render component code we're gonna paste it over here okay and after this we have one more icon that is the share outline icon so I'm going to say share social outline icon so you can use it from Iron icons so firstly import the icon family into the code and then we're gonna copy it out so copy this out and we're gonna paste it right here so we're going to give this style for the outermost view okay that con that contains all of the icons we're going to give a flex direction of row applying items Center and we're going to give it a gap of 10 and again and we're going to give it a margin top of 15. so as you can see that's looking fine we need to decrease the size of the icon it's looking uh huge so let's give it 18. 18 and 18. all right yep that's looking nice so yep that's fine so if it also firstly it should be uh the outline version right the heart icon so it is currently filled yeah so to get the outline version it's going to be hard and then oh yeah that's looking nice so enough after that we're gonna show if at all there is there are any likes or if the uh or if if at all there are any comments so that's going to come right below the view that's this one so text So currently we just want to hard code it so I'm going to say text here we're gonna say likes you can actually you know make make it look Dynamic also to get together like it's going to be post dot likes dot length and here we're gonna say likes and after that we're gonna say post dot uh replies dot length so it's going to be post dot replies dot length just like this you want to say reply okay so I think that's it so once when we you know add the comments part we're gonna make this look dynamic so save the file and for this we're going to give it some styling basically a margin top of let's say four and we're going to give it a color of gray okay so that looks better or I think we can you know increase the margin top to be seven so yeah that's looking good so I think that's it so I think one more thing we need to do is if at all in the create screen that is in the thread screen if at all I share a post and come and and come and check over here it should automatically get updated right so now it's it's only going to run once when the home screen loads so it should also run when the when we are when we actually share a post it should also uh show the updated post over here so to do that we are going to make use of some piece of code over here that is with the help of the use callback and the use Focus effect so let me just get the code for that so just copy this out that is inside of the useful so firstly import use Focus effect and the use callback okay so we are doing this because when this screen comes into Focus again we need to call the fetch post so that the latest posts get updated so firstly use callback and use call and use Focus effect is already imported from react navigation slash native so save the file so now when I you know uh enter one more post and auto and come to the home screen automatically without saving the file we should be seeing the next post being updated so I'm just going to copy this one and I'm going to share the post so paste and then share okay let's come to the home screen as you can see it's working absolutely fine that is the latest process coming towards the top and without saving the file we are able to see the posts getting updated so that's it so the this part is working absolutely fine that is sharing a post so now the next step is we're going to look into how we can like a post and unlike a post so we have already defined the end points we just need to you know initialize the on-press events on the icons that we have over here so firstly on the hard icon I'm going to initialize the onpress event right here I'm going to say handle like of that particular ID so to access the ID it's going to be post dot underscore ID right so here I'm going to say post Dot underscore ID so we're going to Define this function right at the top over here so here I'm going to say const handle like equals to async function it's going to take in of course the post ID and firstly we're going to initialize that try and catch block so here I'm going to say console.log error liking the post all right so inside the dry block firstly I'm going to initialize my response so I'm going to say const response equals to await axios Dot get method so this is going to be the I mean not get method to to like it's going to be put method right so axios.put it's going to be the URL that is HTTP localhost 3000 forward slash posts forward slash post ID so firstly let's make use of back text so here it's gonna be post ID and forward slash the user ID in forward slash like all right so after the response I'm just gonna say initialize firstly my updated post so I'm going to say const updated post equals to response dot data okay so firstly I'm gonna map over it so I'm going to say const updated posts equals to posts that we have that is these two so post dot map for every post if at all the post dot ID post underscore ID equals equals to the updated post underscore idea updated post dot underscore ID then in that case it's going to be updated post else it's going to be the post itself all right format once and after we write the condition here I'm going to say set the posts to be the updated posts that's it so save the file so now we're going to write the condition over here in the I mean near the icon over here I'm going to say if at all the post dot access the likes array if this includes the user ID then that means this post is liked okay else it is not being light so copy this out and paste it over here so this is going to be the heart icon and the color is going to be red so format once and save the file so now let's say if I press on the heart icon it's going to go into this particular function that is handle like it's gonna you know call to this particular URL and it's gonna pretty much update the post and we should be seeing and pretty much it's going to add that particular user ID into the likes array and this condition is going to get checked that is post dot likes or includes of the user ID and if it is true we're gonna show the red color icon so let's give this a try okay request failed is it so let's see what we've gone wrong uh let's check the correct spelling of the URL once so inside index.js file posts and uh so for this one yeah posts post ID user ID yeah post post ID user ID and then like yep it is correct but uh but still it's not working right so once just refresh the app and open it up once again and I'm gonna press on you know the first uh post that is on the like button okay so as you can see we are able to like the post and even the likes are getting updated so let's check for the second one okay so that's looking good so as you can see inside the likes array this particular user ID is present so yeah that's working absolutely fine so now the next step is we're going to go into the uh profile screen and before that I need I think we need to you know initialize endpoints to get the details of the user so let's do that in the index.js file so it's going to be the last endpoint so here I'm going to say app.get so it's going to be forward slash profile and then forward slash user ID and it's going to be a async method with the request and the response so firstly initialize my try catch block and here I'm going to say result dot status of 500 dot Json with a message sync error while getting the profile and inside the try block firstly I need access to the user ID of course so user ID equals to request dot params.user ID and here I'm going to say const user equals to wait access the user model dot find by ID of the user ID and if at all there is no user we're going to send the result so if there is no user I'm going to say return result dot status of 4.4 dot Json with the message being user not form all right so now I'm gonna see over here return status I mean return result dot status of 200 dot Json of the user okay so format once so with the help of this we're gonna you know initialize a function or use effect and design the profile screen over here so now before going into the profile screen and the and the design part firstly you know we are going to initialize the function for disliking also it's going to be super similar we just need to make one change so let's come back into the home screen over here and over here initialize the on press event here it's going to be handle it is like of that particular post dot ID so I'm just going to paste it over here you can just look into it it's going to be very similar okay so instead of like it's going to be unlike other than that it's going to be the same thing okay so save the file so now we're going to go into the profile screen and then initialize a user fact to you know fetch that particular information of the pro of the user so here I'm going to say use effect uh I'm going to say const profile equals to async async function and here I'm going to initialize my try catch block so catch of error firstly I'm going to say console.log of error and inside the try block I'm going to say const response equals to a weight axios so input axios from axios and with the help of get method you're going to say http localhost 3000 forward slash profile and then forward slash user ID so let's make use of back text first over here and here it's going to be user ID just like this and over here I'm going to say const user equals to response dot data now let's define the state to hold the user so I'm going to say const user comma set user equals to use state or be an empty string initially let's import used effect and use state just like this and after doing this I'm going to say set the user to be whatever that particular user value is so that's it so format once and we're going to call the function after initializing it so I'm going to say const I mean fetch profile so let's console.log the user value all right save the file okay user ID does not exist so let's copy that out firstly you can copy this piece of code and paste it over here import use context and the user type also so user type as you can see this is the user profile of the logged in user so with the help of this we're gonna start styling out the a profile screen so firstly I'm going to initialize the view that's there so let's give it some Style let's say margin top of 55 and it's going to have some padding of 15. all right and after this we have another view here we're gonna give basically one more View it's going to have a text with the username so user dot name okay as you can see that is being seen on the screen and after that we're gonna say few all right so this is going to have basically the text over here with uh all right so it's going to have a text which says threads.net and we're going to give this style for the outermost View so style firstly I'm going to give it some padding horizontal of seven of padding vertical of five and it's going to have a slight border radius of 8 and it's going to have a background color of this color all right so save the file and we're going to give the style for this particular View so I'm going to say style basically Flex direction of row align items with Center and let's say we're going to give it a gap of 10. yep that's looking good so for this we're going to give the style so I'm going to say Style particularly font size of 20 and a font weight of gold font weight font size let's write that correctly all right that's looking nice so now after that I'm gonna get the link for the image okay so I've just pasted the image over here so let's wrap this inside of a view all right so I'm just going to put the image inside the view all right so after that I'm gonna you know initialize one more view by we're just gonna you know hard code the bio so so I'm just gonna get three texts over here okay so you can pretty much hard code your bio like this and I'm Gonna Save the file so that's looking good so now we're gonna give this style for this view let's keep both of the views inside that's the one which contains the image and this view that contains the bio all right so it's going to look like this so to this we're going to give this style so Style Flex direction of row align items of Center I'm going to give it a gap of 20. and also margin top also yep that's looking nice so enough after that we're going to show uh basically the number of followers so we're gonna let's show that over here so to do that it's going to be user dot followers dot length and it's going to be followers okay so I think currently there are zero followers I think I I think the spelling is wrong yeah now it's looking good so it's going to have a color of Gray and a font size of 15. and a margin top of 10. okay that's looking good so now after that you're gonna have two buttons right that is one for the share and one is for the log out so here I'm going to initialize my view so I'm just going to get the buttons okay guys I've just pasted the code for the buttons as you can see okay so the first one is going to be edit profile and the second one is going to be log out uh so firstly we're going to give the style for this view make sure you import pressable so here I'm going to say Flex direction of row align items of a center and we're going to give it a gap of 10. logout does not exist so let's define that also we're going to define the logout function first such that we can we'll be navigated to the main home screen I mean the login screen so cons lockout equals to Arrow function clear auth token Define this function right over here that is const clear Parts token equals to async method and here firstly I'm going to say await async storage let's import async storage first or you can get it from here so async storage dot we have the remove item method so I'm going to say remove item and of course it's going to take in the key that is path token and after this I'm going to say consulted log cleared auth token and here I'm gonna write navigation dot replace to the login screen make sure you import async storage let's let's write that correctly and import I mean firstly initialize navigation subconscious navigation equals to use navigation okay let's import use navigation also just all right so now we're gonna save the file so let's give some margin top to this that is this particular view I'm going to give it a margin top of 20. right so now firstly if at all you press on the logout button we need to be taken to the login screen right so let's give this a try so as you can see we are coming to the login screen so I think that's it about this project I know I have skipped one part that is the heading replies to a particular post I would leave that part to you guys so let's see if anyone could you know Implement that so I'll be sending out the code in the description or in the source link if at all you didn't get how to you know Implement that particular functionality that is adding reply to a particular post okay so I think we've implemented everything in the project so we have kept it as short as possible okay so I think that's it about this project so let's see in the next one and then thank you for watching

Channel: Sujan Anand

Views: 17,260

Keywords: instagram threads, react native threads clone, react native twitter, react native full stack app, full stack react native app, react native node js mongodb, react native mern project, react native crash course 2023, react native full course, react native, full stack web development course, full stack ecommerce app, threads app react, instagram clone react, react native from scratch, frontend developer roadmap, react js mern project, react native tutorial for beginners, threads

Id: xaTar22Wgic

Length: 168min 35sec (10115 seconds)

Published: Mon Aug 21 2023