Django & React Tutorial #1 - Full Stack Web App With Python & JavaScript

[Music] hello everybody and welcome to a brand new tutorial series in this series we're going to be working on a full stack web application using python and django and javascript and react python and django are obviously going to be handling our backend they're going to be running the web server and react and javascript are going to be handling our front end and they're going to be making this fancy web page that you can see right here now i will go into what the kind of idea and project is that we're going to be working on but i'll just quickly mention that this tutorial series is designed for you to learn a ton as much as yes we're going to be working on a project and you will have something to show from your kind of hours put into watching these videos this is really just designed to teach you about how these frameworks and kind of modules and all this stuff work so that if you want to go out and make your own project you're comfortable doing that and you have the skills and knowledge necessary to do so this specific project we're going to be obviously learning about django obviously learning about react and also how we can integrate our project with third-party apis something that's not very easy to do and well it's just really good to know because a lot of times when you're making a project you want to integrate it with google or in this case spotify or some other popular companies and have kind of their services working on your app so anyways that is the basic idea last thing this is not really designed for beginners yes if you're a beginner that's totally fine you can try to follow along but i would at least recommend you have some general programming experience and you've used python or javascript before don't worry about django and react i'll explain those from scratches if you don't know them but yeah that is the basic idea so just to tell you about the project in a little bit more detail the way this is going to work is it's going to be a collaborative music playing system so it's a way for a group of people to kind of control the music that's being played in some sense of unity right so there will be one host who can create a room ideally this host will be the person who's actually controlling the music wherever they are say at their house right house party or in some restaurant or gathering or whatever it may be and then they can give out a code to a bunch of people that want to join the room and be able to control the music and then those people can join the room they can vote to skip the song they can pause the song play the song whatever permissions you give them that's what they will be able to do and that will actually physically change the music playing you know out of the speaker or out of your phone it's pretty cool you can press like a pause or play button and you will see that spotify on whatever device it is that you have it connected to even if it's not on the same network will actually respond to that command so that's what we're going to be doing hopefully you guys are excited about this again can't stress enough how much you are going to learn from this series so we'll dive in in a second but i need to first thank the sponsor of this video and this series which is algo expert algo expert is a coding interview prep platform that has over 100 coding interview questions it's designed to help you ace your coding interviews and was personally what i use to land an internship at microsoft and an offer from shopify it has full video explanations for each unique coding question and other resources like a data structures crash course and behavioral interview tips you can check it out from the link in the description and use code tech with tim for a discount on the platform all right so now that we've gone through that i apologize for the long introduction but let's talk about what we need to get started first thing is we need a code editor now i'm going to be using vs code i would highly recommend that you do get vs code as well because there's some specific things and some nice extensions and plugins and stuff we'll be using but you can download that from the link in the description we're gonna need python obviously you can download the latest build from this website and then we're gonna need npm and node.js which again i'll leave a link in the description you can download from there all right so now that we have all of that stuff downloaded let's go to vs code you can see i've already created a folder here i've called it react django tutorial and the first thing we're going to do if you're using vs code is install a few extensions now the first extension i want us to get is prettier this is just going to make our life a lot easier when we're writing javascript and html code you can download that from the extensions pane here and just type in prettier next what we're going to need from the extensions pane is the python extension so you can get that here you can see it has 26 million downloads i just type in python then we're going to get the django extension pick whichever one you want but i'm just going to go with the one that has the most downloads then lastly we want the react extension so we'll get the es7 react redux graphql so on snippets didn't mean to press that but you get the point i just make our life a little bit easier and actually one more i lied we're gonna get the javascript extension as well you can see i already have these installed but javascript es6 code snippets again just to make our life a little bit easier all right so now that we have all of those extensions what we need to do is actually install a few python packages specific for django so we can actually start using that so obviously i'm assuming you have python installed at this point if you do you should also have a tool or command called pip installed so go to a terminal whether it's your command prompt whether it's your terminal on mac or linux or the terminal and vs code and type pip and see what happens now notice for me something did happen i didn't get an error essentially that that thing popped up that is good that's what you want to see if you're on mac or linux and pip isn't working for you then type pip3 again i don't know actually why that's popping up with that command prompt window but ideally you just want to not get an error when you type these commands once you have that and pip is working then what we're going to do is install django and install django rest framework now for some reason your pip command isn't working i will leave some links in the description two videos that i've created that pretty much show you how to fix pip they're not called how to fix pip but i promise they show how to do that so you can watch those videos and hopefully figure it out anyways once we do that we're going to type pip install and then we're gonna oops if i can get rid of that extra a and then we're gonna type django and django rest framework so separated by spaces first one django and then django rest framework and go ahead and press enter now here i don't know again why it's popping up that command prompt for me but it is but you could see the command prompt installed those make sure that installs and once you have those installed we're good to go and we can start using django alright so now we have those modules installed first thing we're going to do make some folders somewhere on your desktop or wherever it is that you want to use this name it something doesn't actually matter what you name it i've named mine react django tutorial get into that folder from your command prompt if you're on vs code just open open up a terminal you can drag that up from the bottom of the screen and what we're going to do is we're going to type django hyphen admin and then we're going to type start project followed by the name of our project django admin should be a command that will work once you've installed django on your system alright so from here we're going to pick a name i'm going to pick music underscore controller as the name of our app or our project but you can name it whatever you want so there we go now we see we get a folder here and inside of this folder we have another folder called the same thing and a file called manage.pi we'll talk about these files specifically later but just to go through them quickly we have settings.pi this is where all of the settings for our project are going to be and kind of this folder right here will be the project folder and you'll see why that's important in a second because when we make a django app what we actually have is kind of the project and then we have apps within that project so this is our project music controller the next thing we're going to do is make an app and an app is what we need to do if we actually want to say render something on the screen or have database models or all those kind of things so now i'm going to say django admin and substart project i'm going to type start app and then i'm going to name my app now the first app that i want to create here is going to handle our api so i'm going to call this one api but again call it whatever you'd like so django admin start app api and actually before i do that i'm going to cd into this music controller directory because i want this app to be inside of this directory here not alongside it right so not in the same exterior directory all right so now i guess we can go django admin i'm just going to modify this line start app and we will call this one api go ahead and hit enter and we can see an api folder shows up inside of our music control folder now if we open this one up you'll notice that there's a few different things inside of here we have this migrations folder you don't have to worry about that a nit.pi this is just to make this a python package admin dot pi app stop pi models.pi that's where our database models are going to go test.pi this is where you would put tests if you were testing views or models or whatever it may be and then views.pi this is where we're going to put the code that's actually responsible for rendering our views or actually our api endpoints in this case so the first thing we're going to do here is we need to add this app that we just created to our project so remember this music controller folder inside of this other music controller folder is kind of our project settings and a project folder in a sense so inside of here we're going to go to installed apps and we're simply going to add the following line assuming that you called your app api if you call it something else then you're going to change wherever you see api to be that name we're going to say api dot apps this will be the same regardless of what you named it and then dot api config now api make sure that it's lower case on the p and i and i'll show you where we're getting this from but we're trying to reference or just add this app sorry to the to the project so api.apps.api config now if we go to api and we have a look at the apps file here we have api config this is a class that was automatically created when we created this app so that's what i'm referencing i'm saying api the dot apps file and then the dot api config class that you see right there so that's the way that you can kind of figure out what you need to put here to add the app now that we're already here we're also going to add rest framework which is another app that we need for our project so api.apps.api config and then rest framework all right now that we have that i'm actually just going to show you how we can create our first view and start running this django server that's kind of the first steps i guess for this video so we're going to go inside of api and api is our first app and inside of here we see views now views this is where we're going to write all of our endpoints now what i mean by endpoint is something like say slash hello or slash high like hello would be an end point high would be an endpoint an endpoint is just pretty much after the slash right it's like a location on the web server that you're going to now we can write some pretty advanced endpoints and functions and stuff we're going to keep it pretty simple right now we're going to make a function we're going to define this as main this is going to take in a request and this is required when we make our view we need to have a request parameter in our function and what this function will do is simply return a response so whenever you have a web server what happens is there's an incoming request right denoted by this request variable that goes to an endpoint and then that endpoint will return a response to the sender right and that response will be in some kind of format maybe it will be json maybe it will be an html response right in which case we'll render something onto the web page so when we do this what we need to do is actually import http response we're going to say from django.http import http response now this is just to show you an example we won't actually use this later in the video but we're going to say http response this will be returned sorry and inside of here we can simply return some text so we can say something like hello and this is just what will be shown on the web page uh when we actually hit this end point all right so now we have http response returning hello now what we need to do is actually figure out how the urls are going to point to this function because right now all i've done is just define a function we need some way of figuring out well what's the path to this function like do i type slash hello do i type slash main how do i actually get here well that's where we're going to configure the urls first thing i'm going to do is make a file inside of api and i'm going to call this urls.pi we're going to need this and this is going to store all of the urls local to this app you'll see what i mean by that in a second but we will just keep this file open because we'll use this in fact i will split this on the right of my screen all right next what i will do is i'll go to the urls.pi file inside of musiccontroller now this i want you to be over here and in fact the split might not be a bad idea or might be a bad idea because my text is so big but inside of here you can see we have urls now this is where the main url is going to be sent whenever something is typed in so whenever i type whatever it may be you know domain dot com slash and then i type slash hello after the slash will be sent to this file and then this file will kind of dispatch these urls to the correct applications in fact you can see right here this is saying okay if we see a url that looks something like slash admin and then slash dot dot dot whatever else on that side then send that url to admin.site.urls it will take care of it and it will render whatever needs to be rendered right now we could add something else that says oh maybe not admin maybe we want to say you know hi or something so now when we hit the endpoint high it will dispatch that url to this file essentially anyways we want to add our own and we want to dispatch urls to this file right the one that we will write shortly so inside of here we're going to say path we're going to add our own path now instead of having some kind of i don't know a prefix i guess we'll just leave this blank meaning we if we get any url we're going to send it over to this file and inside of here we're going to type something called include we now need to import that from up here that's just a function and inside of include we're going to type api dot urls now what that's saying is all right whatever the url is that's sent here dispatch it and send it over to api dot urls so now inside of api.urls i'm actually just going to copy this code here although we won't use most of it we'll go inside of here and now we will write some urls and instead of including another file we'll simply point them to this view that we created right here or i guess that we'll just point one endpoint because we only have one uh but this is this right urls nope this is the right urls file we can get rid of the import for admin and actually get rid of the import for include as well and we're going to import up here from dot views import main the function that we just wrote and now what we'll do is we'll have this blank string and what it will return is main so what this is saying is if we get a url that is blank that doesn't have anything on it then call the main function and do whatever it says inside the main function so return hello as an http response all right so now that we've done that what we're going to do is actually run the web server but before we do that we need to type in the following command i'll explain what it does in a second so python manage.pi and then make migrations now the reason we have to do that is we just have to update the database and there's actually not really one created right now that's why we're making migrations to store the current changes that we've made to this app now we don't need to do this all the time but whenever we make a change to a model or make a change to the database we need to run this now the reason we're running this is because this is our first time doing the application or first time i guess booting up the application so we need to initialize the database now you might be like what database we haven't made a database django automatically creates one and it stores some admin related stuff so whenever we start we just say python manage.pi make migrations notice no changes detected okay perfect then we're going to say python manage.pi migrate like that now that we did that notice that all this stuff happened okay you know applying all of these migrations blah blah admin auth so on so forth now we're good we can actually go ahead and run the web server again don't worry if you don't understand why we did that but now see this this db.sqlite3 file has showed up and that's the database that we need for application so now we're going to say python manage.pi run server this as it says is going to run the web server so we run that notice it says okay you know performing checks all looks good and it says start development server at and then this url so what i'm going to do is press control click on this url and notice that what do we get oh we get hello all right so that is the html that was returned and that is rendered on the screen now let's just have a look at what happens if i change this to be say an h1 tag instead so now h1 and i go ahead and save that and notice down here that my server is automatically restarting every time i make a save to one of these python files even if i don't change anything and i just do control s it should actually rerun it yeah reran right there so that's something nice about django you only have to run the server once unless you make a major change to something like the database models and it will automatically update for you but let's go back here let's refresh the page and now we get our nice h1 tag and notice that it says hey we had a get request at blah blah whatever right the slash now let's just mess with the urls a little bit more just to make sure we understand them so what i'm going to do is go inside of here and actually put home so now you'll see what happens the server is going to restart when i go here i actually don't get a page because there's no route to nothing it's funny but there is there's no route to get to nothing so instead if i type slash home now notice it brings me to this page now let me just show you again in this main urls file i know i'm going kind of fast what happens if i do something like slash api or actually sorry not slash api but api slash what's going to happen now if i try to go to slash home well let's run this and obviously we get a page not found but now what happens if i go to slash api well if i go to slash api we still get nothing found but now if i go to slash api home it brings me to hello so i just want to illustrate how this works but you see we have api slash and then inside of here we have home so that's saying okay whenever we get api slash send the rest of the url to this file and then we check inside of here for the rest of the url and if we see home we render this page now just to note we could technically do something like path and then just leave this blank and also make this home and there we go wait what's happening here oh sorry not home main my bad oops and now if we run this and we go to api slash it it brings the same function so we can have multiple endpoints that go to the same place but anyways that is all i wanted to show so that's actually it for this first video we're just setting up django getting things working hopefully understanding the basis and getting an idea of what this tutorial series is going to look like again it's going to be a long tutorial series please do let me know what you want to see in the comments down below that being said i hope you enjoyed if you did make sure to leave a like subscribe to the channel and i will see you in the next one [Music] you

Channel: Tech With Tim

Views: 298,775

Rating: 4.9694552 out of 5

Keywords: tech with tim, django, react, react django, django react, django tutorial, react tutorial, django react tutorial, django react tutorial 2020, python django react tutorial, javascript react tutorial, javascript react, full stack web app tutorial, full stack python, full stack python javascript, javascript full stack, python web app, javascript web app, react tutorial 2020, django and react tutorial, react and django tutorial, react and django project, django and react project

Id: JD-age0BPVo

Length: 19min 15sec (1155 seconds)

Published: Sat Nov 07 2020

Reddit Comments

[u/Yash_Varshney]

Hey tim, I am a boy in middle school. Iove to watch your tutorials. I am a big fan of you. I always recommend your youtube channel to my friends. I tell and clear the concepts very well. I have been following your videos from last 2 years.

Thanks Tim, You're genius. Hands off.