FARM Stack Course ( FastAPI , React js , mongoDB ) | in 1 Hour

[Music] hey what's going on guys this is big brace i hope you're all doing well welcome to the farmstack course i wanted to create this course for a long time unfortunately i couldn't do it earlier but it's better later than ever in today's course the technologies that we're going to be using are some of my favorite ones we're going to work with fast api react.js and mongodb which are the components of the farm stack and you probably have heard of the suffix stack in other terms like the mern stack which stands for mongodb express react node.js and what's meant by stack simply is a set of technologies that you can use together to create a web application for instance so farm stands for fast api react and mongodb and we're going to build our app using fast api for the back-end server react for the front-end client and mongodb for the backend database server so this is for data persistence and in my opinion firm stack resembles the mean stack or the merge stack even the only difference is the fast api because react and mongodb are the same in the three stacks in mean we use angular and node.js and in mern we use react and node.js fast api of course is a modern and a fast web framework for building apis created by sebastian ramirez and this uses ascii and ascii stands for asynchronous server gateway interface and this is just the interface between your application and the server and the response time is lightning fast and this is one of the big advantages of having ascii server implementation on your side also fast api one of its biggest features that it supports core routines and concurrency without the need to import the asyncio module in python and in a way it's faster than express which is node.js framework and express is the e in the mean and mern stacks as we said so fast api also has interactive api documentation and it helps you testing the different http requests like get post put and delete visually using open api which is itself based on json schema and i have a full crash course on fast api you will find a card appearing now if you're interested to check it out react of course is the most famous javascript front and library for building user interfaces especially spas or single page applications as per the stack overflow survey for 2020 react.js is just below jquery so as you can read here that jquery is still king but is slowly losing ground to react.js and angular year over year as per the most loved framework is just a second after asp.net core and the most wanted actually is react.js the most wanted in the market and i will leave the link to the surveys for stack overflow in the description section below if you would like to check out other statistics very interesting you'll find here that the most dreaded language is vba and i've been working with vbe for some time now at work especially the debugging system it's really awful so no wonder that it's the most dreaded language all right following that objective c pearl assembly c php and so on so surprisingly rust is the most loved language i'm following that type script then python but actually the most wanted language on the market is python followed by javascript then by golang and i also have a react tutorial for beginner backend developers you will find a card appearing now check it out if you like last but not least we need data persistence so we'll be using mongodb which is the letter m in farm and i never did a tutorial on mongodb on the channel so this is the first one and i'll try to be as much detailed as i can and i've received a few requests to create a crash course on mongodb and mariadb so mongodb course is almost ready and will be uploaded soon mongodb is a nosql database management system and nosql stands for not only sql and it's based on what we call the document model or collections of documents so if in the normal sql system like mysql postgres or oracle if you have a table if you have first a database that consists of different tables and each table has some rows and columns here in the nosql world you have a collection of documents and a document is just a file written in json format and converted to bson or binary json which is the zeros and ones for the computer to compile and understand so in sql world if you have a database of different tables and each table has a set of rows and columns in mongodb you have a database also but it consists of collections that consist of documents and each document has different fields like id name last name for instance all these are fields in mongodb document last word i would like to say about mongodb that it was created in 2009 and it's the leading nosql system on the market now so enough me talking and let's go ahead and start by creating our application our application basically is a crud application so the front end is going to send http requests to the backend the backend is going to fetch all the data from the database in mongodb the mongodb is going to send the data to fast api to the backend server then the backend server using axios technology will send their response to the react front end which you will be seeing on the screen so from front end to back end then backhand to front end all right um you will need obviously to have python installed you will need also nodejs because we will need npm in order to create our react application as far as mongodb you will need to have an account on mongodb atlas so you can click on start free and you will feel the data here your company how are using mongodb your email first name last name and password and once you do that you will have here look included with your free cloud database you will have one free tier um to have a cluster of computers with 512 megabytes of storage okay it's just it's not physical computer but logical one so you'll have shared ram you'll have 512 megabytes of storage highly available replica sets end-to-end encryption automated patches and rest api okay all of that is included in your free tier all right so once you log in you will not find this in clusters you will find a green button in the middle telling you to create a new cluster okay so this is cluster zero this is here how to connect your collections and we said that collections is the equivalent of tables in sql world um you can also have another cluster but i'm not going to do it because you're allowed only with one cluster i have my region here in belgium because i live in poland and i've already tried the one in germany but it was not so efficient so i created a new one with belgium with google cloud okay you will have different options so let me show you you will have google cloud you will have azure um i used google cloud as you can see here and i use the one you can see here that free tier available all right if you're in brazil in the us in australia finland all of these are free the ones only with the free tier available tag and once you know what you want to choose you can click on it and create free cluster i can create another one because i already have a free tier a free cluster and you can see here that they charge you for a second one for 0.44 dollars per hour all right um yeah but it's just pretty straightforward you will choose whatever and then you will hit on create cluster it will take some time to deploy and you will be ready to go how you can connect is by clicking on connect and you will have different tools so you can connect to your application you can use the shell which is just a simple terminal to interact with your database using command line and using the mongodb compass i highly recommend that you install the compass and the shell so we're back to the mongodb homepage you can go to software click on community server and you'll find here on-premises all right mongodb locally so you have mongodb community server you can download that so mongodb offers both an enterprise and community version of its powerful distributed document database so um don't mind the enterprise just focus on the community server so you can download that it's um microsoft installer msi file so this is the first thing you need to do also you need to go to developer tools and here you can download the mongodb compass and the mongodb shell okay so mongodb compass and you can click here on try it now and it took you back to the tools and you can download it here and the same thing goes to mongodb shell and if you're not sure how to do that please let me know in the comment section below and i will create a quick video to show you how to set up everything in the path all right in the environment variables so once everything is installed properly you can go ahead and type mongod version and you will get this db version 4.46 okay with this json data okay the version get version and so on also to access the mongodb shell you can go ahead and type sh and you can take a look to the available databases so you can say show dbs and you will get the default databases provided by mongodb okay and let me show you the mongodb compass so this is how it looks like so in order to connect we can say db colon slash slash 127.0.0.1 or localhost on port 27017 click on connect okay if you want to create a database you can create that easily let's say for instance we will have a database with the name of sales let's have a collection of employees for instance okay and create database and immediately you have your sales database created and if you refresh here show dbs you'll find that the sales has appeared here so let's roll up our sleeves and start by creating our backend server with fast api welcome back so the first thing that i want to do is i want to create a folder that will contain both back-end and front-end folders so let's go to the desktop and let's create a folder farm stack underscore project first we will care about the backend folder so let's create that and let's open this with visual studio code all right great so the first thing that i want to do here is to create requirements.txt and this is for the dependencies and we'll need to have three dependencies so the first one is fast api obviously so fast api with version 0.65.1 also i will need uv porn and uv corn is just a fast ascii server implementation that helps in the interaction between your application that we're going to build and the backend so this is the core of fast api especially that fast api is an asynchronous framework which heavily depends on synco8 syntax and therefore the use for an ascii server was essential so the version is 0.14.0 and also i will need motor and motor is 2.4.0 motor actually is a full featured non-blocking i o mongodb driver so this works for python in general and it's working with fast api of course in our case and also works with their native framework tornado is also an awesome asynchronous framework and motor works with all kinds of async i o applications as mongodb driver so this is what motor does all right so let's go ahead and activate our virtual environment i use ppnv if you don't have vpnv installed you can install it via pip install pip mv all right but i have it already so i will not do that um let's go ahead and activate that by saying pnv shell all right great now we have our virtual environment activated and the pip file is created but still we will need to install the dependencies so what we're going to say is ppnv install dash r requirements dot txt right and hit enter and let's close the requirements we don't need that anymore and i will need three files first is main.pi so main.pi i will need also one for the database so we'll call it database.pi and the third one for the model just to create our main to-do class all right so let's go ahead and start importing from fast api i want to import fast with a capital f api all capitalized and also i want to import something very important which is called course middleware so from [Music] fast api.middleware dot course all right i want to import course middleware and course stands for cross origin resource sharing i talked a lot about this in all our django projects course refers to this situation when your front-end client which is running on the browser it has naturally javascript code this javascript code communicates with your backend in our case communicates with our fast api back-end server and in this case the back-end is in a different origin than the front-end and origin simply is just the combination of protocol domain and port so you can see here that the protocol can be either http or https domain for example our localhost or whatever and the port might be any port so react will have for example port 3000 and our fast api will have a port of 8 000 and we will need some sort of permission for the backhand to interact with a different origin a different port in this case so this is what we're going to do okay let me just close that and let's just instantiate on the fast api class by creating an object called app okay so this is app object and here i want to specify the origins so in this case the localhost on port 3000 of react and if you won't do this there will be no connection between both there will be no permission okay for the headers the methods so we will need to allow headers and methods okay so in the origins this is going to be a list with https colon slash slash localhost column 3000. next thing that we want to do is we want to take our app object and we want to add the middleware add middleware this one okay so this method will take first of all the course middleware of course middleware next i want to allow origins to be equal to the origins list also the credentials we will set it to true and i want to allow methods we will set it to everything or star and also we want to allow headers and let's just go ahead and create a basic route so app at app this is the creator dot get method and just type slash this is an empty route basically we want to create a method or function we'll call it read root and we want to return something like let's say ping pong all right so let's check out first um if the main page is working or not and in order to run the server we'll say uv corn main app and i want to work on a reload mode so you don't have to disconnect from the server and reconnect again in order to see the changes on the application this happens instantaneously once you refresh the page all right perfect so let's go ahead and open that and we get ping pong now the cool thing about fast api that you can access this documents it's called swagger swagger ui and i've talked about this many times in all my fast api projects on the channel in the course i have also another video um on fast api's introduction and i showed everything in details about the swagger ui right so make sure to check that out all right great so this is good but this is useless to us it's just to make sure that the server is responding so basically in a to-do application we need four main four main operations right the crowd operation so we need to read all to do's we'll need to post a to-do update and delete and we can also get a to-do by id if you want a specific to do you can get it by its id all right so let's work on that very quickly let me just minimize this for now and maximize this so let's have another decorator dot get and here we want to access api slash to do let's now work with the sync await code so we will define a method we will call it get to do and open close paren column and for now we'll say return just one so i will need the same code basically for um the to do by id so here i want to have an input of id all right so i need the to do by this specific id and i will change the method naturally so we can say get to do is the same by id and here i will pass the id as a parameter or an input i also want to post an id so it's the same code as the get but instead of get we will change that to post and here we'll say um post to do and we will pass the input as to do i want also to update and delete alright so i will need two more functions okay so let me just organize this a little bit so here i want to update the to do by its id so i will need to enter the id of the to-do that i would like to modify or edit and here i want to change the method we'll say put to do and instead of to do we want the id because we want that id to change and i want to change the actual data of that to do and last but not least we want to delete a to-do okay so also to do by id if we want to access a specific to-do item and we want to delete it so i need to specify the id for that and here i will change the method we'll say delete and instead of to do i want to delete that to-do item with that specific id um fast api object has no oh sorry put there's no um http request called update there are get post put and delete all right so we're good to go let's actually take a look to what we have let's refresh the page and boom we have all the methods that we have created so we have get all to do's post at to do get to do by id put to do and delete to do all right perfect so far so good now what i want to do is i want to go to module.pi and i want to import from pedantic and pedentic actually helps you to autocreate your json schemas from the model so we're going to create a class now and it works like an object relational mapper so it will take from the model and we'll connect with our database that we're going to create in a second so we want to import base model class then i want to create a class called to do with base model as a parameter and i want two things only i want a title which is a string and i want a description description which is also a string and that's all what i need to do so let's close model.pi and let's work on our database now so here what i want to do is to import the to do class from the model.pi so from model i want to import to do and also i want to import the motor module so import motor dot motor underscore sync io okay so this is the db driver all right and let me just open the mongodb compass so everything will be clear to you guys but in the meantime i want to create a client object and this is going to be equal to motor dot motor underscore sync io and i want to access the sync i o model client this one right here and this is essentially for the connection between the database.pi and mongodb so we will need to pass in a string db colon slash slash and local host colon 27017 which is um the default port for mongodb as we said before um this is column all right so this is a very important step and we have our db compass is ready but um we will leave it for now let's continue let's actually create a database i will call it just a database and this is going to be equal to our client dot our database let's call it to do list and inside our database we want to create a collection so our collection which is the same thing as a table in sql so the collection is going to be equal to the database and we want to have a name for the collection let's call it just to do all right so we have a database called to-do list and we have a collection which is called to-do all right great now let's go ahead and work on our main functions so the first function that i want to create here is to fetch want to do so we'll say a sync def and i'm going to say fetch one to do and it's going to take the title as an input and here the document is going to be equal to the collection dot find one and i want to specify the title to be equal to whatever title is going to be entered okay so title is set to whatever title here and here also i want to wait for that all right and then i want to return that document okay so this is the first get so we want to get one to do um there is no doubt here so in order to get one to do we get it by title and take a look to model this is the title or the id which is set in our function in the main.pi file okay so i hope that's clear for you guys next i want to get all the to do's so we'll say def fetch all to do's and i don't want any parameters and let's create a list of to-do's and let's declare a variable called cursor and cursor is going to be equal to the collection dot a method called find and what we want to do essentially is to loop over any document in the cursor so let's again use the async keyword for document in cursor i want to append in the to-do's list whatever to do with any document okay so this is basically the data that i'm going to retrieve and i want to return everything in that collection and finally i want to return all the to do's all right so don't forget that this to do is the main class that we have defined in the model.pie next thing that we want to do is to create a to-do so let's actually create a by defining create to do function and here we want to take a to-do as the main parameter or main input so the document is going to be equal to the to-do and oops what did i do sync then i want to declare a result variable in order to await for the collection to insert that document in the collection so let's wait for the collection to insert one this is a method called insert one and we will insert whatever document that we're going to create okay whatever post or whatever to do item that we're going to create and also i want to return that document next we want to update the to-do so a sync def and we will call it update to do and this takes the title and the description okay both are set in the model class in the in the model.pi in the to-do class okay and by the way if you're wondering what's insert one method what's that uh find as well these are mongodb functions or methods okay so we are writing mongodb code actually inside our python file so the motor module which is the mongodb driver helps us to connect the database.pi file with our mongodb database alright so let's get back to our code so await the collection to another mongodb method called update1 so how mongodb works when we want to update one item we want to choose a specific item and in order to do that we will need to have a criteria so which item do we want to update in this case we want to choose by the title so um the title whatever title is set to and next i will have the actual item that i want to update so i want to use the set operator by using the dollar sign set this is inside double quotes and this is set to whatever the description that i'm choosing and the actual description that i'm updating so we will have another set of curly braces and here i want the description that i have chosen to update for the actual description that i want to enter or update all right i hope you guys following then i want to render that document or return that document so i will declare another variable called document to await the collection dot find one with the title that corresponds to that item that i have updated okay and we'll return that document all right so this is the update to do the last method is to delete a to-do so i'm going to call it remove underscore to do and it takes a title as a parameter so if we want to delete an item we should enter the title first and let's wait for the collection to delete one which is another mongodb method and we'll set the title to be equal whatever is the title that we have entered and we want to return a boolean value and we'll set it to true all right great so let's save that and let's go ahead to main.pi in order to modify these functions that we have created based on these functions in the database file right so this is 3000 the react.js port i want to import also from fast api http exception and this is just for errors and exceptions so actually this class what it does it generates some exception information for us all right perfect then what i want to do now is to import from database all the functions that we have created so let's actually go to database.py and let's take this from here copy so this is the first one all right so we have imported the functions from database file next what we want to do is to work on these methods and let's start by the get to do um in order to return just one we want to have a response right so response is going to be equal to a weight for fetch all the to do's which is there you go all right one of those functions that we have created in database dot pi and you can see here that um this actually returns a cool routine all right and i've talked a lot about core routines concurrent code concurrency in general in different videos before i will leave all the links in the description below you can check them out so we want to fetch all the to-do's and we want to return the response the second function is to do by title so we'll substitute the id with the title okay and we want the response model to be equal to the to do class so the response model is equal to the to do class in our model.pi file and here also instead of id we want to title um let's have a response as well and our response is going to be equal to fetch want to do by title and don't forget the await and i want to handle exceptions so i will say if the response if response means if response is true um we don't have any errors then we will return the response otherwise we will raise an http exception and this is going to be 404 and the 404 is a status code for page not found then what i want to say is there is no to do item with this title all right let's actually make it nicer so let's put a format string and let's return that title whatever title that we're trying to retrieve so let's move on to the next function which is posting a to-do i want also the response model to be equal to the to-do class and here i want to set the to-do to be equal to the to-do class and i want to take that to do take a look here we have set the document to to do and we are going to insert a document in the collection so this is a json but we want to convert that to a dictionary in order to do that we will declare a variable called response and response is going to be equal to the create to do function that we have defined and i will take the to do and i will convert it to dictionary and again i want some exception handling so respawns then we return the response otherwise i want to raise http exception and here we'll say we'll enter 400. something went wrong by the way 400 is the status code for bad request okay so you can type something went wrong or bad request all right the next function that we want to modify is put to do so we want to change the id by let's actually change all ids by title we will take the response model also and we will set it to the to-do class and for the main function we want the title we will set it to string and also the data we will set it to string and data also we want to change it to description or desk in the database in the update function you see here title and desk so the response is going to be equal to the update to do function and this takes the title and the description and also i want some exception handling so again um we can take this one and we'll paste that here with the same status code 404 and last but not least we have the delete function so let's remove that and let's have a response as usual and we will take the remove to do remove to do function and we'll remove the item by the title if you remember here we have set the title and also i want some exception handling so if response is returned is okay we want to return a message saying that successfully deleted to do item otherwise we want to raise exception we can take this one i'll paste it here and that's basically it so we have the delete the put the post get to do by the title by id and get all to do's all right cool we are pretty much done with our database side now let's go ahead and check out the swagger ui or the fast api docs and how we can connect it to the mongodb database and we'll see this interaction with the mongodb compass all right so let's do it all right so we have here our fast api docs or the swagger ui where we can interact with our database and i have on the other side my compass is opened and let me show you actually i was connected let me disconnect for the moment and show you what i did so as i showed you at the beginning of the tutorial you can copy mongodb column slash localhost all right and connect and boom you're connected and here you have the to-do list that we have created and this is because of the motor mongodb driver so let's actually try that out let's go ahead and try to post a to-do so let's say um to do item one and in the description let's say for instance walk the dog execute right we didn't have any problems so let's check that out here in the to-do list to do and boom we have to do item one walk the dog all right uh let's reset cancel let's close that and let's check out here in the get to do so try it out execute and we have the same to do item one walk the dog let's have another one for example posts and let's say to do um item two and here let's say run two kilometers all right then let's execute okay cool let's refresh here and boom to do item two run two kilometers all right so it's working perfectly our fast api back-end server is interacting with mongodb database all right so let's delete um to do it should be the same as in the title so let's say that i want to delete to do item 2 so to do item space 2 execute all right successfully deleted to do item and if we were refresh it disappeared all right so in the next part we're going to move on to fleshing out the front end with react.js welcome back so as our back end is working perfectly and interacting with the mongodb server we will now need to create our front-end side and we will make it communicate with the back end so let's go ahead and create our react app and i will use create react app cli for that but before we will need to go to desktop and we will need to access farm stack underscore project folder all right and just to make sure uh that we have only one folder which is the back end and now we can use that command npx which stands for node package execute and i will use create react app and for more information about create react app please check out the card that will appear right now and this will take you to a react and django video tutorial for back-end developers so there i talked a lot about create react app what it is and what it's doing for your project following that the name of the project or the name of the folder so we will call it front-end and the installation of the projects is going to take some time so i will pause the video here and i will be back when it's all done all right cool so we have our front-end project ready in order to run it we need to cd to front end or to change directory to front end folder then npm start alright great so this is the default react application the development server is running on port 3000 or listening on port 3000 just before we go on i need just to exit the server and we will need to install two things the first is axios so sending requests from the client to the server and getting the responses from the server or the backend server to the client is the role of axios also we need bootstrap so boot strap and yeah that's all oops what did i do um npm install axios bootstrap all right cool so let's go ahead and open that with um visual studio code just let's cd out and open the whole folder with visual studio code by the way this js hint has been bothering me for some time if you have the same issue or if you dealt with this issue please let me know because i've installed js hand globally but um seems that nothing happened really but i think it won't affect our project so let's ignore that for the moment and let's go ahead and import bootstrap uh slash dist slash css slash bootstrap dot min dot css all right just to import bootstrap this is the first thing we need to do in index.js okay and that's pretty much it for index.js which is the main entry point for our application in app.js we're going to spend most of the time um i want to actually get rid of all that and let's just type hello world farm stack all right cool let's delete the logo we don't need that so you see even if you have here a red line yellow line it really doesn't affect anything it's just um it's annoying really if you happen to know the solution for this please let me know in the comment section below because i really couldn't find a suitable solution to solve this problem so let's get rid of everything we will leave the app let me actually delete all of that i will leave the app this is the class name for the app application it has a class name of app so here we will have some just general settings so the text align will leave it to the center margin we'll give it zero padding we'll set it to zero and font family we will use this one all right and that's all so we'll close the app.css and let's go ahead and work on the app file so let's just delete that um or we will leave it just we'll leave it just for sanity check so before we do anything we will need to import react first right so just make this bigger for you guys so we will import react also we will need two functions use state and use effect from react we also want to import axios from axios and also we want to import the bootstrap so let's go here we'll import bootstrap let's first work on the visual side then we will work on the logic so let's go ahead and have a div with class name of app with list group item these are bootstrap classes also we want to justify content center align items center with a horizontal margin set to auto so in order to add styling to jsx uh we will have double curly braces and inside you can enter whatever style that you want so i want to set the width to 400 pixels and also i want the background color to be white and the margin top to be 15 pixels and inside that div i will have a title with h1 tag we will call it task manager alright great so this has a class name off card with text white primary background which is the blue one and margin bottom set to one below the task manager i want to add h6 tag with three words fast api react and mongodb then i will have another div with the class name of card body inside that main div i want to have an h5 tag with a class name of card and i will say add your task this has a dark background with margin bottom three and the text is white to have the contrast the next thing that i want to do is to create two input fields one for the title and the other one for the description and a button this button is to add your task so in order to do that i will wrap everything around a span this pen will have a class name of card text so this is the first input and this is the second input for the description so both they have mb2 or margin bottom two with form control with different names title in and des in and both they have placeholders so one with title and the other one with description the next element in our application is the add task button so it has a class name of btn with btn outline primary alright so i've given it a border radius with 50 pixels to give it that rounded shape around the button and also set the font weight to bold and this is everything inside this pan so the idea here is when you will enter the title and the description and you will add the task the task will appear below here with one button only which is the delete below this pane and on the same line with the add your task h5 tag i want to add another h5 tag with your tasks let's actually give the button some margin bottom in order to have some space so mb will set it to 2. that's better and then what we want to do is to display all of your to-do's below your tasks all right so let's have a div inside that div we should plug all of our to-do items and this should be an external component and down here below i want to create a copyright mark and you're free to change the colors if you want of course this has a background of warning which is the yellow one right with a class of card text dark bg warning i'm padding y on the vertical axis with one and margin bottom of zero just don't forget to delete that div below and that one because i've written it again okay so it's the same thing once we save nothing will change all right so before we move on and create our components folder with the different components there are a couple of things that we need to do in our function the first thing we need to do is to create different variables one for the to-do list one for the title and another one for the description and all of them will be set to use date so set to do list will be set to you state with an array of empty object and inside here we will append items each time you will add a task also we will set the title and we'll use the state for just anti-string nothing for the moment the same thing goes for the description and once you add a title and description hit add task everything here will change so this is the usefulness of use date function the next thing we want to do is to read all the to do's for that i will use use effect method and we will use use effect in order to accept the http request methods like get post and so on so the first thing we want to do is to read all of the to do's and this what we'll do is that it will send a get request to the fast api backend server okay then this callback will return a promise and we handle promises with dot then and having a response as an input we should access all the data inside that input or the response all right and all of that is wrapped inside the set to-do list that we have defined here above and the last thing we need here is to post a to-do to add a task actually when we click on the add task button so this add to do handler variable which is set to a callback function which doesn't take anything as an input returns that post request so the first parameter is the origin so http localhost port 8000 for the api and to do and we want to display the title for whatever title it is and the same for the description and then we have a callback as a response that goes for the response as an input and we can console.log press or we can just alert address this is just for verification step now we will need to update both input fields and the add task button all right so the first input field which concerns the title we will update it with the unchanged attribute this takes an event as a parameter then it returns set title which we have set here above and inside the set title we have a parameter of event.target.value the same exact thing goes for input so input also we will have onchange attribute with an event that set the description for event.target.value last but not least we have the button so for the button we have add to do handler function here so the button should be updated in order to reflect the changes that will occur when we click on the button and don't forget to re-add the margin bottom three in order to push the your tasks a little bit below so this is pretty much everything that we need to do for app.js the last thing that we need to do is to add the to-do items inside both div tags so let's go ahead to our source folder and let's create a folder called components and inside components i will create a file i will call it todo.js and another file called to do listview.js to do list view.js first of all let's go to to-do and let's import axios and react now i want to create a to-do item function that it will take as a parameter props inside that function i will declare a variable called delete to do handler and i will set this to a callback function that takes title as a parameter in order to delete whatever to do item that we want to specify by the title and what we want to return actually is the item itself and next to that item we will have a delete button so you can see here we have a div with a paragraph span with the style and we will enter or we will plug the props.to do dot title so the title first and this is going to be bold then a column and then we want to have the description next to it and then after we will have a button with on click attribute is going to be set to a callback function which doesn't take anything as a parameter and it will return the delete to do handler function that we have created above here again it will take props.to do the title and why is that because we want to search that item in function of title so the main criteria for deletion is the title also we'll have a class name with a button and all of that is again bootstrap classes so now we have our to-do.js ready we want to import that in the to-do list views.js but before we do that we need first to export the to do item function all right in order to import it in the to-do list view.js so we will import the to-do item from current directory where is the to-do.js all right and then i will need the function that i'm going to plug inside my app.js here so all the items that will appear below should be created in our to-do listview.js so let's go ahead and create that function we'll call it to-do view and it takes props as a parameter and what it will return simply ul or unordered list and the do list dot map which is one of the array methods like reduce filter and sort and we're going to map whatever to do and plug it inside that to do item so that to do item that we have imported from the to do.js here all right so this is how it's working and let's not forget to export it so in order to test everything together let's go ahead and open our back-end server so we'll go to back-end and uv-corn main app load okay good so it's listening on port 8000 so if we will refresh the page okay cool i'll just make this a little bit bigger there is something very important that we forgot to do is to import the to-do view from the to-do list all right so we'll need to do that below the bootstrap and now instead of that comment we will add our actual to-do item all right perfect so we have our front end running on that instance of the terminal and we will need also to open a new terminal instance for the back end so uv corn main app reload okay great so let's open our fast api swagger all right so for the moment our database doesn't hold any data so this collection has no data as you can see here in the mongodb report um on this side we have our backend server our fast api server this is the react application our client and here we have our database server our mongodb database server so let's try to add a to-do item so we'll say to do one study rust language add task ambu to do one study rust language all right and if we refresh here we will have this document created in our database so we'll have an id which is very similar to the primary key in the sql world this is auto generated by mongodb we'll have our title and description right let's try to add another one to do two run 10 kilometers add task refresh the same sleep at 9 00 pm add task refresh and so on so you can see what's happening if we'll delete let's say um to do two delete it from here refresh it will disappear let's add another one so let's say to do four sketching at task so it adds below and if you will go to the back end you will find the same information so let's try to access actually api slash to do and you will find all of our to-do's all right everything here similarly in the docs when you will hit when you will click on get to do try it now or try it out execute you will find your to-do's this json format all right and let's refresh that as well so to be identical okay so this was an introduction to the farm stack and how we can work with the three technologies if you like the video please like it share and subscribe to the channel and i appreciate your support guys thank you very much if you have any questions please let me know in the comments section below and i will see you in the next video take it easy

Channel: Bek Brace

Views: 7,431

Rating: 4.9487181 out of 5

Keywords: FastAPI, MongoDB, react JS, farm stack, full stack application

Id: oGwszbCH5Z4

Length: 62min 8sec (3728 seconds)

Published: Wed Jun 16 2021