Introduction to the Full-Stack Project
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 AlgoExpert. AlgoExpert 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.
Environment Setup & Prerequisites
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 going to 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 going to 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...
Installing Django Packages with Pip
...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 in 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, if for some reason your pip command isn't working, I will leave some links in the description to 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 going to—oops if I can get rid of that extra a—and then we're going to type django and djangorestframework, 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.
Creating the Django Project and App
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 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-admin and then we're going to type startproject 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_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.py. We'll talk about these files specifically later, but just to go through them quickly, we have settings.py. 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 instead of startproject, I'm going to type startapp 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 startapp 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. Alright, so now I guess we can go django-admin, I'm just going to modify this line, startapp 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 controller folder.
Configuring Project Settings
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. __init__.py, this is just to make this a Python package. admin.py, apps.py, models.py—that's where our database models are going to go—tests.py, this is where you would put tests if you were testing views or models or whatever it may be. And then views.py, 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.apps, this will be the same regardless of what you named it, and then .ApiConfig.
Now Api make sure that it's lowercase 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 project. So api.apps.ApiConfig. Now if we go to api and we have a look at the apps.py file here, we have ApiConfig. 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 .apps file, and then the .ApiConfig 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.ApiConfig and then rest_framework. Alright, now that we have that...
Creating a Simple Django View
...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 /hello or /hi. Like hello would be an endpoint. hi 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 HttpResponse. We're going to say from django.http import HttpResponse. 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 HttpResponse, 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 when we actually hit this endpoint.
Setting Up URL Routing
Alright so now we have HttpResponse 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 /hello? Do I type /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.py. 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.py 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.com slash and then I type /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 /admin and then /... 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 hi, 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 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.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.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.py 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 .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 HttpResponse.
Running the Development Server
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.py makemigrations. 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.py makemigrations. Notice, no changes detected. Okay, perfect.
Then we're going to say python manage.py 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 and 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 our application.
So now we're going to say python manage.py runserver. 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.
Exploring URL Patterns and Wrap-Up
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 /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 /api/ or actually sorry, not /api, but api/. What's going to happen now if I try to go to /home? Well, let's run this and obviously we get a page not found. But now what happens if I go to /api/? Well if I go to /api we still get nothing found. But now if I go to /api/home it brings me to Hello. So I just want to illustrate how this works, but you see we have api/ and then inside of here we have home. So that's saying, okay, whenever we get api/, 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/ 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.
