Python Microservices Web App (with React, Django, Flask) - Full Course

hello and welcome to this tutorial i'm antonio papa from scalablescripts.com and in this tutorial we will create a microservices example using python and react let's start by understanding what is a monolith and what are microservices a monolith can be a large code base that has a lot of functionalities and is connected with the single big database in this example that i'm showing you you can think this as a nicomer site we have a search functionality that has a lot of traffic we have a product list which are cached we have a product recommendation functionality we which we can use machine learning to recommend different products and we have a contact page where we have less traffic there the problem with this architecture is if we want to scale this up because the search has a lot of traffic we have to replicate all the functionalities so we are replicating also the parts of the code that has no traffic like the contact page also since it is one repository there can be only one language and you can cause other problems with other teams if which if you change their code since there is only one repository now what are microservices microservices are smaller independent services that have their own database and they can communicate with each other using an event bus so in our example we will have four microservices all have their own database and they will communicate with each other via messages the advantages in this case are that we can scale the applications based on the traffic so if we see the search microservice we scaled that microservice four times compared to the contact where we have only one instance of the contact microservice another advantage is the separation of concerns now the product recommendation team can only focus on machine learning and not scaling up the application also each team can use a different programming language based on their needs now let's jump to the application that we will build in this example we will build a simple microservices example using python the front end of this app will be built with angular react view and swelt you can pick your favorite there the backend is composed into two apps an admin app and the main app the admin app will be built using django and the main app will be built using flask both will run in docker and will connect with their own database in mysql they will communicate with each other using rabbitmq events and in one case the main app will internally call the admin app now let's see what this app looks like so this is the app that we will build it's a simple app where this is the admin and this is the main app in the main app we can like the products and in the admin app we can create the products it is very simple but don't get deceived because it it has two backend apps with different database communicating with rabbitmq which i open it on my right side so let's see an example for example i will like this product here and when i like the product you will see an event happening in rabbitmq right now so the event has been triggered here and we have one ready event and now is zero so it means it was consumed so if we see here let's refresh the admin we can see that we got another like here so in essence it's really simple but this like has more functionality to it since it will internally call also the admin to get a random user and if we happen to like with the same user it will throw an error we can also create a new product so let's create a product and i will add a sample image we will see that rabbitmq will trigger another event so this is a product that we created another head event has been fired and when it's consumed here we will see the product here so it seems that the product is on the admin app on the main app so we got the product so we will see how this app will work by building them so let's start creating the apps so let's start building the admin app using django rest framework to create the project go to tutorial quick start and these are the commands to create a simple django project you have to install django and jungle rest framework from pip i already did it so i can directly go to the terminal and write django admin start project admin and the project is created i can go to the folder now and run python 3 manage that pi run server so the project is running now and i can copy this url and paste it to the browser and we can see that we successfully installed the django project now let's open the project with our ide and this is the app that we just generated now let's run docker so let's create two files one is docker file and the other one is docker compose dot yaml file so let's open the docker file first and what we will write here is first from what type of project is this so we want to get it from python and we have to specify the version of python i will pick the latest one which is 3.9 next we will add an environment variable python and buffered one because this is useful to get logs so we can see whatever is happening and now we have to specify a working directory i will call it just up so before going further i will create a requirements txt file so in this file we can put all the dependencies that we will use in our app so i will paste them here we will use django django rest framework mysql client and java mysql so we will connect with mysql jungle course headers this is needed for the front end to access the backend and pica this is useful when we will connect with a rabbitmq now that we added our requirements let's go to the docker file and we will copy requirements.txt to up let's copy the name here requirements.txt so we are copying this file to the work to the working directory requirements so we are copying inside the docker container and now we have to install it so we have to run a command pip install minus r requirements so paste it so this will install all these requirements and in the end we will copy all the files so dot slash up dot in this case means all the files here so we are copying all the files to the app directory the last command is running the project so we have to add here python manage that pi run server and we also need to specify the host so the host will be 0.0.0 0.0.0.0 with port 8000 so we have to use it this way otherwise we cannot connect the port with our localhost now let's go to our docker compose file here we have to start by adding the version the latest version of docker compose is 3.8 and then we have to specify the services so for the moment i will just add the backend service which is our app here first we have to specify the docker file so build we have to put here context which which is this folder and the docker file which is docker file so basically this means that this docker compose file should use this docker file so that's it next we need to specify a port here so this port that is running here is inside the docker container is not our local host so we have to tell our localhost to listen to a specific port so in my case this is the dockerfile port and this is our localhost port so if we don't use this we won't be able to access the server and the last change is the volumes so add here volumes and inside we will specify dot column up this means that [Music] dot means all the files here are connected with the docker container every time we make a change in the app it will pass it to the slash to the docker file up and the opposite if change happens in the docker file it will reflect it here so that's it this is our app now we have to start it first we have to stop the server here and open the terminal and write docker compose up now he's building the backend is downloading all the required libraries for python and it will also install all the requirements here let's wait till it's completed so now everything is running correctly we can see that the development server is running and also we stopped the server from this uh terminal and if we refresh now we'll see we'll get the same page now this is running from the docker container if we stop for example we won't be able to see it so now we don't see it if i start again now it will be much more faster so we can see it so this is how you connect django with docker now we have to connect with the database we already have an sqlite database here but we will remove it because we will be using mysql so the first thing we have to add the mysql service i will call it db and here i will add an image which is mysql version 5.7.22 so we added mysql next we have to add restart always so we have to add this command because uh sometimes mysql stops and this will stop also our docker container and our app is no will not run so this will restart it again next we have to add some environment variables so these are some environment variables that we will connect with our backend so we have to add mysql database which is admin mysql user root mysql password i will also put root here and mysql root password root so these values you can pick whatever values you want so you can specify them here next we have to add volumes so this is really important so mysql when we start when it stores data it needs to map them to a folder so i will create a folder here db data which will map var lib mysql so all the files here will be reflected to a folder here called db data so we will see that once we start this container so we are finished now we have to add here ports this is not required at all i will just add it so we can see the data inside the database so the port will be the default port for mysql is 3306 and this is inside the docker container outside we will use 33066 or whatever port we want i didn't put the same port because it will conflict with my mysql installation so that's it the last change is we should add here depends on db this means that this container should run first and then this container should run now let's close it and start it again now it's pulling mysql so we can see now the database is running so we can also see a db data folder here so this are the files that when we store anything it will be reflected here we don't have to touch this folder so this is just there to stay now let's connect with our ide so we need a new data source mysql and our port was 33066 root for the user root for the password and the database was admin let's test if we connect so we connected successfully now we have only one schema with no tables so now let's add some tables to the database first we have to create a new app so we have to go inside the docker container now so to go inside the docker container open a new terminal and write docker compose exec now we need the name of the service which in our case is backend backend sh we are inside now and now let's run a juggle command to create a new app so python manage that pi startup products so we created the app we can see here the products is created and we run the command inside the docker container now let's uh go to admin and we need to connect we need to add this products to the installed apps first we have to add here rest framework next we have to add here course headers and the products that we just created our course headers needs also a middleware so this is a middleware that we need to add and also it needs a new constant i will add it here in the end course origin allow all so we added everything we need now we need to connect with mysql here we have to change this sqlite to mysql the name of the database would be admin next we have to add the user which is root the password which is also root the host those is no in our case will be this service here so just db db and the port and in this case we won't be using this port but we will use the port inside this service so is 3306 so i 3306 so this is our connection with mysql we can remove again this sql light here and uh let's restart again the docker containers now we have to run migrations to create tables in mysql so let's go to the products and models so we will create two models here the first one is product this will extend from models model and we will add the fields for the product that we need title which is models a chair field with a max length of 200 let's do the same for the image and we need another field which is likes this will be a positive in the integer field and the default value will be zero so this is our product and we need another table now i'll call it user models model so we won't be really using the user table we will just use the user id so i'll just pass so with this this table will have only the id field and the product will have the id and these other three fields so now we have the models we need to generate migrations for these models and we have to migrate so open the terminal let's go inside the docker container again and here we have to write python manage that pi make migrations so we can see we generated migrations these are the migrations that we generated and to run them run python make manage that pi migrate so we run all the migrations if we open the database now and refresh we'll see a bunch of tables we won't be using all these tables the only two tables that we are interested is the products which we have title image and likes and the user which has only the id field so this is how we connect django with mysql and we run migrations so we created our models and now django when we return the objects in an api we need to use serializers so now i'll create a folder a file here sorry serializers and inside i will create a class product serializer this will extend from serializers so let's import it first from rest framework import serializers and this will extend from serializers dot model serializer so inside we'll add another class which is meta and we have to tell which is the model in our case is a product let's import the product here so i will remove this so we said that the product is a model and now we have to specify the fields and i will use all of them so this is our serializer is very simple we won't be using a serializer for the user since we will return a random id there now let's go to the views and now we will use the serializers so here we will create all the five methods for rest api crowd so there are multiple ways to do it in my case i will use the view set so from so i will remove the render from django so rest framework sorry import view set and what we'll do with this view set is we will create a class product view set this will extend from view sets view set so this will have a five methods that we want so i will add here list this will be the list of uh the products so i will list them one by one so this needs a request so i will add here create self request also so these are for slash products route for slash product slash so i will write it here this is r4 i will add a comment slash api slash products route i'll let pass here so it won't throw an error so this will have a get request this will have a post request now there are other endpoints that we will use which is def retrieve in itself request and the primary key which is known by default and this will be like this so i will added string id and i will pass it here so there are three methods for a single product one is retrieve the other one is update and the last one is delete so these are all the five methods now i'll remove the this part so to use this methods we have to add here a new file urls i'll copy the same code from this admin urls here i'll paste it here and here we will use products i'll remove the slash and what is this next parameter it will be product view set let's import it from views we have to edit here as a view but we still need extra parameters we have to tell that the get method will point to the list function so as we can see here we have a list and the get method will point to this list function the post method will point to the create function and we have to add another router right now for product slash the it needs a string which is a primary key and this get method now we will call the retrieve function we don't have a post we have a put here this will point to update and delete will point to destroy so i made a mistake this is destroyer so now all the methods are here now let's use them first let's add the list of the products so first let's get the products we have to get the product here objects all of them let's import this product from models so we got all the products now we need to use the serializer we just created so serializer is equal to product serializer let's also import it so imported product serializer here the first parameter is the products and we need another parameter here we have to tell that many is equal to true so we have this is a list of the products and it needs to return an array now that we got the serializer we need to return response with serializer that data let's import also the response here from rest framework response so this is the import so this is our list function let's see how it looks like so i open postman here you have to install it to test the apis here i will use http localhost port 8000 slash i forgot also one other thing so we added the routes here i also need to add them here first let's import from django url 0 we will import include and let's add the new path which will start with api we'll add a slash here and we will include here our project which is products so this project dot urls which is this file now that we included now we can use it here is api slash products and normally we don't have any product so it will return an empty array now let's add the next function which is create here we'll get the serializer which is equal to product serializer and we have to pass the data from the request so data is equal to request the data so we will use those data and we have to first call is valid so if we send valid data to this serializer if not we will erase an exception and if it's valid it means we will go to this line it means we'll save it after we save it we return the response so response serializer.data and we have to put a status here so we'll import from status let's import status so i don't remember the exact import here but we'll use status is equal to status dot http 201 created let's import this status so it's from rest framework we'll import status here now let's use it so we will change this from get to post and we will send some from json here we'll send some request we need the title title and an image which is image let's send the request and we return the title notice that we get also the likes here by default is zero we got also an id so our first product is created if we go to the get method now we'll see an array with a one product so this is the create function the retrieve is really simple we have to get the product which is equal product objects get the id is equal to this primary key now that we got the product we have to get the serializer is equal to product serializer with the product and we have to return in response serializer.data let's use it so this has id1 so if we put a get request with id 1 we return a single object products returns an array of objects now let's go to the update let's copy this part i'll put it to the update and also destroy because we will use the object there so we'll get the serializer here is equal to product serializer we have to pass the instance which is this product so the instance is a product with the data that it has and we have to update it with a new data which we will get it from the request the data so this is a project that the product that we have and these are the data that we want to update it now we have to do the same thing we have to ask if the serializer is valid then we have to save in the end we'll return a response with the serializer.data and we have to change the status which is 202 accepted so let's change product with id1 we'll send a boost reboot request here and this is new title and the new image send requests and we can see that these values are changed now also the status is 202 accepted last change is destroying the object this is really simple we have to call product delete and that's it so we have to return here response with the status status http 204 no content so let's delete this product send the request and we have 24 no content we don't have a product and if we go to the products uh not delete method so we have still an empty array now here now the last call that we need is the user's call so we'll create another class here user api view so i will not use a view set now i will use an api view api view here so let's import it from rest firm framework views we'll import api view and this will be really simple we need to define the get function and we need the parameter here which is a request which we won't use it i will put an underscore here we have to get the users users user sorry objects all so let's import also user from the models so we imported it here now we got the user we have to get a random user so here i will import random to get a random user is equal to random choice users and this will be a random user now let's return the id response id is user.id so this is a user so let's add it also to the urls the path will be user and we have to import it here user api view user api view here as view so let's test this route so this will be a get request to the user this returns an error because we don't have any users in the database so i will manually add here some values so i'll add here one two three four and five so i'll add five users or five numbers now let's send the request again and i get five if i send it again it's four so the result is randomized so this was our main app now we have to create another app so we can communicate it so that the other app will be a flask app now it's time to create the main app and i decided to make it with flask so i created a main folder and inside i created an empty main.pi file so let's start first i'll paste here the requirements that we need so we need to install flask flask sql alchemy sql alchemy flask migrate flash scripts flash course request mysql client and pica so there are a lot of requirements that we need and now we will go to the other project and i will copy the docker files here and paste them here so the docker file will be the same here except for the command which will be simpler just python main dot pi so this will be the docker file a docker compose file for mysql it will be the same except this will be a new port i'll put 7 here and i will change the database name to main there is no need to change the database name because this is another container but we changed it so the port the default port for flask will be 5000 and 8000 is occupied with the jungle up so i will use 8001 here and that's it so the docker files are completed now let's create a flask up here so from flask import flask let's create the app is equal to flask name here so let's start a basic app so here i will add new route up route so just slash i'll create a function index and here i will return just hello so let's see if this works so i need to add a condition if name is equal to main then up run with debug is equal to true we also need the host so the host will be 0.0.0.0 so that's it now let's try to run it without a docker container python 3 main.play so we got this port let's copy it and open a new tab in postman so we have an error so is hello not sure why throw the narrow now let's do the same but this time with docker so we have all the requirements we don't need to change anything so let's start docker compose up and let's wait till it's completed so it's finished we can see a db data folder here and uh let's test it now the port will not be 5000 because this will be inside the docker container the port will be 8001 so here i'll change it with localhost port 8001 and that's it so we can see hello now so docker is working now let's add mysql to this main.pi file so let's import sql alchemy so from flask sql alchemy import sql alchemy and we need to use it here so up config and we need to set a constant so is sql alchemy underscore database underscore uri so with this we will add the db connection and what we need is to add mysql here and here we need to add the user and the password so root root in our case at now we need the host the host will be the service here which is db so the host will be db and in the end will be the table which is main so with this we can connect to this database i will add also of course here since the front end will need it so let's import it from flask course i'll add it to the app and now the database is equal to sql alchemy and here we'll pass up now let's create two models that we need so class product this will extend from db model and let's add all the required properties for the product we need the id which is a db column db integer and also is a primary key now we have to make another change for the id here we will add here auto increment to false why did i add this field because the product will not be created in this app the product will be created in the jungle app and this app will just catch the event from rabbitmq and it will create the product and when we create the product we don't want the id to be auto increment because the id will be different than the the jungle app so if we want the same id we have to put it onto incremental false and to insert directly the id as it is from the django app so we'll see by example a little bit later now let's add the title db column db string and this will be a 200 character let's do the same for the image so this is a product notice that uh this product will be different than the product from the other app because we don't have likes here and the id is different so we can you we can think this as a different type of uh the same thing let's add also another class that we need each which is product user from db model so this will have an id which is a column db integer primary key to true so this will increment normally we need here the user id which is a db column db integer and the same for the product id we need also a unique constraint for user id product id and we need to set the name which is a user product unique so this unique constraint so let's import it from sql alchemy from here so this unique constraint will make sure that the combination of user id and product id should be unique we should not repeat it so we created the models that we will use now we need to migrate so to migrate i will create a new file here i'll call it manager and now here we need some imports so first from the main app we need to import up and db we need to import from flask migrate we need to import migrate and migrate command and from flask script we need to import manager now migrate will be equal to migrate with our app and our db here then we have to get to the manager so manager is equal to manager we need to pass the app inside and the manager will add the command db we'll add the migrate command here so we will have a db command to run our migrations so we will see it now that we will add the if name is equal to main so we need to add manager run and that's it so if we open the terminal now and open a new tab we'll run here docker compose exec backend sh and now we are inside the docker container now if we run python manager dot pi and we will run the command db so we added the command here with help we can see now that we have a command that we can run now let's migrate so to migrate we have to run python manager dot py db init so we created some migration files we can see them here now we need to migrate them so now around python manage dot pi db migrate so it should be python manager that pi db migrate so we created a new table if we open the database now we'll connect with the database so this will be 7 here the user is root password is also root and the database will be main so let's connect we'll see a database now with the emblemic version but we won't see our tables because we need to run another command for it which is python manage that manager sorry that pi db upgrade and now we run the migration if we refresh we'll see the table so this is a product table and this is a product user table so this is how we connect flask with mysql using docker now it's time to use rabbitmq to our python apps so i will use this service cloud ampq and you have to create a free account this is the free account i already have created so i can log in so this is my free account and what i will do here is this ampq url i will just copy it and now i can move to the app so i will go to the jungle app and uh in the products here i'll create a python file producer and for the moment i will just copy this url now let's send an event to rabbitmq so first we have to import pica this is a package that will help us send events and let's create a variable params is equal to pica url parameters and here we can put the url that we just pasted here as a string so we created the params this is annoying the connection now is equal to pica blocking connection and we will pass the params here so we created the connection with rabbitmq now we have to create the channel which is equal to connection channel so with this we created the channel now we can publish so to publish i will create a function publish inside i will put a method and a body so for a moment i will just keep it empty so we can see an example of the publish method so channel here basic publish we need to put an exchange i will put an empty string routing key this is a queue that we want to send the event so for the moment i will put it admin so i will publish it in the same queue as this one with the hit we need the body which is for the moment hello so that's it we can use this publish function now i will use it in the views when we list the products i'll just publish here so i imported the function and when we retrieve all the products we will publish hello now we created the producer now we need to create the consumer so here we need to create the consumer so the beginning is the same let's copy everything from the the producer paste it here and now we have to declare a queue so channel cue declare and the queue will be admin so now we need the callback so call back this accepts a channel as a parameter method properties and body let's pass for the moment after the callback we have to call channel basic consume here we have to pass the queue which is admin and we have to pass on message callback which is this callback that we just created so we are basically consuming now we can print started consuming since we want to have a message to see if we started consuming and the channel start consuming so with this in the end we'll close it so channel close so we basically have finished now let's uh print a message also to know if we received a message so print here re sieve in admin so we received a message and i will print the body here if we go to hello there so that's it now let's try to open the terminal go to the docker file so docker compose exec backend sh here we have to call consumer.pi so python consumer.pine so we received this messages because i already sent some test events now let's test it let's go to the route for the products and we can expect when we get the products here to send an event hello there send we can we can see now we received an event hello now let's consume to the flask app so what i will do is copy this consumer file go to the flask app and here i'll paste the consumer so everything is the same except the queue here will be main so we are done now i can so i can start it with pub python consumer dot pi so we started consuming and in the producer here i will change the routing key to main so now i will not publish here in the admin app but i will publish here in the main app so let's see if this makes any difference let's send the event we can see hello here was from before but this received the hello now so to see the difference hello main i will say hello main so let's send it again we don't see a hello main here but we will see it here so this is how we send events to different apps using pica and rabbitmq now we successfully connect us with rabbitmq and we started consuming uh with the both apps now we don't want to have all the time to tabs here to start the consumer so we'll change the docker compose file now first let's change the docker file we will cut this command here and we will add it directly here so when we build we'll execute the command that we just cut so this is basically the same as before we run the command here but now we are running it here we did that because we will create another container now so is q i will call it which will have the same docker file and the the difference now is we will start a command now and the command will be python consumer dot pi so we will run the command directly here instead of manually running it every time this also depends on the database because we will insert data later so let's do the same for the flask app so i'll paste the queue here so this file is the same so the difference now is i will cut this command here and i will put it here command python main api so now let's restart all the containers so i will run docker compose up build now we don't need the other tab let's do the same for this also let's remove this tab and we will build all the containers now we are building the queue so as we can see we are getting the q so the q is here so one other thing that we can make is by running it like this a docker compose up minus d for the database so d means we won't see the logs let's do the same for the backend or for the back end and the queue we need to see the logs so now we are seeing the logs from the queue and from the back end let's do the same here so minus d here db and docker compose up now let's see if this works so we are the products here let's send the request again we won't see it here but we should see it here also another change that we have to make if we close our containers and run them again we'll notice so if i do it with a database like this and the others double compose up you will notice that i will still get the cues but they they are not consumed yet so there is one last change that we have to add in our consumer and here we have to add auto ack true so with this we will consume the calls and we will not get them again so let's do the same for the other consumer and let's restart the containers again with build also this one will build so they are rebuilt now if we do the same with the database and we start the other apps we will see that the queue started consuming but we cannot see anything here so that's it now with uh these changes consuming becomes easier now we want to send events every time a product is created updated or deleted so we have to change this publish method we will add here a method and a body so for the method we have to create variable properties which is equal to pica basic properties and here we will pass a method and here we'll pass the properties is equal to properties also for the body so we need to import json here and the body will be json dumps body so we will send objects or anything but we have to convert it to json before we send it so this is our publish function now let's use it to our views let's remove this publish here and now when we create we will publish product created and we will send the serial laser the data let's do the same for product updated product updated and for the product deleted now instead of the object we'll send directly the primary key so these are the main events that we want to send and now let's make changes to the flask app here we have to get the data which is equal to json so i will import json here json loads body so in the django app we will convert it to json so now we will con convert it back let's print it so we can see what data are we sending and now we'll make the condition if properties content type is equal to product created will create the project so the product sorry so the product is equal to product with an id data id here title so let's import also this product here is equal to data title and image is equal to data image in the end let's import also the db db session add product ndb session commit so this is how you create a an object with sql alchemy now let's do the same for the other conditions so properties content type product updated so now we will get the product is equal to product query get data with an id and we have to change this product so product title is equal to data with the title and the image so image here in the end we will call session commit the last change is deleting so properties content type product deleted and in this case we'll get the product like this but we don't send an object we send directly the id so this data is the id we have to do it like this now db session delete product and tb session commit so these are all the three cases that we will receive from the other app now let's see if they work but before we should restart our containers just to be sure so build so there is no need to restart this one but just let's do it to be sure so this is started and now we have the products here which we don't have any let's create a product here i will send some data title is a title here and the image an image let's send the request so we successfully created pro the product in the django app but let's see if we created it in the uh flask app so we received the queue we probably forgot we should add here some print statements like product created product updated and product deleted but doesn't matter let's see the database and we can see this is a product now so we successfully created the product from an event from rabbitmq now let's try to update it so this product will put send a put request with a new title and a new image so i will not save it let's send the request this is updated and if we see the event we got the new title and a new image we don't see the print that we just added because we have to rebuild the containers now we're just checking the database which is correct and now let's try to delete it and this is received and if we refresh here we can see we have no product so now the databases for the product are in sync from the jungle app and for the flask up so we completed the jungle app now let's finish the flask up since we have only one route here so let's change this route to just api slash products and here we'll return a list of products so let's import jsonify from flask here and we will return jsonify product query all so let's see if this works so let's see if this works so the endpoint is api slash products and we got one product let's create one product here so we can see it if it works so we got this product that we just created so we should see it in the database notice that the id is three so when we created this product we don't start with one but the idea that we have it on our django app now let's send the request and we get an error because object of type product is not json serializable to fix this error we have to add here it data class and let's import it from data classes so with this now the class will be json serializable let's do the same for the product user send the request again and we got an md object but we want to see the data which we got id title and image here to do it we have to declare it here id should be an int title should be a string str so and image should be a string with these changes now we can see the id image and the title so with this we completed the main route now let's add another route so i'll call it like and this will have up route api products we need the idea of the product which is an integer the id and we have to like it so this is the end point the method is a post request and when we like we will send an id here so how do we like the product so now it's a little bit complicated we have to internally call the django up so we have to internally call this user api view here to get a random id and we have to assign it to the product user so first we have to create a variable i will call it rec and this will call requests dot get let's import requests from so we import directly requests here and now we have to get the endpoint so the endpoint is http localhost port 8000 slash api slash user and for the moment we will just return json if i request json not sure if i need jsonify here but let's try it so products with an id1 we need to like it let's send a post request send and we get an error connection refused so what is the error here there is localhost here because right now we are inside the docker container and the localhost inside the docker container is 0.0.0 how to connect with another docker container localhost we have to specify here that this is docker for mac localhost so this is the way the docker knows that we are referring not the container localhost but another localhost so our local localhost so with this change let's try to send it again it seems we the server stops so we probably need to restart it send it again and now we got id2 so this is id from the user so this will be user here so not post get so this endpoint 8001 will call this other endpoint now that we got the response let's use it and create a product user so here we will get a json is request.json in the end if it is successful we will return a message success and we will make a try accept here so what we will try is we will create a product user which is equal to product user with user id is equal to json id and the product id is equal to the id that we just set this one from the url and now that we set this product user we have to add it db session add product user and we have to commit and here we'll send an event which i will send it later and if an error happens there is when the user tries to like again because this is an unique constraint if that happens we will abort let's import a board from flask board we'll put 400 here and you already liked this product so a board we imported from from flask here so let's try it let's send the request again send success if we see the database product user we created one and it will happen that we will fail it seems that our unique constraint didn't work so i probably made a mistake here but i won't focus on that let's uh finish this up by sending an event now we need to get the producer i'll copy the same producer here so everything now is the same and we have to use it here now if this is completed we have to add here producer so publish let's import it product liked and we have to pass the id of the product so let's we need to import it here so this is our flask up only one thing that i think is easy fixable now let's make the last change here on the consumer we will get the data here which is equal so let's import json json loads body let's print the data and we here will like the product so we'll get a product first which is equal to product let's import it so from products models we'll import product that objects get id is equal to data so i will directly make this an id so we got the id now product likes will equal to product likes plus one so we will increment it by one in the end we'll save it and we will print that product is product likes increased just to be sure let's rebuild the containers and we will rebuild this too so this is completed now we have the products here so we have two products and they have zero likes now for the product with an id2 let's see if we have that product in the main so three i guess so for the product with id3 i'll post here to like it and this should increase the likes so i guess we have an error received in main so my bed when i made the producer i should change here the routing key should be admin so let's rebuild and this should receive the event now let's like again not here here so this should not receive the event it didn't this did receive the event actually we got an error here so requested setting installed ups but settings are not configured this error happens because this file is outside of django and we are using the product here and to use a product regularly we have to load so we have to set up jungle before getting the product so we have to import here os and django we have to set uh an environment variable django sent is sending settings module is equal to admin settings so this settings here and we have to add django setup here with this we won't have that error so let's rebuild the containers we can see now that we started consuming so let's try it again now success let's send it again and we see the likes are increased here so we received the event so now we are communicating back and forth with both apps so this was the app that i wanted to show now it's time to create the react frontend i'll create a react project with typescript so to create it write mpx create react app i will call it react crud and the template will be typescript let's wait till it's completed now the project is created we can go to the folder and run npm start now the project is running and if you open the browser we can see on localhost port 3000 we have our app running now let's open the project with our ide and this is the project that we just created all the files are in typescript so i will remove the app.test.tsx file we won't be using uh tests here in this tutorial and now let's add the template for this project so we don't use the default react template go to getbootstrap.com examples and i will go to the dashboard here and get this template so let's view the page source and i will copy the html from the body till the end so and i will paste it here so my id is smart so all class now are have been converted to class name if your id doesn't do that you make sure to do it yourself so i will remove all these tr's here because there are a lot and i will keep only one so i will keep only this we don't need the canvas we don't need the buttons so let's make some changes so we can remove this ul nh6 so this can be removed also so we can keep the dashboard and let's remove this pan so let's make everything much simpler so we remove the ally here so we have an error here also which is the error so there is this input which we need to add a slash here and everything should be correct now let's remove this logo here and it will look ugly so if we see our app it looks very ugly because we need to add also the styles so here we have the dashboard.css which we have to copy it and add it to our app css paste it here and now it will look a little bit better but we also need to add bootstrap so go to bootstrapcdn.com and here we need to copy the html link and add it to our index.html now that we added this link it will look much better so this is a template we will be using so let's make further changes so i'll create two components now this is the navigation so i will create a folder components inside i will create a new component i'll create it now and will be typescript.jsx file inside i will create a stateless react component and i will use this shortcut in my ide so we need to import react from react we need to create our component as a constant and this is a function which we need to export in the end here is html so the html let's cut this part here and paste it in our nav so let's replace it now that we replace the html we can use the component directly here so let's call it nav my id auto imports components so you should import now from components nav here and use it directly if we see the browser nothing will change let's create another component now which is the menu which is this one so let's do the same menu create the component and let's cut html actually the name here will not be dashboard will be products and let's use the menu in our app.esx so that's it now everything looks much more simpler and our component looks much better now we need to create more components for our app so we will have two main apps so one is the admin and the second one is the main app so first we will focus with the admin which is what we have been doing till now and then we will create the main app so inside the admin app we need to create the products component so let's create another component products let's let it be a jsx typescript file and this component for html will have the html for this table basically so let's cut it and let's paste it here so note that react doesn't allow to have two html elements nearby each other they all need to be wrapped inside a bigger one so this makes sense either that or i will just remove the section title so i will keep it much more cleaner this way now let's add these products here so one way is to add directly the product here but we don't want to do this because we will create more components which they will change here nav and menu will stay the same but this will change so uh to fix this we have to install another package we see which is react router dom so open the terminal and write npm install react router dom and types react router dom we need this second package because the first one is javascript package and the second one is the typescript package so for all the typescript apps you need the to do it this way now reactor router dom is installed now we have to use it here so to map the products via the router we have to import two packages so the first one is browser router and the second one is route not router route so let's replace this products here and inside we will add browser router this is a container for all our routes and let's add our first route which is for the products so we have to specify a path the path for products will be admin slash products and the second parameter we need to add the component which in our case is the products so that's it so this is a path we can reference the products now so right now nothing is happening because we are at the main app so if we go to admin slash products we can see we can see the table now so this is working now let's add the main template so let's go again to get bootstrap.com to the examples and this will be the template for our main app so let's copy the code from the body so from here till here and we have to create a new component for main main here let's create a component and here we'll paste the html we just cut so let's remove most of the call md4 here because we don't need all of them so we keep only one we don't need neither the jump drone here and neither the header so we can remove the header and this is almost what it will look like so we will make changes later but for now i will remove also the svg here so for now let's create a route for this so the route for the main app will be route the path will be the main path so slash and the component will be the main component don't forget to import it so if we go to the main component now it will look so first this is what the product component looks like which is weird and also if we go to the main page we can see this is what the main component looks like but we don't want the navigation in the menu here so what is that we are making a mistake so first we need to remove the nav and menu from this route so the only way to do it is by creating a new wrapper component for the admin so let's do it let's create here a typescript file called wrapper so inside i will create a component and the html for that component will be this nav and the menu so i will cut this part go to the wrapper and paste it here so inside the div let's also cut what i left here and paste it so this is now the wrapper component so why do we need this component so we have to use it directly in our products so we can wrap this with the wrapper so wrapper and now in this component we will use the menu and nav so we are having an error here because we are not using it correctly inside here we have to use the child properties that we have so we have to add here props uh we are having an error also here because we are using typescript we have to specify a type which is props with children any so these are the props that we have and to pass the child properties we have to use props children this way we will pass the html inside here to the rubber and if we go to the this is the main app now which looks much better and if you if you go to the admin slash products still doesn't look good still we see this main card so what is the issue here the issue is this slash the problem with this slash is that they both have slash and react confuses them and to solve that we have to use exact here this means that the path is exact here and don't confuse it with the other paths with this products will look the same as before and the main app will look different so this is how we use route so let's remove nav and menu we don't need it here actually these components which are nav and menu we have to move it to our admin because they belong there don't forget also to change the imports here which my id does it automatically so now we got the admin the main app which we will use it later and now let's focus on our products component now let's fill the table for the products to fill the table first we have to get all the products and to do it we have to use use effect and inside accepts a function as a parameter and the second parameter will be an empty array this empty array means that this will be called only once if we put a variable that changes use effect will be called every time the variable changes we'll see this later on now inside here we need to call our backend to get our data so we cannot make this use effect asynchronous here it doesn't accept it so the way to do it is to create a function get products and this will be an asynchronous function and in the end we will call it so get products this is a way to call asynchronous functions in react but there is an even easier way so we can remove get products totally so let's open a parenthesis here and close the parenthesis when we call it so this is my preferred way of calling asynchronous functions in react so open parenthesis close parenthesis and then you call it directly here inside now let's call our backend let's get a response is equal to await fetch the endpoint would be http localhost port 8000 slash api slash products once we get the response we have to get the data which is equal to a weight response json so we got all the data so first let's console.log it and inspect here we will see that we get the products here and the console log works so we got all the products now we have to get them and loop them to do it we have to use another react hook command which is use state so use state accepts a default first parameter so a default value which is an empty uh array for the products and the returns products as a variable and set products as a function so these work together with each other once we set the products these products get set so set products will be used here data now we set the products it means this variable has changed so we have to use that variable here let's use it so we have to map it so products map it will return a product that returns this html so the we need to add a key here so for every loop that we have we have to have a key now we are having a type error here because we have to cast the product here so we have to create a folder here interfaces and inside will create a product interface so product not products but product here we'll export an interface product and this interface will have an id as a number a title as a string an image as a string and it will have likes as a number so this is a product that we have let's go back and now we have to cast this product as product don't forget also to import it here so we have the key now now let's call every other variable so this is id i also forgot here to put the headers so the first one is the image this is a title this is a likes and this is the action so the second one is the image so we have to put an image here with the source to be product that image and the height will be 180. this is a product title and this is a product likes for the moment i will keep actions to an empty td now let's see it on the browser so we retrieved products with images so for some reason the image doesn't show so this site lorem pixel doesn't work uh currently for me but if it works it will show images here so this is how we retrieve products and we loop them to show them as a table now let's delete a product in the actions here we need to add some more html so i will add this html which is just a button delete so we want to delete a product so first let's create a delete function i will call it d deal not delete because it's a keyword so this function will accept an id as a number and we have to call it here so to do it we have to add the non-click listener and we have to call the delete function with the product id so this is how we call the delete function for a different product now that we have the delete product we have to make it asynchronous and we have to call our backend to remove the product so to do it we have to make a weight method fetch so i will copy this part here so in this case now we need to pass the id so i will convert the quotes here to this kind of quotes i don't know the name of these quotes but with these quotes you can add variables to the string which is the id in this case this is not a get request this is a get request but we want to make a delete request here so we have to pass some parameters so the method will be delete so with this function call we will delete a product in the back end but we need also to remove it from the front end so we have to call set products again so set products and we have to get all the products except the product that have this id so we have to get all the products and we have to filter them and the filter will have the product as a product id so product is a product here and we will filter all the products that have the id different than this id we can keep it one liner here so this means that we are getting all the products except this product id and we are setting it so the table refreshes itself one last change that we need here is to add a confirmation since we don't want to delete the products directly so we add a new condition here window dot confirm are you sure you want to delete this product and we close all what we did inside this if statement so once we click delete the browser will ask this question if we type yes then the product will will be deleted let's see it on the browser so i will delete product number four when i click i will get a question are you sure you want to delete this product i type ok then we can see product with id4 is removed if i refresh it's also removed in the backend so this is how we delete products now let's create some products first let's create a new rear component products create and this will be a normal react component and now that we created it we have to add it to our router so the route for this component will be admin products slash create and this will be products create let's make every component exact so we don't have any problems this also now let's go to our products we will add here this html it's just a link and we will have to change this anchor link to a link from react router dom so i automatically imported it but you have to do it on your own so import link from react router dom and this link will redirect to admin products create let's add a slash in front and we don't need this curly braces so this is the link that we want so if we see the browser we can see an add button here that when we click we go to the products create page which is empty right now so in the products create let's convert this div to just wrapper and now it looks better inside here i will create this simple form that accepts only a title and an image and a button to save it so it will look like this now let's make this form work first we have to create variables from the state for the title and the image so we'll create the title set title from use state and the default value will be empty let's do the same for the image so this is image and this is set image now that we got the variables we can set it directly here so when we change this input we have to set the title so we had an unchanged listener here and the event will call set title and the value will be event that target that value this means every time this input changes so when we type here we'll set the title so let's do it the same for the image so on change event we'll call set image event.target.value now in this title an image we got the values that the user set so we are ready to use them in when the form is submitted so let's add an onsubmit call here let's create also the function submit and for the moment just console.log the title and the image and on the submit here we will call the submit function so let's test it on the browser let's inspect and let's put a title here and an image save i saw console log but immediately the page refreshed so that is a problem so we have to prevent that and to do it we have to call here to to add an event parameter here and to call event. prevent default typescript wants us to type the event here so synthetic event let me type it synthetic event so that will prevent the page refresh so if we try it again we can see that we consult log test and test now we are ready to call backend to create our product so let's make this function asynchronous and here we'll call weight fetch http localhost port 8000 slash api slash products and we have to add some options the first one is a method which is a post method the second one is the headers so this is a http request so we want to work with json so we have to add content type application slash json and we need also to send the data which are these two variables that we have here so we have to send them in the body and we have to stringify them so json stringify because it accepts a string we want to send an object so we need to add the title here and the image note that this title here is the same as title title here but to keep it short and simple we can use it like this now we can create products with this request we need one more change because we want to redirect to the products once we submit the form so let's create another state here i will call it redirect and set redirect use state and the default value will be false here i will add the condition if redirect we want to return redirect so let's import it so importer direct from react router dom we want to redirect to admin slash products and once we create a product we want to set redirect to true so this means if this is successful we redirect to the main table let's try it out let's create a product title image save so if we redirect it means it works so we can see it did work so let's create another one with a correct image and let's put a title here bird so we can see this is working correctly and the redirect works correctly now we want to edit products to edit products is almost the same as creating products so i will copy the products create component and paste it and change the name to products edit let's rename also this variable products edit and rename this also products edit so now that we created products edit let's add it also to our routes let's duplicate this and the route now is different so we need to go to admin slash product slash id slash edit we need the id of the product that we want to edit and the component is products edit now we need to get the product from this id that we are fetching but first let's go to our products and here we need to add another link let's copy the link for the delete and name it edit we don't need a non-click listener here but we have to rename this to a link and we have to redirect to the path that we want to redirect is admin slash products slash the id so product dot id here slash edit and don't forget to end it with the link here so this button will appear on the table now so along with the delete button now we have an edit button let's click the edit button and right now nothing happens so i made a mistake a spelling mistake here so it's products here let's go back and type edit again let's refresh just in case so this is the product edit form now we have product with id number two we have to set the titles and the image for the product with id number two so to do it let's go to products edit now we have to call use effect and inside here we need to call our backend for that product so like we did before i will open two braces here and make a sync function so this is my way of calling uh an sync function inside use effect inside here we need to call the backend so response is equal to weight fetch let me copy this part here so i will use this braces now we need the id of the product so we have to get a product with the id that we got from the url to get it we have to add the props here and this time is props with reference and based on the props now the id is props match params dot id the id here corresponds to this id here so the the actual name and to get the query params we have to use props match params now we get the response let's get also the product which is equal to a weight response.json once we got the product we have to set the title and the image based on this product so set title to product dot title set image product dot image we can cast this product as a product here since it is a product so let's see how this looks on the browser now and this is not working because we forgot to add something else we set the values but this doesn't mean that the inputs will reflect that value so we have to add here a default value for the title same for the other input so default value will be image here now once this change the input will change also now we can see the data are pre-filled based on the product so if i change this from number two to number one we can see we have different values the last change we need is to change this fetch now this now is a different url we'll call api product slash props match params that id and the method is put all of the other things are the same now let's test it on the browser so i will change the image to this image and i will say updated title for the product with id 1 let's save it now i'm redirected and we can see a new image and an updated title so this is how we update products now let's complete the main app so this should be a list of products so let's create products from the state so products set products equals to use state and the products will be an empty array in the beginning now we have to get all the products so we have to use use effect an empty array a function sorry and this will be an empty array inside here we'll call our backend so this will be an async function will get response from fetch http localhost port 8001 now so before it was 8 000 now it's 8001 api slash products once we get the response we have to get the data which is equal to weight response dot json i forgot a weight here and in the end we have to set the products to this data that we got now we set the products we have to loop them here so this is the html that we want to loop so products map we have to get every product and return this html so this needs a key product.id this needs the product to be cast to product so let's make the other changes now first we need an image here so let's write an image stack with the source to be product that image height will be 180. this is the product title here here we need to only one button which is like and this is a number of likes so it's not minutes this should be likes likes so that's it let's see how it looks like let's go to the main app and this is what it looks like so we have only two images that work because the other that don't work but this is the main idea now let's make this like function work so let's add a new click here on click and this will call the function like so this will be like this like with the product id let's make the like function this will have an id as a number so this works fine now let's complete the like function let's make this asynchronous here and this will call our backend here we need to wait fetch the url is almost the same here let's change it to these brackets and the endpoint is api slash product slash the id that we got as a parameter slash like and this will be a post request we need also to send some data but in this case we don't need any data so we need only to send the headers which is content type application slash json usually the post requests have some data but in this case we don't have any now that we like a product we also need to update this html so we need to set the products again so to set the products we need to loop and change all the current products so set products products map and for every product we have to make a condition now if this product that id is equal to this id that we got as a parameter here then product that legs will increase in the end return the product so this means that only this product with this id will increase the likes now we are having an error like argument of type product is not assignable of parameter of type set state action never this means that when we initialize the products here this is never this typescript interprets this is never like this so to fix this problem we have to manually cast this empty array as product array so this is an empty array but as a product array and immediately we see that we don't have an error anymore so this is how we fix typescript errors by casting the products directly let's open the browser now and if we like a product we can see the number of likes increases and that's it is very is very simple so this was our app that we wanted to build and i hope you like it don't forget to subscribe to the channel for more content thank you