[, 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 & # 39.

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 & # 39, 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 & # 39. 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