Instagram Clone Full Tutorial - Using React, Express & Sanity

Key Takeaways

[Music] in this video i'll be showing you how to make a social media slash instagram clone using react on the front end express on the back end and then sanity for our content management system as well as our database now this is going to be a pretty advanced tutorial that's going to walk you through how to do all of this completely from scratch so i'm going to assume that you have some understanding of javascript as well as react and express now with that said let me give you a demo of what we're going to be building out then i'll talk more about exactly how this will work and we'll get into all of the setup steps so here you can see that i kind of have a mock instagram now i know the styling is not quite what we would expect i'm not going to focus on styling in this video it's really just meant on the functionality you guys can go in and change the css and make things look better after you have the functioning website built regardless what i can do here is sign in now i'm not implementing real authentication here and the reason for that is it would make this video extremely long we're just going to focus on the actual content of the website as well as the functionality so adding followers searching for accounts unfollowing and following different users being able to post something right all of that kind of stuff view profiles edit profiles that's what we're focusing on on here as opposed to kind of all the authentication stuff which you can add to this fairly easily anyways what i can do here is make an account so maybe i make an account i just call it hello and then world and then once i make this account it will automatically sign me in now what i can also do is log out and then if i know the username of the account i can just sign in by entering that username nice okay so now i'm going to go to search and i'm just going to look for a few users here and when i press search i'm going to see all of the different users that i have here in my i guess app so what i can do is click on the rock and if i want to i can follow the rock and now that i'm following the rock we should see the follower account update here i can go to my home page or my feed and i'll now see posts from whoever i'm following right so if i go back to search here let's search let's go to timurzika which is this beautiful guy right here let's follow him nice then when i go back home i'll see all of the posts from him as well nice now i can click into different profiles of course i can unfollow people if i want to do that then when i go back to the home page of course those posts are going to be gone then i can go to my profile and i can actually edit this profile so maybe i want to change my first and last name maybe i want to change my bio maybe i want to update a photo so let's actually do that okay let's update and give it a second here and we have now updated our profile so that's really what i'm going to be focusing on in this video i do know this looks a little bit simple but there is a ton of stuff that's going on in the back end and once you understand how to implement these different features here you'll see how you can add a ton of other stuff like likes comments removing posts a bunch of stuff that i just haven't implemented in this app and then of course you can make a post here by choosing a file and then entering a bio or entering a caption for that photo all right so that is the demo of the application now i do want to mention that this video is sponsored by sanity which as i said is what we're going to use for the content management as well as the database aspect of this app now this is an awesome platform and it really just makes it easy to access different data and to do that from really any source so even though we're going to be viewing our data from say a react front end here we could be viewing our data from a mobile app or from really anything else and one of the awesome parts about sandy is they have this uh what's it called sandy studio which allows you to go in and actually view all of the entries in your database so i can go and modify different things view all of the different entries and it makes it really convenient when we're debugging as well as people who aren't developers so just really easily say add a post without having to actually go onto the website you know sign into an account all of that kind of stuff now of course sandy is completely free and it's just an awesome thing to use for the database and i've really enjoyed messing around with it as i've been learning it over the past few days so yep that's what we're going to be using not much more to say about that you will learn about all of the features insanity as we go through this video so i just want to jump in here and mention that for the free version of sanity usually you get a hundred thousand api requests 500 000 api cdn requests and then 10 gigabytes of bandwidth but sandy was actually nice enough to double all of that for this tutorial so if you go to the link in the description sandy.com tech with tim you'll see here that you can use this coupon so sandy and nit and then hyphen hyphen coupon tech with tim and that actually gives you double number of api requests cdn requests and bandwidth so usually it's 100k 500 000 and then 10 gigabytes and now it's been doubled to 200 000 1 million and 20 gigabytes again completely free you really will not need this many requests but in case you want to run some other type of application using sanity then this is going to be a higher limit and just make it a bit easier for you to do that now the way that you get access to this again is you write this sandy init and then hyphen hyphen coupon tech with tim now i'll leave this link in the description also when we start setting up sanity i will mention that you can use this coupon code to get access to the double limits so as i mentioned we do have a few setup steps here for this application we need to set up our database our backend and then our frontend so for the database go to this website it is sanity.io and all you need to do is actually just make an account so you can click on login and then assuming you don't have an account you can just create a new one once you've created that account we can actually do all of the setup for this from our command line so just install node.js if you don't already have it i'm assuming most of you have that already and then get into vs code or whatever editor you want to use now inside of vs code here and i've opened up a folder called instagram clone this is where i'm going to put all of the code for this project i've made another folder inside of here called database now database is specifically where i'm going to put all of the sanity database related stuff i'll make two new folders one for api and then one for frontend where the api will be our express backend and the front end will be our react application so now that i've cd into this database folder here what i'm going to do is type the following npm install hyphen g and then at sanity cli now this is going to globally install the sandy cli which we're going to use to actually run the sandy studio and create our sandy database kind of starting code right so i'm going to install that i already have it installed so it goes pretty quickly and then once i've done that i'm going to type the command sanity init now this will work assuming that you've installed that the sandy cli and that's going to ask you if you want to select an existing project or create a new one so i'm going to create a new project here that's what i would recommend you do as well and we'll just call this insta clone tutorial and we should probably do like some underscores or something here so it's a little bit easier to see okay insta clone tutorial for my project name then it's going to ask me do i want to use the default data set configuration we're just going to click yes for this we're going to create the data set here which will take a second and we'll be given a few other options here so project output path i'm just going to hit enter meaning it's the current directory if you wanted it to be somewhere else you would just type in the relative path to where you currently are okay and then we can use a project template if we would like so movie project ecommerce blog i've already showed you what the studio looked like but if you want to explore it with some sample data then you can either choose movie project or e-commerce and it will give you some data as well as a schema and you can have a look at kind of what a sample sandy studio may look like and why it's beneficial anyways for now i'm going to go with clean project with no predefined schemas because we don't need those for our project we're going to write our own schemas all right so we'll just wait for this to finish once it is done i will be right back and then we'll move on to the next steps all right so this command has now finished and i've opened up the database folder and you can see that we have a bunch of files and content inside of here now all we really care about is the schemas folder where we have schema.js we'll look at this later but this is where we'll define our database models now i want to mention here that what sandy's actually going to do is it's going to build our different database models for us and then host that in the cloud so we don't actually need to have any local database file here and our database will be in the cloud meaning we can access it from really any application so even though we're building a react app here if we want to access it from python or we want to access it from really any other programming language we could just use the api that sandy provides to access that data that's why it's so nice to actually use sandy because it hosts everything for us and kind of deals with all of the you know database related stuff hence why we're using it in this tutorial regardless i want to mention that just keep in mind we're not actually hosting the data locally we're just defining the schemas then when we start the studio which we can do now by typing in sandy start i will build the schemas for us host that online and you get the point so i'm going to start this with sanity start now i need to be inside of the project where sandy is so inside this database folder and then it'll take a second and what i can do is go to a local host link and i'll be able to actually view all my database models and all of the data that's in my database now in this case we don't have any models so i'm not going to be able to view anything but i just want to show you kind of how this works before we proceed all right so it's successfully compiled so what i can do is go to localhost colon 333 so let's open that up now in google chrome and when i go here it's going to ask me to log in so i had google as my login so let me log into this and then i will show you what it looks like alright so i've logged in now to my google account and of course it's going to say empty schema because well it is empty we haven't put anything here yet but i just want to show you this kind of how the studio works you access it from this local host link all right so we pretty much set up sanity now we'll do the database models later on so i'm just going to end this with ctrl c and now we're going to set up express so i'm going to make a new folder here and i'm just going to call this api and then i'm going to cd into the api folder so cd api all right so i'm now inside of the api folder so i'm just going to run the command npm init to give us a fresh project and then i'm going to run through this setup here so package name api is fine the version 1 is fine we don't need a description the entry point of index.js is fine for right now we don't need a test command we don't need a git repository no keywords no author no license is this okay yes it is and hit enter okay so now we have a package.json which is what i want i'm going to install a bunch of modules that we need and then we'll actually just create kind of the boilerplate express application before we start kind of writing all of the different endpoints so what i'm going to do is type npm install and then i'm going to install the sanity client now there is a javascript client that we can use that will allow us to very easily send requests to the sanity api again if you're working with sandy from another programming language they do have some other built-in packages and kind of pre-built i don't even know what you would call them modules that you can use to connect to sandy but you also can just do it manually using the sandy api regardless npm install at sandy client we also want to install the body hyphen parser this is going to allow us to actually get json data in our express api then we are going to install multer we're going to use this for uploading files we're going to install env we're going to use this so we gotta have an environment variable file that stores our api token we're then going to have fs which is file system again this is for uploading files and then we're going to have a nano id to get a unique id so let's spell that correctly okay so i'm going to install all of these right here again if any of this is confusing to you please feel free to check out the code from github again the link will be in the description and you can just take the package.json file download that and then install everything that's inside of it on your own okay so i've now installed all of those packages now what i'm going to do is create a few different files that i need inside of here and then that will conclude the setup so the first file that i want to make here is index.js this is going to be my entry point the next file that i want to make is going to be api calls.js this file will be responsible for holding all of the sanity api calls so interacting with our database essentially next what i'm going to do is make a new file and this is going to be client.js we're going to initialize this in a second this will be our sanity client and then finally we're going to do dot env which is going to store an environment variable with our api token for the sanity project now what's going on here is we're going to have a back end the back end is going to be interacting with the api so the sanity database api and the point of this is so that our front end can hit our back end our back end can be authenticated with the api and then that way we're not exposing our sanity api token and we're only having the back end of our application actually manipulating or dealing with any data i could from my front end hit the api for sanity i don't actually need to build out an entire back end but this will be slightly more secure now i will mention that what we're doing here for the back end is not the most secure you'd have to make some modifications if you're going to put this into production but it's just better practice to have any of your api tokens and interactions with data to be done from the back end as opposed to the front end so hopefully that makes a bit of sense but that's where we're making the api essentially so we forward request from the front end to the back end that we're building the back end will then send the appropriate request to the sanity api which will be hosting the database and giving us any data that we need and then returning that to the front end so you can kind of think of the back end as a proxy between our front end and the database all right so we have dot env client we could really start anywhere here i'll start at index.js and i'm just going to write kind of some boilerplate code to set up our express application so i'm going to say import express from express and then i'm going to say imports the body parser like this from and then this will be just body parser so actually i think it will be like this body hyphen parser now i don't know why did a space here okay we have our two imports then i'm going to say my const app is equal to express this makes my express application i'm going to say app.use and then bodyparser.json and then app.use and this will be body parser dot and then this is going to be url encoded and then inside of here we have to have to pass an object and we're going to say extended and then false now what we're doing here is essentially installing a few things that are going to allow us to actually look at and parse the data that's sent as the data in a post request or in a get request to our server now if you don't have a body parser like this you're not going to be able to actually receive say post data or just data in general json from a request what this will do is actually parse the data for us then return it to us in our request.body i know that might be a little bit confusing but really this just allows us to actually get request data uh from wherever the request is being sent from okay so that's what we're doing for this now we're just going to start the app so i'm going to say app.listen and then i'm going to put this on port 3001 and then i'm going to have a function here and this is just going to say console dot log and then we'll just say started just so we know that the server actually ran successfully all right so that's all we need so far for index.js we'll start writing a few different routes like get get roots post routes whatever later on but for now this is kind of our starting code all right now one thing i need to do here is go to package.json and i just need to remove this test script and i want to add a start script here and what the start script is going to be is just node and then index.js okay so that's going to run the file for us and i need to add one other field here and this field is going to be type and then module now what this is going to allow us to do is actually have the import statements here so a lot of times you'll see something like express equals and then something like use or something like require sorry and then express now i don't want to do it that way i'd rather just have regular imports so i'm going to have a module type so i say type equals module and that allows me to have my regular inputs okay so that's what we need for package.json that's good for index.json api calls we don't need anything right now but for our client.js we are going to initialize the sanity client so i'm going to say import and then sanity client from and this is going to be at sanity client and then i'm going to import dot env from and then this is going to simply be dot env remember we installed all of these things okay now that we've done that we're going to say dot env dot config remember what this is going to allow us to do is actually read this dot env file so that's why i'm writing this and then i'm going to say export default and i'm going to create a sanity client so i'm going to say sandy client and i'm going to pass to it an object here that has all of the data that we need to kind of initialize the api connection to our sanity database so i'm going to say project id colon and then this will be something that i will tell you how to get in a second we're going to say data set you're going to make sure you put production here this is just the name of the default data set for a sandy project then we're going to say use cdn now i'm going to set this equal to false and i'll explain what this is in one second we're going to say api version and for the api version what we can actually do is just put today's date now when i'm recording this it is february 22nd and when you do that it's just going to give you the most recent version based on this date so just put the current date you also could just do something like new date but for now we'll just hard code in this string because i know that works then we're going to say token and this is going to be our api token which i'll show you how to get again in a second so what the cdn is going to do here if we enable this to be true is it's going to give us a much faster response from the database but it's going to give us a lot of stale data now the reason for this is going to cache all of our requests so if we send the same request twice it's going to say oh you sent this request before what was the response last time let me just give you the same response as opposed to hitting the database that's what the cdn does so we want to make this false for our application because we're doing a lot of changes that we want to see happen instantly so if we're caching all of our requests we're going to be getting a lot of stale data although that data will be returned to us returned to us very much faster so if you have cached data everything is a lot quicker but you're getting some stale data whereas if you don't cache it it's going to be slower but you're getting fresh data which is what we're going to prefer here so i'm going to turn the cdn off you can make it true and see what happens in your application obviously once we start building out something that's more functional so what we need to find now is the project id for our sanity application now the way we can find that is we can go to database we can go to sandy.json we can just copy the project id and notice here the name of the dataset is production so that's why i put that in the data set field here okay so for the project id i'm going to paste that in that's now going to link it to that project and then we need a token now to get the token we actually have to go to the sandy website so what i'm going to do is go here to sandy i'm going to log in and then i'm going to find my project now my project here you can see i've messed around with a bunch of them before this is insta clone tutorial i'm going to click on api here and then i'm going to go to tokens and i'm going to add an api token now for the name let's just go tutorial and we want to have editor access here so we have read and write access to all data sets but you could just give a viewer access right or the deploy studio token only access to deploy study studio and graphql apis to our hosted service anyways we want the editor so let's go with editor it's going to give us a token this is the only time we can copy it so i'm going to copy that token and i'm going to go now to my env file i'm going to make a variable here called sanity and we'll say api token in all capitals is equal to and then i'm going to paste the token inside of here now i have to check if we need a string or not in this file so bear with me i don't think we do actually yes we do need a string so let me make this stringified here by putting another quotation at the end all right so the point of this is that if we were to upload this project to github for example we would not upload this dot env file and that would mean if someone else wanted to use our application what they would have to do is make their own env file put their sanity api token inside of that file they'd have to change their project id then they'd be able to run this application with their own sandy project so we're putting in an env file because i don't want to hard code this directly into my js file and it's kind of good practice to store things as environment variables that are sensitive data now of course i'm showing you the api token here if any of you are crazy enough to type out the entire token then well you can have it although i'm going to delete it after this video is finished being filmed anyways okay so now that we have this env file what i want to do is access that variable from the env file so since i've used env what i can do here is type process and then this is going to be dot env dot and then this is going to be sanity underscore api underscore token okay i believe that is correct yes that looks good and that will access the variable right here from our environment variable file and allow us to use this sandy api token again without having to hard code it directly into the file okay so now we have set up our client.js we have set up our index.js let's now see if this actually works and then we'll move on to setting up the front so what i'm going to do here is just type npm start from inside of the api folder and let's see if it works notice we get the output of started which is what i wanted to see we're all good we can now quit this with ctrl c all right so we now have our api and we have our database set up the next thing that we need to set up is our react frontend so i'm going to go into the parent level or the top level directory here of my instagram clone and i'm going to run a few npm commands so i'm going to say npx create react app and i'm going to call this frontend this will give us kind of the boilerplate react app code so let's run that and let's see what we get here okay it's going to take us a second to run once this is done then i'll open up that folder and start showing the other stuff we need to do all right so we have now created the front end folder here that actually took a lot longer than i was expecting so what i'm going to do now is cd into front end and i'm going to install the other mpm packages that we need so i'm going to say npm install then this is going to be react router dom i'm also going to install react and then router and then bootstrap and the reason we need that assuming we spell bootstrap correctly is because we're going to install react bootstrap which is going to give us some pre-built components just allowing us to style things a little bit nicer so again react router dom react router bootstrap i spelled bootstrap wrong a second time and then react bootstrap okay so let's run that this will take a second once it's done i will be right back all right so we have now installed all of the packages that we need so i'm just going to go inside a front end and i'm going to start cleaning this up a little bit because we don't need all the files that are inside of src so src is where we're going to write our source code we don't really have to worry about anything else right now inside of here i'm just going to delete a few things that we don't need so i don't need app.test.js i don't need logo i don't need report web vitals and i don't need setup tests so let's delete all of those remove those through recycling bin let's now go to app.js and actually let's remove the import for logo.svg we don't need that for the source for this image in fact for all the stuff inside of here we can just delete this and we can just make it so we have a single div for app we can then go to index.js we can remove the report web vitals remove the import for that and now we are good now we just want to set up this src directory a little bit just so we're ready to start coding in a second so let's make a new folder here i want to call this components this is where we're going to put all our components i want to make another folder here called css and i just want to move my css file inside of here and that's where we'll put all of our custom css so both the css folders or file store are going to go in there and then we'll put app.js inside of components okay and index.js can stay outside of here but we now oh the import automatically changed for us okay that was nice didn't realize it did that i was going to say we have to change the import but doesn't look like we do so for this import here we will actually have to change this so i'm going to say dot slash css slash index.css because we're index and we're trying to get in the css folder and then for app.js here i need to change this import as well so it's going to be dot dot slash and then css slash app.css that is going to bring us to the parent level directory src then into css and then to app.css if that's wrong i'll fix it later but i think right now that is good okay now that we've done that let's go to our package.json and we just need to add one line here at the very bottom and this is proxy and then we're going to proxy localhost colon and then 3001. now we'll also do http before this the reason why we need this here is because we want to forward requests that we're sending from the front end to our back end which is going to run on port 3001 now i believe that our react app is going to run on port 3000 our back end runs on 3001 and then the sani studio will run on three three three three although we don't really care about that url for right now because again all that's hosted in the cloud that's just giving us kind of the nice visual of our sandy database okay so now we have most of the setup complete we have our front end we have our database we have our api so let's just run the front end and make sure that's working so i'm inside a front end so let's type npm start and let's see if this crashes or not or if it actually runs the application for us all right so it looks like everything is good here i'm looking through the terminal doesn't look like i have any errors and you can see that i'm at localhost colon 3000 and i can view my react application so that is good that is what i wanted to test out now ideally we're going to run this at the same time as our back end but for now we don't need to do that i just wanted to make sure that each individual step was working so now we have our front end we have our database and we have our api let's just quickly go to the sandy website for one second and i want to show you here if i go to overview what i can do is view for example the api cdn requests the regular api request the bandwidth the documents and for the free version this is what we're limited at right 100 000 requests 10 gigabytes of bandwidth you are not going to hit that especially because this is just a tutorial and then you can view things like members data sets access usage i won't go through all of it but i just wanted to mention that this does exist here and again because this is hosted on the cloud you can view all of this data and you are rate limited at a certain point because it's the free plan of course you can upgrade and get more limits or higher api requests and all that kind of stuff okay so now that we've done this i want to start setting up the backend database so specifically the schemas so i want to go into the schemas directory here and then into schemas.js and in fact i'm actually not going to do that i'm going to make a new file called user.js and another new file and this is going to be called post.js and inside each of these individual files i'm going to code out schemas for the database models for a user and for a post once i do that i'll add them to the schema folder then i'll show you how we actually build that schema by just running sanity start right and running that that studio alright so i've just taken a quick cut here and opened up a website containing a basic tutorial on how to create schemas in sandy i'll leave this in the description in case you guys want to have a look but let's quickly run through this right here just so we understand basically how to create a schema so we want to focus on this which is an individual schema or actually this which is an individual schema and what we do to create a schema is we have a title a name a type and then the fields that we want on each of these objects so the title is the display name this is what we're going to see when we're printing this out or when we're viewing it in the sandy studio the name is what's going to be used in the apis so make sure the name has lower case letters at least that's the convention then for the type we're only going to go with document for now but as it says you can have some more advanced types we're not going to look at any more advanced ones if you want to see how those work again reference this documentation we then have fields now the fields is going to be all the data we want to store for every object that is of this type and so now they just have one field which is a name so the title is name that's the display name the name which is used in the api is name and then the type is going to be string now of course you can have more advanced types like arrays references booleans i'm going to show you a bunch of those as we write out our user as well as our post okay so just want to quickly run through that now let's create the user schema so i'm going to write the schema in here and then we'll import it from schema.js i just make things a bit cleaner so i'm going to say export default for the title of this it is going to be user okay then we will have a comma let's spell user correctly for the name this will be user with a lowercase and then we want the type this is going to be a document okay and then for the fields this is going to be an array and inside of here we're going to have a bunch of fields so the first field is going to have a title of first name let's get the quotation marks correct here it's going to have a name of this is going to be first underscore name and then we're going to have the type of and then string okay that's all we need for that field for the next field we're going to have last name so we can actually just copy this and just change first to last so this will be last and this will be last all right next we want to have a username so we have first name last name username we're going to have a bunch of other things as well so we're going to say title this will be username the name will be username with a lowercase and then we want the type here to be again a string okay continuing we want to have a photo this is going to be like the profile photo of the user so we're going to say this is title and the title will be photo the name will be photo and then the type will be and this is going to be an image next we are going to put the vial so i'm going to say title this is bio i think we all know what a bio is little description for the user we're going to say the name is the bio and the type here is going to be you guessed it a string actually sorry not a string text because text can store longer piece of data than string since we can potentially have quite a bit of data for the bio we go with text so actually no you didn't guess it we're going with text okay all right so this next field here is going to be following now this is going to be all of the users that this user is following now you also could have say on a user a followers field and then that would contain all of the people that are following them however you only want to have one or the other so pick what you want you can have followers on on the user which contains all the people following them or you can have following which is the people that a user is following i think that makes sense to have what i'm going to put here which is the following field but just want to describe what this is so i'm going to say title this is going to be following the name is going to be following and then this needs to be an array right because we're going to be following multiple users so i'm going to say type array and then this is going to be of and inside of here i'm going to define the type that this array is going to store so i'm going to say type this is going to be a reference type now a reference is something that's going to reference another document so inside here we're going to reference the id of another user so i'm going to say 2 because that's what we need for reference and then inside of here i'm going to say type and then user this essentially says okay we're having an array and then this is going to be of references and these references are going to be two users now one thing i can also do here is add what's known as a validation so i can say validation and i can say rule and i can write a function here and this rule can go to rule dot unique and what this will mean is that we need to have unique values inside of this array all right hopefully that makes sense but that is what we're doing for the following field again an array of references to a user and when we reference the user we're just going to need the id to that user and i'll show you how we make that later on all right the next thing that we want here actually where am i going to define this it looks like i'm going to define it right before this square bracket is going to be created at so i'm going to say for the title let's put this down let's have created at okay then we're going to have name this will be of completely messed this up created at and then the type for this is going to be date time all right so thank you autoformatter for fixing that for me we have title created at name creator. type datetime we just want to know when we created this user great so that's really all we need for this schema here for the user i'll slowly scroll through it so you guys can have a look at everything again all this code will be available from the description next we're going to do the schema for the post all right so for post we're going to say export default and then similarly to before we're going to say title this is going to be post we're going to say name this will be post we're going to say type this will be a document and then we are going to have our fields like this which will be an array and we will define the fields so on a post what do we need well we need a photo so we're going to have title photo name photo type and this is going to be an image okay moving on to the next field we're going to have a description for the post so we're going to say title description name description autocomplete is coming in clutch here and the type is going to be type text okay continuing we want the author of the post as well as when the post was created so i'm going to say title created at okay let's go name why did it do that oh name created at let's actually do created underscore at and then for the type this will be date time okay let's make these on new lines though autoformatter can you fix this for me nice and lastly we want the author now the author needs to be a reference type to the user that created this post so we're going to say title author excuse my bad typing here name author and then type is going to be a reference and it is going to reference two and we're gonna put type and then user inside of here all right so we've now created our two schemas we have our post schema as well as our user schema so let's now go to schema.js let's import these two schemas and we'll use them inside of here so what i will do here is simply say import user from and then dot slash user.js and then import and what's the other one that we wanted we wanted a post from and then dot slash post.js nice and then i put my types in here so i'm going to say user and post doesn't matter the order that you place it but now we're going to have these two schemas inside of our data set all right so we have now set up the database we've set up the front end we have set up the back end let's now rerun sanity studio and see if we can view these different uh database models that we've created so let's run a new terminal here okay a new command prompt and let's cd into the database and let's go sanity start and then let's have a look at the sandy studio and view these new models all right so it is now compiled so let's launch this in google chrome let's have a look here at the sandy studio it's logging me in and now notice we have user and post over here we can actually make a user in a post if we want right one of the great things about sandy studio is the fact that i can do this and maybe i give someone who is not very tech savvy in my organization access to this tool and then they can just come in here and they can make a new blog post they can make a new user they can make whatever it is that they want by looking at a graphical user interface right so my first name last name username photo bio following create it out i'm not going to fill this out but of course you can see how easy it is to actually do that okay so we don't need that open anymore let's actually close sandy studio and now what we'll move on to is actually writing some react code now i understand this video has been long so far with all the setup steps but that was anticipated at the beginning there's a lot that we have to do so let's now open up our front end and start writing some react code and first of all i want to make some new components so just kind of template out the components that we want and then we'll fill in those components one at a time so i'm going to say new file the first component that i want is going to be all posts okay not ks this is going to be dot js i also want a component that's going to seem a bit weird right now but this is going to be alert and then dismissable okay i don't know if i spelled that correctly i think i did okay that's fine this is going to be an alert that will show up on the screen you saw that during the demo but we'll need a component for that so let's just write that right now next we're going to say create post dot js that's going to be for well making a post we're then going to have edit profile this is going to be kind of a i think it's called a modal or like a pop-up that will show up on the screen that lets us edit a post as you saw in the demo and then we're going to go login.js then i'm going to make a new file this is going to be profile.js we're going to have another component this is going to be profile item.js now this is actually going to be what shows up in the search bar for each one of our profiles or each one of our users and then we're going to have search.js and we're going to have lastly sign up dot js all right so i think that is pretty good now for all of these components what i want to do is just write the kind of boilerplate function for them just so that i can import them and start setting up my routes for each of these different pages so inside of all posts i'm just going to say export like this default and then this will be a function all posts okay and then inside of here for now i'm just going to return a p tag and this p tag will just say if we do this correctly all posts just so we know what page we're on again this is just for the rooting so let's copy that and let's put this inside of all of these so for alert dismissible this will be alert dismissable okay and then here this is gonna need to be alert dismissable as well let's do a space though for create post you guessed it we're gonna say create and then post and then this is gonna be create post okay continuing we're going to have edit profile so let's make this one edit and then profile see how good the autocomplete here is edit profile we want login okay just trying to come up with words to say here as we go in and fill all these in next we're gonna have profile okay this will be profile we want profile item profile item and inside of here profile item with the space we want search we are almost done here last one coming up and the last one that we want here is going to be sign up okay so let's go sign up and then sign up okay apologize for that we just wanted to write all the basic functions so that now we're able able to see what page we're on when we start handling the routing we now close all of these we no longer need them we want to go inside of app.js and i want to start setting up my react router now my react router is what's going to allow us to route between different pages and that's why i wanted to create all this component so now i can import them and then route between them so let's just go up here and let's start by importing react and let's also import use state okay and we're going to do this from the react module okay then i'm going to import all of the components that i just created so i'm going to say import and then this is going to be all posts from and this is going to be dot slash and then allpost.js now if you're hearing something right now that is my cat running around my keyboard so i apologize for that continuing i'm going to say import and then we're going to import the alert dismissible from alert dismissible okay dot js then we're going to import create post from dot slash create post then i'm going to import edit profile from edit profile i actually don't think we need the dot js here so i think i can remove that then i'm going to import login from dot slash login i'm going to import profile from profile and actually i don't need edit profile sorry i just need profile i will import search okay from dot search and then lastly the sign up page import sign up from dot slash and then sign up okay all right so while we are at our imports here let's import what we need from react router dom as well so i'm going to say import and then this is going to be the browser and then router as well as a route as well as the routes as well as link from and then this is react and then hyphen router dom now if you haven't never used this before again this will allows us to route between the different pages and make it so if we go to say slash signup it actually brings us to the slash sign up page so for our div we can leave the class name actually yeah we'll leave the class name empty for right now and we'll worry about the css later and i'm going to start actually building out the html of the page so the first thing i need to do here is put browser router now anything inside of here will allow us to actually route between it okay so browser router is kind of where we're able to write routes as well as where we're able to have links and a nav bar and all this kind of stuff so that's why i'm writing this out then we're going to set up all of our different routes then i'll make a nav bar so inside of here i need to write this roots tag and then i need to end the roots tag and this is where you're allowed to define roots you can only do that inside of roots so make sure you don't try to make a root outside of it and then i will make my roots so i'm going to say root okay the element for this root is going to be equal to we're going to start with all posts now all posts i really could have called like your feed but that's fine we're going to render the all post component for this route the path to this is just going to be home so when you go to the home page it's going to bring you to your feed which will render all of the posts on the screen or it will show only the posts of the people that you're following uh depending on uh what is it if you're logged in or if you're not logged in so i put exact here now what exact does is just make it so the path has to match this exactly if you don't have that then i could go to slash and then anything else like slash hello slash world it would also match with this path just because it's only a single slash so that's why i have exact okay now continuing we're going to have another route i'm going to say root element equals it doesn't really matter the order that we do this so let's just do login i could render it that way but i want to render it just with a slash for the path for this we'll say this is slash login now we could do exact but it doesn't really matter to me here because if you type slash login and then slash something else um that's fine we used to bring you the login page um i think it's fine to just have login like this okay now continuing not router we want to root the element for this one might as well just do sign up so let's do sign up okay and then the path here is going to be equal to slash sign up uh and then we'll have slash nice okay continuing i'm gonna have root element equals and then the next one that we want is profile so i'm going to say profile like that and then this will be path is equal to profile okay we need another root uh where's my autocomplete here root element equals yeah we want search that's good for the path we'll go with slash search okay and there's any other ones that we need uh we need create post okay let's do create post we'll say root like that and i keep saying router i mean root sorry if you see router that's not what i meant to type i meant to type root okay and then element is equal to and then this is going to be uh what was this we need to create posts so let's have create post the path will be slash create dash post okay and then we can end and for sign up just because my ocd will kill me here let's go with sign and then hyphen up and i realized that i made a small mistake here guys let's just fix this to be root as opposed to router again i don't know why i kept typing that uh it's meant to be root not router and i'm sure i'm mispronouncing that and you guys are making fun of me but that is fine okay so now we have all the different routes that we need so we can go to login sign it profile search create post we'll need to make a few more specifically we need one for logout i'm also going to do something here for profile i will actually have a variable in the name and i go with username now what this means is that i'm going to type slash profile slash and then the name of the user that i want to go to and then this will be passed implicitly to the profile component so i'll be able to know uh what the parameter was essentially to get to this profile page okay so now that we've made those changes let's run our front end so let's go cd dot dot let's cd into the front end let's go npm and then start and we'll go to local host colon 3000 and let's just see if we can go to some different routes here alright so i've just opened up my react application here notice i'm on the all post page which is what happens when we go to the default route now let's try sign up okay brings us to sign up let's try login okay brings us to log in let's try profile uh we'll go to profile slash tim actually because we need a variable okay brings us to profile i and i'm sure the other ones are going to work as well there we go we have now set up the react router all right so now that all of that is working i want to build out a nav bar so to do that i'm going to bring in a few things here from