background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon

Download "FARM Stack Course - FastAPI, React, MongoDB"

Download this video with UDL Client
installarrow down icon
  • Video mp4 HD+ with sound
  • Mp3 in the best quality
  • Any size files
Video tags
|

Video tags

farm
stack
course
fastapi
react
mongodb
Subtitles
|

Subtitles

subtitles menu arrow
  • ruRussian
Download
00:00:00
In this course you'll go to the farm. The farm stack  is FastAPI, React, and GraphQL. Bek Brace will  
00:00:07
teach you how to use this stack to make a full  stack web app. Hey, what's going on guys, this is  
00:00:12
big breeze. I hope you're all doing well. Welcome  to the forums. That course in today's course,  
00:00:17
the technologies that we're going to be using are  some of my favorite ones. We're going to work with  
00:00:23
fast API, React js, and MongoDB, which are the  components of the farm stack. And you probably  
00:00:30
have heard of this suffix stack in other terms,  like the myrn stack, which stands for MongoDB  
00:00:36
Express, react, and Node JS. And what's meant by  stack simply is a set of technologies that you  
00:00:42
can use together to create a web application,  for instance. So farm stands for fast API,  
00:00:48
react, and MongoDB. And we're going to build  our app using fast API for the back end server,  
00:00:54
React for the front end client, and MongoDB  for the backend database server. So this is for  
00:01:00
data persistence. And in my opinion, farm stack  resembles the MEAN stack or the myrn. Stack even  
00:01:06
The only difference is the fast API. Because react  and MongoDB are the same in the three stacks.  
00:01:12
In Maine, we use Angular, no GS, and in  myrn, we use react and Node JS. Fast API,  
00:01:18
of course, is a modern and fast web framework for  building API's created by Sebastian Ramirez. And  
00:01:25
this uses ASCII. And ASCII stands for  asynchronous server gateway interface.  
00:01:31
And this is just the interface between  your application and the server.  
00:01:35
And the response time is lightning fast. And  this is one of the big advantages of having  
00:01:40
as the server implementation on your side also  fast API one of its biggest features that it  
00:01:45
supports coroutines and concurrency without the  need to import the async IO module in Python.  
00:01:51
And in a way, it's faster than Express, which is  no GS framework. And Express is the E in the mean  
00:01:58
and myrn stacks, as we said. So fast API also  has interactive API documentation. And it helps  
00:02:05
you to think the different HTTP requests like  get post put and delete visually using open API,  
00:02:11
which is itself based on JSON schema. And I  have a full crash course on fast API, you will  
00:02:17
find a card appearing now if you're interested  to check it out. react, of course, is the most  
00:02:22
famous JavaScript front end library for building  user interfaces, especially sbas, or single page  
00:02:28
applications, as per the Stack Overflow survey  for 2020. React GS is just below jQuery. So as  
00:02:36
you can read here that jQuery is still King. But  it's slowly losing ground to react js and angular  
00:02:43
year over year as per the most loved framework  is just the second after ASP dotnet core.  
00:02:49
And the most wanted actually is react GS the most  wanted in the market. And I believe the link to  
00:02:55
the surveys for Stack Overflow in the description  section below. If you would like to check out  
00:03:00
other statistics very interesting. You'll find  here that the most dreaded language is VBA.  
00:03:07
And I've been working with VB for some time now  at work, especially the debugging system is truly  
00:03:14
awful. So no wonder that it's the most dreaded  language. Alright, following that Objective C,  
00:03:20
Perl, assembly C, PHP, and so on. So  surprisingly, rust is the most loved language  
00:03:29
following that TypeScript then Python, but  actually the most wanted language on the  
00:03:34
market is Python, followed by JavaScript them  by go Lang. And I also have a react tutorial  
00:03:39
for beginner back end developers, you will find  a card appearing now check it out if you like.  
00:03:44
Last, but not least, we need the persistence.  So we'll be using MongoDB, which is the letter M  
00:03:51
in form. And I never did a tutorial on MongoDB  on the channel. So this is the first one. And  
00:03:57
I'll try to be as much detailed as I can. And I've  received a few requests to create a crash course  
00:04:03
on MongoDB and Maria dB. So MongoDB course  is almost ready and will be uploaded soon.  
00:04:10
MongoDB is a no SQL database management  system. And no SQL stands for not only SQL,  
00:04:18
and it's based on what we call the document model  or collections of documents. So even the normal  
00:04:24
SQL system like MySQL, Postgres, or Oracle, if you  have a table if you have a database that consists  
00:04:32
of different tables, and each table has some rows  and columns, here in the no SQL world, you have a  
00:04:39
collection of documents. And a document is just  the file written in JSON format, and converted  
00:04:45
to be sawn or binary JSON, which is the zeros and  ones for the computer to compile and understand.  
00:04:53
So in SQL world if you have a database of  different tables, and each table has a set of  
00:04:58
rows and columns in mind dB, you have a database  also. But it consists of collections that consists  
00:05:05
of documents. And each document has different  fields like ID, name, last name, for instance,  
00:05:12
all these are fields in MongoDB document.  Last Word, I would like to say about MongoDB,  
00:05:17
that it was created in 2009. And it's the  leading no SQL system on the market now.  
00:05:23
So enough me talking, and let's go ahead and  start by creating our application. Our application  
00:05:29
basically is a crud application. So the front end  is going to send HTTP requests to the backend,  
00:05:36
the backend is going to fetch all the  data from the database in MongoDB,  
00:05:41
the MongoDB is going to send the data to fast  API to the back end server, then the back end  
00:05:47
server using axios technology will send their  response to the React front end, which you will  
00:05:55
be seeing on the screen. So from front end to  back end, the back end to front end. Alright,  
00:06:02
you will need obviously to have Python installed,  you will need also no GS because we will need  
00:06:09
NPM. In order to create our react application, as  far as MongoDB, you will need to have an account  
00:06:17
on MongoDB Atlas. So you can click on Start free.  And you will feel the data here your company  
00:06:26
How are using MongoDB, your email,  first name, last name and password.  
00:06:32
And once you do that, you will have here  look included with your free cloud database,  
00:06:38
you will have one free tier to have a cluster  of computers with 512 megabytes of storage.  
00:06:46
Okay, it's just it's not physical computer,  but logical one. So you'll have shared DRAM,  
00:06:52
you'll have 512 megabytes of storage, highly  available replica sets, enter an encryption to  
00:06:58
meet it patches and REST API. Okay, all of that is  included in your free tier. Alright, so once you  
00:07:06
log in, you will not find this in clusters, you  will find a green button in the middle telling  
00:07:12
you to create a new cluster. Okay, so this  is cluster zero. This is here how to connect  
00:07:18
your collections. And we said that collections  is the equivalent of tables in SQL world can  
00:07:26
also have another cluster, but I'm not going to do  it because you're allowed only with one cluster. I  
00:07:31
have my region here in Belgium, because I live in  Poland. And I've already tried the one in Germany,  
00:07:36
but it was not so efficient. So I created a new  one with Belgium with Google Cloud. Okay, you  
00:07:44
will have different options. So let me show you,  you will have Google Cloud you will have is your  
00:07:51
I used Google Cloud, as you can see here, and  I use the one you can see here, that free tier  
00:07:56
available. Alright, if you're in Brazil, in the  US, and Australia, Finland, all of these are free,  
00:08:04
the ones only with a free tier available tag. And  once you know what you want to choose, you can  
00:08:09
click on it and create free cluster, I can create  another one because I already have a free tier  
00:08:14
free cluster. And you can see here that they  charge you for a second one for zero point $44 per  
00:08:21
hour. All right, yeah, but it's just pretty  straightforward. You will choose whatever and  
00:08:28
then you will hit on create cluster, it will take  some time to deploy and you will be ready to go.  
00:08:38
How you can connect is by clicking on Connect.  And you will have different tools. So you can  
00:08:43
connect to your application, you can use the Mongo  shell, which is just a simple terminal to interact  
00:08:49
with your database using command line and using  the MongoDB compass, I highly recommend that you  
00:08:56
install the compass and the shell. So we're back  to the MongoDB homepage, you can go to software,  
00:09:02
click on community server. And you'll find  here on premises, alright MongoDB locally,  
00:09:10
so you have MongoDB community server, you  can download that. So MongoDB offers both an  
00:09:15
enterprise and community version of its powerful  distributed document database. So don't mind the  
00:09:22
enterprise just focus on the community server,  you can download that it's Microsoft installer  
00:09:28
MSI file. So this is the first thing you need to  do. Also, you need to go to developer tools. And  
00:09:35
here you can download the MongoDB compass and a  MongoDB shell. Okay, so MongoDB compass, and you  
00:09:42
can click here on trade now, and it took you back  to the tools and you can download it here. And the  
00:09:48
same thing goes to MongoDB shell and if you're  not sure how to do that, please let me know in  
00:09:53
the comment section below. And I will create a  quick video to show you how to set up everything  
00:09:57
in the path all right in the environment variable  So once everything is installed properly,  
00:10:03
you can go ahead and type Mongo D version. And  you will get this DB version 4.46. okay with this  
00:10:15
JSON data, K, the version get version, and so  on. Also, to access the MongoDB shell, you can  
00:10:22
go ahead and type Mongo s h. And you can take a  look to the available databases. So you can say  
00:10:30
show DBS and you will get the default databases  provided by MongoDB. Okay, and let me show you the  
00:10:36
MongoDB compass. So this is how it looks like.  So in order to connect, we can say Mongo DB,  
00:10:43
colon slash slash 120 7.0. Point 0.1, or  localhost on port 27, zero 17. Click on Connect.  
00:10:55
Okay, if you want to create a database, you can  create that easily. Let's say for instance, we'll  
00:11:00
have a database with the name of sales. Let's  have a collection of employees, for instance,  
00:11:05
okay, and create database. And immediately,  you have your sales database created.  
00:11:14
And if you refresh here show DBS, you  will find that the sales has appeared  
00:11:19
here. So let's roll up our sleeves and start  by creating our back end server with fast API.  
00:11:29
Welcome back. So the first thing that I  want to do is I want to create a folder  
00:11:34
that will contain both back end and front end  folders. So let's go to the desktop. And let's  
00:11:41
create a folder farm stack underscore project.  First, we will care about the backend folder. So  
00:11:52
let's create that. And let's open this with Visual  Studio code. Alright, great. So the first thing  
00:11:59
that I want to do here is to create requirements  dot txt. And this is for the dependencies and  
00:12:06
will need to have three dependencies. So the  first one is fast API, obviously. So fast API  
00:12:12
with version zero, point 65.1. Also, I will  need unicorn. And unicorn is just the fast  
00:12:22
as the server implementation that helps in the  interaction between your application that we're  
00:12:26
going to build and the backend. So this is the  core of fast API, especially that fast API is in a  
00:12:32
synchronous framework, which heavily depends on  a sink await syntax. And therefore the use for  
00:12:37
an ASCII server was essential. So the version is  zero. Point 14.0. And also, I will need motor and  
00:12:48
motor is 2.4. point zero, which are actually is a  full featured non blocking IO MongoDB driver. So  
00:12:58
this works for Python in general. And it's working  with fast API, of course, in our case, and also  
00:13:04
works with her native framework. tornador is also  an awesome a synchronous framework. And mature  
00:13:10
works with all kinds of async IO applications as  MongoDB driver. So this is what matorral goes.  
00:13:18
Alright, so let's go ahead and activate our  virtual environment, or use Pipi and V if you  
00:13:22
don't have been v installed, you can install it  via pip install PIP in V. Alright, but I have it  
00:13:29
already. So I will not do that. Let's go ahead  and activate that by saying Pipi and V shell.  
00:13:39
Alright, great. Now we have our virtual  environment activated and the PIP file  
00:13:44
is created. But still, we will need to install  the dependencies. So what we're going to say  
00:13:50
is Pipi and V install dash r requirements dot  txt, right and hit Enter. And let's close the  
00:14:02
requirements. We don't need that anymore. And  I will need three files. First is main.py.  
00:14:09
So main.py, I will need also one for the  database. So we'll call it database.pi.  
00:14:17
And the third one for the model, just to create  our main to do class. Alright, so let's go ahead  
00:14:25
and start importing from fast API. I want to  import fast with a capital F. API all capitalized.  
00:14:35
And also I want to import something very important  which is called course middleware. So from  
00:14:41
fast API dot, middleware, dot course. All  right, I want to import course middleware  
00:14:49
and course stands for cross origin resource  sharing. I talked a lot about this in all our  
00:14:55
Django projects course refers to the  situation when your front end client  
00:15:00
Which is running on the browser, it has  naturally JavaScript code. This JavaScript  
00:15:05
code communicates with your back end, in our  case communicates with our fast API back end  
00:15:09
server. And in this case, the back end is  in a different origin than the front end.  
00:15:15
And origins simply is just the combination of  protocol, domain and port. So you can see here  
00:15:21
that the protocol can be either HTTP or HTTPS  domain, for example, our localhost or whatever,  
00:15:29
and the port might be any port. So react will  have, for example, Port 3000. And our fast API  
00:15:37
will have a port of 8000. And we will need some  sort of permission for the back end to interact  
00:15:44
with a different origin, a different port in this  case. So this is what we're going to do. Okay, let  
00:15:49
me just close that. And let's just instantiate the  fast API class by creating an object called app.  
00:16:00
Okay, so this is app object. And here I want  to specify the origins. So in this case,  
00:16:09
localhost on port 3000 of react. And if you won't  do this, there will be no connection between both  
00:16:16
there will be no permission, okay, for the  headers, the methods, so we will need to allow  
00:16:21
headers and methods. Okay, so in the origins,  this is going to be a list with https colon  
00:16:31
slash slash localhost colon 3000. Next thing that  we want to do is we want to take our app object,  
00:16:39
and we want to add the middleware,  add middleware, this one, okay,  
00:16:46
so this method will take first of all, the  course, middleware, course, middleware.  
00:16:56
Next, I want to allow origins to be equal  to the origins list. Also the credentials,  
00:17:05
we will set it to true, and I want to allow  methods, we will set it to everything or  
00:17:12
star. And also we want to allow headers. And let's  just go ahead and create a basic route. So app app  
00:17:23
app, this is the creator dot get method and just  type slash, this is an empty route. Basically,  
00:17:30
we want to create a method or  function, we'll call it trade routes.  
00:17:36
And we want to return something like let's say  ping pong. Alright, so let's check out first if  
00:17:50
the main page is working or not. And in order to  run server, we'll say UV corn main app. And I want  
00:17:58
to work on our reload mode. So you don't have to  disconnect from the server and reconnect again, in  
00:18:05
order to see the changes on the application. This  happens instantaneously once you refresh the page.  
00:18:11
Alright, perfect. So let's go ahead and open  that. And we get ping pong. Now the cool thing  
00:18:19
about fast API that you can access this  documents called swagger, swagger UI.  
00:18:27
And I've talked about this many times in all my  vast API projects on the channel in the course,  
00:18:33
I have also another video on vasti, API's  introduction. And I showed everything in  
00:18:38
details about the swagger UI, right? So make  sure to check that out. All right, great. So  
00:18:44
this is good. But this is useless to us,  it's just to make sure that the server is  
00:18:49
responding. So basically, in the to  do application, we need four main,  
00:18:54
four main operations write the crud operation.  So we need to read all to dues, we'll need to  
00:19:01
post a to do update, and delete. And we can also  get to do by ID, if you want a specific to do  
00:19:09
you can get it by its ID. Right. So let's work  on that very quickly. Let's just minimize this  
00:19:15
for now and maximize this. So let's have  another decorator dot get. And here we want to  
00:19:24
access API slash to do let's now work with a  sink await code. So we will define a method  
00:19:33
we will call it get to do and open close paren  column. And for now, we'll say return just one.  
00:19:43
So I will need the same code basically, for the  to do by ID. So here I want to have an input of  
00:19:52
ID. Alright, so I need the to do by  this specific ID and I will change  
00:19:59
the method Naturally, so we're gonna say get to  do is the same by ID. And here I will pass the  
00:20:08
ID as a parameter or an input. I also want to  post an ID. So it's the same code as the get.  
00:20:18
But instead of gap, we'll change that to  boast. And here we'll say, post to do.  
00:20:26
And we will pass the input as to do,  I want also to update and delete,  
00:20:32
right, so I will need two more functions.  Okay, selling just organizes a little bit.  
00:20:40
So here, I want to update the to do by its  ID. So I will need to enter the ID of the to  
00:20:45
do that I would like to modify or edit. And here  I want to change the method will say, put to do  
00:20:54
and instead of to do we want the ID because we  want that ID to change. And I want to change  
00:21:02
the actual beta of that to do. And, last  but not least, we want to delete out to do,  
00:21:11
okay, so, also to do by ID, if we want to access  a specific to do item, and we want to delete it,  
00:21:21
so I need to specify the ID for that. And  here, I will change the method, say, delete.  
00:21:31
And instead of to do I want to delete  that to do item with that specific ID,  
00:21:39
first API object has no Oh, sorry, put, there's  no HTTP request called update, or get post,  
00:21:49
put and delete. Alright, so we're good to go.  Let's actually take a look to what we have.  
00:21:54
Let's refresh the page. And boom, we have all  the methods that we have created. So we have  
00:22:01
get all to dues post or to do get to do by ID, but  to do and delete to do. Alright, perfect. So far,  
00:22:10
so good. Now what they want to do is, I want to  go to model.py. And I want to import from pedantic  
00:22:18
and pedantic actually helps you to auto  create your JSON schemas from the model.  
00:22:23
So we're going to create a class now. And it  works like an object relational mapper. So it will  
00:22:29
take from the model, and we'll connect with our  database that we're going to create in a second.  
00:22:34
So we want to import B's model class,  then I want to create a class called to do  
00:22:43
with Bayes model as a parameter. And I want two  things only I want the title, which is a string.  
00:22:51
And I want a description,  description, which is also a string.  
00:22:58
And that's all what I need to do. So let's close  model.py. And let's work on our database now.  
00:23:11
So here, what I want to do  is to import the to do class  
00:23:15
from the model.py. So from model I want to import  to do. And also I want to import the motor module.  
00:23:25
So import what or dot motor underscore a sync  i O. Okay, so this is the Mongo DB driver.  
00:23:41
All right, and let me just  open the MongoDB campus.  
00:23:45
So everything will be clear to you guys. But in  the meantime, I want to create a client object.  
00:23:53
And this is going to be equal to one Tor dot  Mordor underscore a sink IO. And I want to access  
00:24:01
the async IO model client, this one right here.  And this is essentially for the connection between  
00:24:07
the database.pi and Mongo DB. So we will need to  pass in a string, Mongo DB, colon, slash slash,  
00:24:19
and local host colon 27, zero 17, which is the  default port for MongoDB. As we said before,  
00:24:30
this is column. Alright, so this is a very  important step. And we have our Mongo DB campus is  
00:24:39
ready. But we'll leave it for now. Let's continue.  Let's actually create the database I will call it  
00:24:46
just a database. And this is going to be equal  to our client dot our database, let's call it  
00:24:55
to do list and inside our database, we want  to create The collection. So our collection,  
00:25:03
which is the same thing as a table in SQL,  so the collection is going to be equal to  
00:25:10
the database. And we want to have a name for  the collection. Let's call it just to do.  
00:25:18
Right, so we have a database called to do list.  And we have a collection, which is called to do.  
00:25:25
Alright, great. Now let's go ahead  and work on our main functions.  
00:25:29
So the first function that I want to create here  is to fetch one to do. So we'll say a sink deaf,  
00:25:37
and I'm going to say fetch one to do. And it's  going to take the title as an input. And here, the  
00:25:50
document is going to be equal to the collection  dot find one. And I want to specify the title to  
00:26:01
be equal to whatever title is going to be entered.  Okay, so the title is set to whatever title here.  
00:26:10
and here also, I want to wait for that, right,  and then I want to return that document.  
00:26:19
Okay, so this is the first get, so we want  to get one to do. There is no doubt here.  
00:26:27
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  
00:26:34
ID, which is set in our function in the main.py  file. Okay. So I hope that's clear for you guys.  
00:26:43
Next, I want to get all the to  dues. So we'll say def, fetch all  
00:26:51
to dues. And I don't want any parameters. And  let's create a list of to dues. And let's declare  
00:27:00
a variable called cursor. And cursor is going to  be equal to the collection dot a method called  
00:27:08
find. And what we want to do essentially is  to loop over any document in the cursor. So  
00:27:15
let's again, use the sink, keyword for document  in cursor, I want to expand in the to dues list,  
00:27:29
whatever to do with any document. Okay. So this is  basically the data that I'm going to retrieve, and  
00:27:41
I want to return everything in that collection.  And finally, I want to return all the to dues.  
00:27:49
Alright, so don't forget that this to do is the  main class that we have defined in the model.py.  
00:27:54
Next thing that we want to do is to create a to  do so let's actually create a to do by the finding  
00:28:02
create, to do function. And here we want to  take to do as the main parameter or main input.  
00:28:11
So the document is going to be equal to  the to do. And oops, what did I do since  
00:28:28
then I want to declare a result variable  
00:28:31
in order to await for the collection to  insert that document in the collection. So  
00:28:39
let's, uh, wait for the collection to  insert one, this is a method called  
00:28:45
insert one. And we will insert whatever document  that we're going to create, okay, whatever,  
00:28:53
post or whatever to do item that we're going to  create. And also I want to return that document.  
00:29:07
Next, we want to update it to do so a sync.  
00:29:11
def, and we will call it up date to do and  this takes the title and the description. Okay,  
00:29:22
both are set in the model class in the  in the model.py in the to do class. Oh,  
00:29:29
okay. And by the way, if you're wondering  what's insert one method, what's that?  
00:29:36
Find as well. These are MongoDB functions  or methods. Okay, so we are writing MongoDB  
00:29:44
code actually, inside our Python file. So the  motor module which is the MongoDB driver helps us  
00:29:50
to connect the database.py file with our MongoDB  database. Alright, so let's get back to our code.  
00:29:56
So await the collection to an Another MongoDB  method called update one. So how MongoDB works,  
00:30:06
when we want to update one item, we want to choose  a specific item. And in order to do that, we will  
00:30:12
need to have a criteria. So which item do we want  to update. In this case, we want to choose by the  
00:30:18
title. So the title, whatever title is set to, and  Next, I will have the actual item that I want to  
00:30:27
update. So I want to use the set operator  by using the dollar sign set. This is inside  
00:30:36
double quotes. And this is set to whatever the  description that I'm choosing, and the actual  
00:30:43
description that I'm updating. So we will have  another set of curly braces. And here I want the  
00:30:50
description that I have chosen to update for the  actual description that I want to enter or update.  
00:31:01
Right, I hope you guys following then I want to  render that document or return that documents. So  
00:31:09
I will declare another variable called document to  await the collection dot find one with the title  
00:31:21
that corresponds to that item that I have  updated, okay, and will return that document.  
00:31:30
Alright, so this is the update to do.  The last method is to delete a to do.  
00:31:37
So I'm going to call it remove underscore to do.  
00:31:44
And it takes a title as a parameter. So if we  want to delete an item, we should enter the  
00:31:50
title first. And let's await for the collection  to delete one, which is another MongoDB method.  
00:32:04
And we'll set the title to be equal whatever  is the title that we have entered. And we want  
00:32:11
to return a boolean value. And we'll set it  to true. Alright, great. So let's save that.  
00:32:18
And let's go ahead to main.pi in order to modify  these functions that we have created based on  
00:32:25
these functions in the database file. Right, so  this is 3000, the React JS sport, I want to import  
00:32:37
also from fast API HTTP exception. And this is  just for errors and exceptions. So actually, this  
00:32:45
class what it does, it generates some exception  information for us. All right, perfect, then  
00:32:51
what I want to do now is to import from database,  all the functions that we have created. So let's  
00:32:59
actually go to database dot p y. And let's take  this from here, copy. So this is the first one.  
00:33:13
Alright, so we have imported the functions from  database file. Next, what we want to do is to work  
00:33:19
on these methods. And let's start by the get  to do in order to return just one, we want to  
00:33:27
have a response, right. So response is going to  be equal to a weight for fetch all the to dues,  
00:33:36
which is there you go. Alright, one of those  functions that we have created in database.pi.  
00:33:45
And you can see here that this  actually returns a coroutine.  
00:33:50
Right, and I've talked a lot about co routines,  concurrent code concurrency in general,  
00:33:57
in different videos before, I will leave  all the links in description below,  
00:34:00
you can check them out. So we want to fetch all  the two dues, and we want to return the response.  
00:34:07
The second function is to do by title, so  we'll substitute the ID with the title.  
00:34:15
Okay, and we want the response model to be  equal to the to do class. So the response model  
00:34:26
is equal to the to do class in our model.py file.  In here also, instead of ID, we want a title.  
00:34:35
Let's have a response as well. And our  response is going to be equal to fetch  
00:34:41
want to do by title and don't forget the await.  
00:34:49
And I want to handle exceptions. So I  will say if the response if response  
00:34:55
means if response is true. We don't have any  errors. Then we will return the response.  
00:35:02
Otherwise, we will raise an HTTP exception. And  this is going to be 404. And the 404 is a status  
00:35:11
code four page not found, then what they want to  say is, there is no to do item with this title.  
00:35:26
Alright, let's actually make it nicer. So let's  put a format string. And let's return that  
00:35:36
title, whatever title that we're trying to  retrieve. So let's move on to the next function,  
00:35:43
which is posting to do, I want also the  response model to be equal to the to do  
00:35:52
class. And here, I want to set the to do to be  equal to the to do class. And I want to take  
00:36:02
that to do take a look, here, we have set the  document to to do, and we are going to insert a  
00:36:08
document in the collection. So this is a JSON,  but we want to convert that to a dictionary.  
00:36:17
In order to do that, we will declare a variable  called response. And response is going to be equal  
00:36:26
to the Create to do function that we have defined.  And I will take the to do and I will convert it to  
00:36:34
dictionary. And again, I want some exception  handling. So response, then returned a response.  
00:36:47
Otherwise, I want to raise HTTP exception. In  here, we'll say we'll enter 400. Something went  
00:37:02
wrong. By the way, 400 is the  status code for bad request,  
00:37:06
okay, so you can type something  went wrong or bad request.  
00:37:15
Alright, the next function that we want  to modify is put to do so we want to  
00:37:22
change the ID by let's actually change all  IDs by title, we will take the response model  
00:37:35
also, and we will set it to the to do class. And  for the main function, we want the title, we will  
00:37:42
set it to string and also the data, we will set  it to strength and date. Also, we want to change  
00:37:49
it to description or desk in the database in the  update function, you see here, title and desk.  
00:37:58
So the response is going to be equal to  
00:38:02
the update to the function. And this takes the  title and the description. And also it wants  
00:38:08
some exception handling. So again, we can take  this one, and we'll paste it here with the same  
00:38:16
status code for all four. And last but not least,  we have the Delete function. So let's remove that.  
00:38:23
And let's have a response as usual. And we will  take the Remove to do remove to do function.  
00:38:34
And we'll remove the item by the title. If you  remember here, we have set the title and also I  
00:38:40
want some exception handling. So if response is  returned is okay. We want to return a message  
00:38:50
saying successfully deleted to do item. Otherwise,  we want to raise exception, we can take this one.  
00:39:06
we'll paste it here. And that's basically it. So  we have the the lead the put the posts, get to do  
00:39:17
by the title by ID, and get all to dues. Alright,  cool. We are pretty much done with our database  
00:39:24
side. Now let's go ahead and check out the swagger  UI or the fast API docs, and how we can connect it  
00:39:30
to the MongoDB database. And we'll see this  interaction with the MongoDB campus. Right  
00:39:36
so let's do it. Alright, so we have here our fast  API docs or the swagger UI, where we can interact  
00:39:49
with our database. And I have on the other side,  my Mongo campus is opened. And let me show you  
00:39:58
until I was connected. Let me Disconnect for the  moment and show you what I did. So as I showed  
00:40:03
you at the beginning of the tutorial, you can  copy MongoDB colon slash slash localhost, right?  
00:40:14
And connect. And boom, you're connected. And here  you have the to do list that we have created.  
00:40:22
And this is because of the motor MongoDB driver.  So let's actually try that out. Let's go ahead and  
00:40:29
try to post a to do. So let's say, to do item one.  And in the description, let's say for instance,  
00:40:43
walk the dog. Execute, right within have  any problems. So let's check that out  
00:40:51
here in the to do list. To do. And boom, we  have to do item one, walk the dog. Alright,  
00:41:00
let's reset, cancel, let's close that. And  let's check out here in the gap to dues so  
00:41:07
try it out. Execute. And we have the  same to do item one, walk the dog.  
00:41:14
Let's have another one, for example posts. And  let's say to do item two, and here, let's say run  
00:41:28
two kilometers. Alright, then let's execute.  Okay, cool. Let's refresh here, and boom  
00:41:38
to do item to run two kilometres. Alright, so it's  working perfectly, our fast API back end server  
00:41:45
is interacting with MongoDB database. Alright,  so let's delete. To do it should be the same  
00:41:53
as in the title. So let's say that I want to  delete to do item two. So to do item space to  
00:42:00
execute. Alright, successfully deleted to do  item. And if we will refresh, he disappeared.  
00:42:08
Alright, so in the next part, we're going to move  on to fleshing out the front end with react js.  
00:42:18
Welcome back. So as our back end is working  perfectly and interacting with the MongoDB server,  
00:42:24
we will now need to create our front end site,  and we will make it communicate with the back end.  
00:42:29
So let's go ahead and create our react app. And I  will use create react app COI for that. But before  
00:42:35
we'll need to go to desktop. And we will need  to access farm stack underscore project folder.  
00:42:46
Alright, and just to make sure that we have only  one folder, which is the back end. And now we can  
00:42:53
use that command NP x, which stands for node  package execute. And I will use create react  
00:43:01
app. And for more information about create react  app, please check out the card that will appear  
00:43:06
right now. And this will take you to a react and  Django video tutorial for back end developers.  
00:43:12
So there I talked a lot about create react  app, what it is and what it's doing for  
00:43:16
your project. Following that the name of  the project or the name of the folder,  
00:43:20
so we'll call it front end. And the installation  of the project is going to take some time. So I  
00:43:26
will pause the video here. And then we'll be back  when it's all done. Alright, cool. So we have our  
00:43:31
front end project ready. In order to run it, we  need to see the two front end to change directory  
00:43:39
to front end folder, then NPM start. Alright,  great. So this is the default react application,  
00:43:47
the development server is running on port 3000  are listening on port 3000. Just before we go on,  
00:43:54
I need just to exit the server. And we will need  to install two things. The first is axios. So  
00:44:02
sending requests from the client to the server  and getting the responses from the server or  
00:44:07
the back end server to the client is the role of  axios. Also we need bootstrap. So boot strap. And  
00:44:17
yeah, that's all oops, what did  I do npm install axios bootstrap.  
00:44:28
Alright, cool. So let's go ahead and open  the app with Visual Studio code. We just  
00:44:34
let's CD out and open the whole  folder with Visual Studio code.  
00:44:43
By the way, this j s hint has  been bothering me for some time.  
00:44:48
If you have the same issue or if you dealt  with this issue, please let me know because  
00:44:53
I've installed GSN globally, but seems that  now I think happened really. But I think it  
00:45:02
won't affect our project. So let's ignore that  for the moment. And let's go ahead and import  
00:45:10
bootstrap slash dist slash CSS slash bootstrap,  dot min dot CSS. Alright. Just to import bootstrap  
00:45:27
this the first thing we need to do index dot j s,  okay. And that's pretty much it for index dot j s,  
00:45:34
which is the main entry point for our application,  app dot j, s four, we're going to spend  
00:45:39
most of the time I want to chillie get rid  of all that. And let's just type hello world.  
00:45:51
formstack. Alright, cool. Let's delete the logo,  we don't need that. So see, even if you have here,  
00:46:00
our red line, yellow line truly doesn't affect  anything. We just, it's annoying really.  
00:46:10
If you happen to know the solution for this,  please let me know in the comment section below,  
00:46:14
because I really couldn't find a suitable  solution to solve this problem. So let's get  
00:46:22
rid of everything. We will leave the app. Let  me actually delete all of that. And we'll leave  
00:46:30
the app. This is the class name. For the app  application. It has a class name of app. So  
00:46:36
here we will have some just general settings.  So the text align, we'll leave it to the center.  
00:46:42
margin, we'll give it zero padding, we'll set it  to zero, and font family, we will use this one.  
00:46:53
Alright. And that's all. So we'll close the app  dot CSS. And let's go ahead and work on the app  
00:46:58
file. So I'll just delete that. Or we'll leave  it just we'll leave it just for sanity check.  
00:47:07
So before we do anything, we will need to import  react first, right, so it just make this bigger  
00:47:13
for you guys. So we will import react. Also, we  will need two functions use state and use effect  
00:47:27
from react. We also want to import axios from  
00:47:35
axios. And also we want to import the bootstrap.  So let's go here. We'll import bootstrap.  
00:47:46
Let's first work on the visual side, then  we will work on the logic. So let's go ahead  
00:47:52
and have a div with a class name of app with  lists group item. These are bootstrap classes.  
00:48:07
Also, we want to justify content center  align items center with a horizontal margin  
00:48:18
set to auto. So in order to add styling  to JSX, we will have double curly braces  
00:48:26
and inside you can enter whatever style  that you want. So I want to set the width  
00:48:31
to 400 pixels. And also I want the background  color to be white, and the margin top to be 15  
00:48:40
pixels. And inside the div I will have a title  with h1 tag, we will call it Task Manager.  
00:48:47
Alright, great. So this has a class name of card  with text white primary background, which is the  
00:48:53
blue one and margin bottom set to one below the  task manager I want to add h6 tag with three words  
00:49:00
fast API, react and MongoDB. Then I will have  another div with a class name of card body. Inside  
00:49:06
that main Dave, I want to have an h5 tag with a  class name of card and I will say add your task.  
00:49:14
This has a dark background with margin bottom  three, and the text is white to have the contrast.  
00:49:20
The next thing that I want to do is to create two  input fields, one for the title and the other one  
00:49:25
for the description and a button This button  is to add your task. So in order to do that,  
00:49:33
I will wrap everything around a span this  span will have a class name of card text.  
00:49:39
So this is the first input and this is  the second input for the description.  
00:49:44
So both they have MB two or margin bottom two  with form control with different names, title  
00:49:51
in and d s in and both they have placeholders so  one with title and the other one with description.  
00:50:00
The next element in our  application is the Add task button.  
00:50:05
So it has a class name of btn with btn outline  primary. Alright, so I've given it a border radius  
00:50:12
with 50 pixels to give it that rounded shape  around the button. And also set the font weight to  
00:50:18
bold. And this is everything inside the span. So  the idea here is when you will enter the title and  
00:50:25
the description, and you will add the task, the  task will appear below here with one button only,  
00:50:32
which is the Delete below the span. And  on the same line with the add your task  
00:50:37
h5 tag, I want to add another h5 tag with  your tasks, let's actually give the button  
00:50:46
some margin bottom in order to have some space. So  MB, we'll set it to two, that's better. And then  
00:50:54
what we want to do is to display all of your to do  is below your tasks. Alright, so let's have a div.  
00:51:02
Inside that div, we should plug all of our  to do items. And this should be an external  
00:51:09
component. And down here below, I  want to create a copyright mark.  
00:51:15
And you're free to change the colors if you want.  Of course, this has a background of warning,  
00:51:19
which is the yellow one, right? With a class  of card decks dark BG warning, padding why on  
00:51:28
the vertical axis with one and margin bottom of  zero, just don't forget to delete that Dave below.  
00:51:38
And that one, because I've written it again. Okay.  So it's the same thing. Once we save, nothing  
00:51:47
will change. Alright, so before we move on and  create our components folder with the different  
00:51:52
components, there are a couple of things that we  need to do in our function. The first thing we  
00:51:57
need to do is to create different variables,  one for the to do list, one for the title,  
00:52:04
and another one for the description,  and all of them will be set to use date.  
00:52:09
So set to do list will be set to use date with  an array of empty object. And inside here,  
00:52:15
we will append the items each time you will add a  task. Also, we will set the title. And we'll use  
00:52:21
the state for just anti strained, nothing for the  moment, the same thing goes for the description.  
00:52:28
And once you add a title and description, hit  Add task, everything here will change. So this  
00:52:33
is the usefulness of use state function. The next  thing we want to do is to read all the to dues  
00:52:39
for that I will use use effect method. And we'll  use use effect in order to accept the HTTP request  
00:52:47
methods like get post and so on. So the first  thing we want to do is to read all of the to  
00:52:55
dues. And this, what we'll do is that it will send  a get request to the fast API back end server,  
00:53:01
okay, then, this callback will return a promise  and we handle promises with that then, and having  
00:53:08
a response as an input, we should access all  the data inside that input, or the response.  
00:53:14
All right, and all of that is wrapped inside the  set to do list that we have defined here above.  
00:53:19
And the last thing we need here is to post a to  do to add a task actually when we click on the Add  
00:53:25
task button. So this add to do handler variable,  which is set to a callback function, which doesn't  
00:53:31
take anything as an input, returns that post  request. So the first parameter is the origin.  
00:53:38
So HTTP localhost Port 8000 for the API and to  do, and we want to display the title for whatever  
00:53:44
title it is, and the same for the description.  And then we have a callback as a response  
00:53:50
that goes for the response as an input, and we  can console log rez or we can just alert dress,  
00:53:57
this is just for verification step. Now what  we'll need to update both input fields and the  
00:54:02
Add task button. Alright, so the first input field  which concerns the title, we will update it with  
00:54:10
the on change attribute, this takes and event as a  parameter, then it returns set title which we have  
00:54:17
set here above and inside the set title we have a  parameter of event dot target dot value, the same  
00:54:24
exact thing goes for input. So input  also we will have on change attribute  
00:54:30
with an event that set the description for  event dot target dot value. Last but not least,  
00:54:36
we have the button so for to button we have  apt to do handler function here. So the button  
00:54:41
should be updated in order to reflect the changes  that will occur when we click on the button. And  
00:54:48
don't forget to re add the margin bottom three in  order to push the your tasks a little bit below.  
00:54:54
So this is pretty much everything that we need  to do for Abdo j s The last thing that we need  
00:54:59
to do do is to add the to do items inside both  div tags. So let's go ahead to our source folder.  
00:55:08
And let's create a folder called components. And  inside components, I will create a file I will  
00:55:13
call it to do dot j s, and another file called  to do list view dot j, s To Do List View dot j s.  
00:55:24
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  
00:55:31
function that it will take as a parameter props.  Inside that function, I will declare a variable  
00:55:36
called Delete to do handler, and I will set this  to a callback function that takes title as a  
00:55:42
parameter in order to delete whatever to do item  that we want to specify by the title. And what we  
00:55:49
want to return actually is the item itself. And  next to that item, we will have a delete button.  
00:55:56
So you can see here we have a div with a  paragraph span with a style. And we will enter  
00:56:02
or we will plug the props.to do dot title. So  the title first, and this is going to be bold,  
00:56:10
then a colon, and then we want to have the  description next to it. And then after we'll  
00:56:15
have a button with onClick attribute is going  to be set to a callback function which doesn't  
00:56:21
take anything as a parameter, and it will return  to the lead to do handler function that we have  
00:56:27
created above here. Again, it will take props.to  do the title. And why is that because we want to  
00:56:34
search that item in function of title. So  the main criteria for deletion is the title,  
00:56:41
also will will have a class name with a  button. And all of that is again bootstrap  
00:56:45
classes. So now we have our to do dot j s  ready, we want to import that in the to do  
00:56:52
list views dot j s. But before we do that, we need  first to export the to do item function. Alright,  
00:57:00
in order to import it in the to do list view  dot j s, so we will import the to do item from  
00:57:07
current directory. Where is the to do dot j  s. Alright, and then I will need the function  
00:57:14
that I'm going to plug inside my app dot j s  here. So all the items that will appear below  
00:57:22
should be created in our to do ListView dot j  s. So let's go ahead and create that function,  
00:57:28
we'll call it to do view and  he takes props as a parameter.  
00:57:32
And what it will return simply a ul or unordered  list. And the props.to do list dot map which is  
00:57:40
one of the array methods like reduce filter and  sort. And we're going to map whatever to do and  
00:57:46
plug it inside that to do item. So that to do item  that we have imported from the to do dot j s here.  
00:57:55
Alright, so this is how it's working.  And let's not forget to export it.  
00:58:01
So in order to test everything together,  let's go ahead and open our back end server.  
00:58:13
So we'll go to back end.  And UV corn main app load.  
00:58:26
Okay, good. So it's listening on port 8000. So  if we will refresh the page. Okay, cool. Just  
00:58:38
make this a little bit bigger, there is something  very important that we forgot to do is to import  
00:58:45
the to do view from the to do list. Alright,  so we'll need to do that below the bootstrap.  
00:58:55
And now instead of that comment,  we will add our actual to do  
00:58:59
item. Alright, perfect. So we have our front end,  running on that instance of the terminal. And we  
00:59:06
will need also to open a new terminal instance  for the back end. So unicorn main app, reload.  
00:59:22
Okay, great. So let's open our fast API swagger.  Alright, so for the moment, our database doesn't  
00:59:32
hold any data. So this collection has no data, as  you can see here in the MongoDB report. On this  
00:59:39
side, we have our back end server, our fast API  server. This is the React application, our client,  
00:59:45
and here we have our database server, our MongoDB  database server. So let's try to add a to do item.  
00:59:53
So we'll say to do one, study rust language. At  ask ambu to do one study rust language. Alright,  
01:00:06
and if we will refresh here, we will have this  document created in our database. So we'll have an  
01:00:11
ID, which is very similar to the primary key  in the SQL world. This is auto generated by  
01:00:17
MongoDB. We'll have our title and description.  Right, let's try to add another one to do to  
01:00:25
run 10 kilometers at dusk, refresh,  the same sleep at 9pm, add task,  
01:00:43
refresh, and so on. So you can see what's  happening. It will delete, let's say, to do to  
01:00:52
delete it from here, refresh, it will disappear.  Let's add another one. So let's say to do for  
01:01:02
sketching at dusk. So it adds below. And if you  will go to the backend, you will find the same  
01:01:09
information. So let's try to access actually API  slash to do and you will find all of our to dues.  
01:01:21
All right, everything here. Similarly in the docs,  
01:01:27
when you will hit when you will click on  get to do try it now or try it out. Execute,  
01:01:35
you will find your two dues. This JSON  format right and let's refresh that as well.  
01:01:43
So to be identical Okay, so this was an  introduction to the farm stack and how  
01:01:49
we can work with the three technologies.  If you liked the video, please like it,  
01:01:53
share and subscribe to the channel. And I  appreciate your support guys. Thank you very  
01:01:57
much. If you have any questions, please let me  know in the comments section below. Take it easy

Description:

The FARM stack is FastAPI, React, and MongoDB. It is a simpler form of the MERN stack that can make developing apps even faster. In this course, you will learn how to create a basic CRUD application using the FARM stack. ✏️ Bek Brace developed this course. Check out his channel: https://www.youtube.com/channel/UC7EVSn5inapL20oPSwAwEUg 💻 Code: https://github.com/BekBrace/FARM-Stack-Course ⭐️ Course Contents ⭐️ ⌨️ (00:00) FARM STACK Explained (Theory) ⌨️ (11:20) Backend build (FastAPI) ⌨️ (39:39) MongoDB Queries ⌨️ (42:15) Frontend Design ⌨️ (58:03) App Testing -- 🎉 Thanks to our Champion and Sponsor supporters: 👾 Wong Voon jinq 👾 hexploitation 👾 Katia Moran 👾 BlckPhantom 👾 Nick Raker 👾 Otis Morgan 👾 DeezMaster 👾 Treehouse -- Learn to code for free and get a developer job: https://www.freecodecamp.org/ Read hundreds of articles on programming: https://www.freecodecamp.org/news

Mediafile available in formats

popular icon
Popular
hd icon
HD video
audio icon
Only sound
total icon
All
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players

Questions about downloading video

mobile menu iconHow can I download "FARM Stack Course - FastAPI, React, MongoDB" video?mobile menu icon

  • http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.

  • The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.

  • UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.

  • UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

mobile menu iconWhich format of "FARM Stack Course - FastAPI, React, MongoDB" video should I choose?mobile menu icon

  • The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

mobile menu iconWhy does my computer freeze when loading a "FARM Stack Course - FastAPI, React, MongoDB" video?mobile menu icon

  • The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

mobile menu iconHow can I download "FARM Stack Course - FastAPI, React, MongoDB" video to my phone?mobile menu icon

  • You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

mobile menu iconHow can I download an audio track (music) to MP3 "FARM Stack Course - FastAPI, React, MongoDB"?mobile menu icon

  • The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

mobile menu iconHow can I save a frame from a video "FARM Stack Course - FastAPI, React, MongoDB"?mobile menu icon

  • This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

mobile menu iconWhat's the price of all this stuff?mobile menu icon

  • It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.

Follow our social media for updates