Django & React Tutorial #1 - Full Stack Web App With Python & JavaScript
In this django and react tutorial we will be using python and javascript to create a full stack web app. The purpose of this series will be to learn how to use react and django together to develop a full stack web application. Specifically we will be creating a collaborative music playing app in which we will integrate our application with the third party Spotify API.
💻 AlgoExpert is the coding interview prep platform that I used to ace my Microsoft and Shopify interviews. Check it out and get a discount on the platform using the code "techwithtim" algoexpert.io/...
📝 Series Code: github.com/tec...
📙 VsCode Download: code.visualstu...
📘 Python Download: www.python.org/
📕 Node.js & NPM: www.npmjs.com/...
🔗 Fix Pip (Windows): • How to Install Pygame ...
🔗 Fix Pip (Mac): • How to Install Pygame ...
⭐️ Timestamps ⭐️
00:00 | Series Overview
02:40 | Tutorial #1
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰
💻 The Fundamentals of Programming w/ Python: tech-with-tim....
👕 Merchandise: teespring.com/...
🔗 Social Medias 🔗
📸 Instagram: / tech_with_tim
📱 Twitter: / techwithtimm
⭐ Discord: / discord
📝 LinkedIn: / tim-ruscica-82631b179
🌎 Website: techwithtim.net
📂 GitHub: github.com/tec...
🔊 Podcast: anchor.fm/tech...
🎬 My KZread Gear 🎬
🎥 Main Camera (EOS Canon 90D): amzn.to/3cY23y9
🎥 Secondary Camera (Panasonic Lumix G7): amzn.to/3fl2iEV
📹 Main Lens (EFS 24mm f/2.8): amzn.to/2Yuol5r
🕹 Tripod: amzn.to/3hpSprv
🎤 Main Microphone (Rode NT1): amzn.to/2HrZxXc
🎤 Secondary Microphone (Synco Wireless Lapel System): amzn.to/3e07Swl
🎤 Third Microphone (Rode NTG4+): amzn.to/3oi0v8Z
☀️ Lights: amzn.to/2ApeiXr
⌨ Keyboard (Daskeyboard 4Q): amzn.to/2YpN5vm
🖱 Mouse (Logitech MX Master): amzn.to/2HsmRDN
📸 Webcam (Logitech 1080p Pro): amzn.to/2B2IXcQ
📢 Speaker (Beats Pill): amzn.to/2XYc5ef
🎧 Headphones (Bose Quiet Comfort 35): amzn.to/2MWbl3e
🌞 Lamp (BenQ E-reading Lamp): amzn.to/3e0UCr8
🌞 Secondary Lamp (BenQ Screenbar Plus): amzn.to/30Dtafi
💻 Monitor (BenQ EX2780Q): amzn.to/2HsmUPZ
💻 Monitor (LG Ultrawide 34WN750): amzn.to/3dSD7tS
🎙 Mic Boom Arm (Rode PSA 1): amzn.to/30EZw9m
🎚 Audio Interface (Focusrite Scarlet 4i4): amzn.to/2TjXsih
💸 Donations 💸
💵 One-Time Donations: www.paypal.com...
💰 Patreon: / techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
⭐️ Tags ⭐️
- Django and React
- Django
- React
- Django and React Tutorial
- Django Tutorial
- React Tutorial
- Python Django Tutorial
- JavaScript React Tutorial
⭐️ Hashtags ⭐️
#Django #JavaScript #React
Пікірлер: 578
I am in process of learning python, django and js, react I came to Tim because he always has great and long tutorial explaining everything! I look and here is a series of connecting these two! Omg! I can’t even express how I feel 😄 I am gonna be staying all night with your videos Tim! Thank you so so so much
@pubgtv5304
3 жыл бұрын
Me too
@pilote111
2 жыл бұрын
@@pubgtv5304 me three
@boomiboom3900
2 жыл бұрын
@@pilote111 me four
@spectrespect
11 ай бұрын
@@boomiboom3900 me five
@adithaabeynayaka7867
6 ай бұрын
@@boomiboom3900 Me five
YESS!!! Here it is! You promised and you delivered. Thanks for providing the best content, Tim. Your channel is my favorite
@TechWithTim
3 жыл бұрын
Glad you enjoy it!
Just began the series right now and although it is two years old, it is quite amazing and pretty helpful! It does make fun to pratice that with you and learn from the scratch. Thanks to you, Tim!
I needed a series like this to use React with Django for completing an assignment to pass to interview round for a startup company. It was really helpful. Great tutorial series.
@felix-ej9in
3 жыл бұрын
i know python...but dunno javascript...will mosh's 48min javascript tutorial be sufficient as a prerequisite?
@MarsaAndari
3 жыл бұрын
All the best for the interview, mate!
@subhamshaw1726
3 жыл бұрын
If @Marsa Andari mosh tutorial helps you learn stuff then thats great
@subhamshaw1726
3 жыл бұрын
Thank you and i got the job. Like to thank tim for this tutorial
@harshit.chitkara
3 жыл бұрын
@@felix-ej9in It should be enough. I think so.
Hi Tim! Thank you so much for this tutorial. I'm a 27 year-old Japanese guy, who just learned coding. I just finished all of this series as well as a couple of your python tutorials, and now try to modify this project into my first portfolio. Hopefully I can go on an internship just by learning form your youtube videos and make something on my own lol
@kissanjamm3583
Жыл бұрын
Did u?
@rikthecuber
11 ай бұрын
Did you?
@emmang2010
11 ай бұрын
did you?
@rajsandhu3344
7 ай бұрын
did you?
@drakata27
6 ай бұрын
did you?
Love that you explain the fundementals of everything Tim, much easier to level with the tutorial than when the teacher assumes to much about the viewers knowledge.
when python and JS is combined together, you know something huge is going to be built
Oh my God! Exactly what I've been looking for.
@jameskobe1716
3 жыл бұрын
Exactly what I've been looking for !
Hey Tim! I am just Glad that you give us some django content I was having hard time doing some But I finally made it and fix the problems thanks :)
@felix-ej9in
3 жыл бұрын
i know python...but dunno javascript...will mosh's 48min javascript tutorial be sufficient as a prerequisite?
@adityakrishan4800
3 жыл бұрын
@@felix-ej9in yes
Hey Tim! You've Inspired me to create my own KZread Channel! Keep up the great content!
@intelcore7938
3 жыл бұрын
Nice Videos!
you literally saved my life i cant be more grateful with you, thanks for this valuable information
Just a heads up to people trying to work through this in late 2023, most of this is incredibly dated and you're going to hit various errors at video 3 relating to MUI and Babel. Even after running the code through various GPT models, I couldn't get it to work, so unless you're really comfortable troubleshooting don't waste your time.
Can't thank you enough for this, Tim. Way to go !
You always keep surprising your fans I've always wanted a series like this from you
After years of using adblock and skipping through sponsors in videos, you are the first youtuber where i disable adblock and watch all the ads, you deserve it, thank you for these tutorials!
Tim: 19 minutes Me: 119 minutes
@DesignMitho
3 жыл бұрын
I thought I´m the only one who takes so long. But We will improve 👍
OMG const gonna_be_best_series = true; Let's go Tim!! Waiting for the next videos
If you are looking for a video to get react and django working together, then this a good video. If you are wanting to learn how to build an app that plays music, Don't watch these 17 videos to learn how to build an app that never plays music.
You are just simplified and fast to learn. I go thru ur vdos for crash courses and reviving. Saves alot of time.
Hi Tim, thanks so much for this tutorial. It covers a whole lot about React and Django! Really helpful!
Was literally searching for a good tutorial on python and react last week! Thanks for this!
Felt the video was a bit fast midway, but I'm so glad you recapped things towards the end. Gave me the perfect summary to understand everything we covered.
That amazing... i was searching for a Django 3 + React tutorial all the day, then went into google to watch some random video, and found this video..AMAZING!
@shawnbeans7389
3 жыл бұрын
wow do u know django and react
This is the very best well explained quickstart DRF I've seen.
Ooh i like that first django tutorial videos so much, everything is so simple and the hardcore part hasn't began
@felix-ej9in
3 жыл бұрын
i know python...but dunno javascript...will mosh's 48min javascript tutorial be sufficient as a prerequisite?
@ViratKohli-jj3wj
3 жыл бұрын
@@felix-ej9in actually that's enough so you are good to go :D
@felix-ej9in
3 жыл бұрын
@@ViratKohli-jj3wj thenks m8
THIS IS JUST WHAT I WAS LOOKING FOR!!!!!!
I was waiting to learn JavaScript. I was fiddling around with p5js to learn the syntax. Now this tutorial arrived. This is perfect.
Clear, well explained, and straight to the point! Thanks for saving my time.
The install worked successfully! Congratulations! You are seeing this page because DEBUG=True is in your settings file and you have not configured any URLs. Why am i seeing this?
OMG I'm Happy you make video at this topic I'm first time on your channel
Was looking for EXACTLY this tim. Thanks!!.
Looking forward to watching the whole serie 😊🚀🇨🇴
I'm waiting for React Django videos too long, and here you are. Great work. Thank you ❣
@vesnamilosevic537
3 жыл бұрын
Kosovo je srce Srbije
Best Resource on KZread. Thank you
bruh no cap whenever Im like "hey I want to learn flask" or Django or really anything python related, you seem to start a tutorial series that day lmao. Looking forward to this. First tutorial is already really good.
Perhaps the best tutorial on Django.
@felix-ej9in
3 жыл бұрын
i know python...but dunno javascript...will mosh's 48min javascript tutorial be sufficient as a prerequisite?
@naveednaseer9943
3 жыл бұрын
@@felix-ej9in nope thats not even all the syntax on javascript that video is just like a promotion for his full paid javascript course
@felix-ej9in
3 жыл бұрын
@@naveednaseer9943 k
Wow! You are phenomenal. All of your content encourages me to continue to learn programming. Thanks
OMG !..... Tim, we love how u explain everything. OMG!....... I'm in love with this channel. Thank you ,Tim. Thank you soooooooo much for everything you put in this channel.
I've mostly used PHP(laravel) as my main backend for most of my web apps and Vue/React as my frontend. I guess it's time to add Django to my toolbox since I'm already well versed in Python. Thanks, Tim.
@Uknowjusticemill
3 жыл бұрын
I think Django is better overall in my opinion but PHP is a good language to have since it's more widely used and is easier to find jobs or clients since many older websites use laravel.
And this is ladies and gentlemen what they call "perfection"
Just what I needed! Been looking for DRF+React content for ages and its hard to find anything decent. How long will this series be ?
@MaxTheFireCat
3 жыл бұрын
Me too and next thing i know Tim drops a turorial
After 5 days of figuring out how this one really works, now I can do the steps fluently! I'm happy now.
@parthyadav3177
3 жыл бұрын
I am on day 1 , can you help me out save some time?
@graduatingea3175
3 жыл бұрын
@@parthyadav3177 Just do it repeatedly. until one time you can do it on your own without watching the video and hopefully you understand the concept.
Really Impressed , looking forward.
Damn bro. I was hoping for this and here you go!
I was waiting for this from long time.
Hey Tim, just began the series right now and so far it looks amazing! One small request... I was trying to do something with these two technologies but I got stuck at deploying them so they can be accessed somewhere else. Do you have in mind covering the deployment of an app like this? Thank you so much for your hard work!
I have worked with Django so most of this a refresher course however I have never use React though I studied it. So thank you for this tutorial i always wanted to figure out how to implement both
5:40 spent 30 min trying to figure out why pip isnt working, finally did, went back to this vid and a few secs later you mention your video guides for fixing it, good meme
Thank You!!!! All of us were waiting for this, you finally held your promise & fulfilled our wishes!!! Thank You.
@TechWithTim
3 жыл бұрын
No problem 😊
Already fell in love with this tutorial series! Just love your style and the way you explain and present all the videos! Stocked about the next video
What's the advantage of using Django instead of node js on the backend if you're gonna use react on the frontend? Wouldn't it be better to use only one language through the entire project?
@saradevanney9469
3 жыл бұрын
Why? If you know both languages, it's not an issue. FE and BE not integrated in any case.
@ThePhantomCoder
3 жыл бұрын
Some people are just better at Python then they are at Javascript, Tim being a good example
@aliasgar.burhani1099
3 жыл бұрын
Personally I find Django pretty easy going than nodejs as there are many things which are inbuilt in django
@jayitsaha9508
3 жыл бұрын
personally felt integrating ml and dl stuffs far more difficult using node...pretty easy on django... try it out maybe?
Thank you, friend! DO THIS KIND OF TUTORIALS MORE! Especially, React related ones!
Man, I can't thank you enough, I am literally in tears 🤣
Thanks tim for bringing up this series . I also request u to please come up with complete django 3 series .
thank you for the explanation. it helps me a lot
Thanks to you, I finally understood how Django works.
Hello this is great video
What a perfect timing! Thank you Tim!
Hi Tim, seems to be a really clear and ell built tutorial ! I'm learning, but even by doing everything as you did, I don't land on that "hello" page, but on the django landing page...
Exactly what I needed. I hope you'll cover everything that's necessary.
Love your Videos Tim, Big Fan of yours .
Thankyou so much for this playlist, it was really helpful for me!
Hi Tim, I was just about to start learning this combination. ON TIME!! Thanks
Perfect Tim’ing! Just what I needed!
I LOVE THE ENERGY ON THE CHANNEL MAN.....KEEP IT UP💎
I am not getting the "hello" on my screen. its saying the install worked successfully. what coul be the problem solved it, just went saving in all files. thank you so much. I hope I will grasp the second tutorial as well
@woodrow117
9 ай бұрын
wow, this fixed it for me! Thanks for sharing. What a simple fix.
Nice! One request for a video: file upload and download. For example in your project being able to upload or download a profile picture 😊
the idea actually legit. thought about it before but with youtube instead of spotify
Plz, don't stop this series. Cool..
A really great and clear explanation of how the things work.
Anyone using a mac or linux and needs to do the migrations, USE THIS, python ./manage.py makemigrations Reason: This is because in Mac and Linux, there directories work with forward slash for example 'usr/bin/mongod' But in Windows, They use the backslash so 'usr\bin\mongod' for example. Therefore you have to replace the .\manage.py to a ./manage.py. I am not a like-begger and I hate to ask for likes, but please like this so others will see this solution
@lowkeygaming4716
3 жыл бұрын
Actually the ./ is not necessary if they're already in the same folder where the manage.py is located but your explanation about the difference on the directory path is a nice thing to have. 👍
@bxr4231
3 жыл бұрын
@@lowkeygaming4716 thank you, I didn't even know that
Bro Best of luck for this new Web series
Thank you Tim! Love this channel
There are not a lot of react + django tutorials and I recently made a few projects with it, maybe I should make some tutorials too
Tim can you show us how to deploy the project in the end too? Love the content!
@adamcal4257
3 жыл бұрын
Corey Schafer did a good tutorial on deploying a project to a VPS and if you want to use something like Heroku, you can look into the docs, they have it all layed out nicely.
U cant imagine how much i am thanking you! thanks!
EXACTLY WHAT I WAS LOOKING FOR. GREAT JOB TIM 🥰
Thank you so much for everything from the tutorials to inspiration. You're my biggest inspiration for coding and I'm only 15
Thanks for the Time Stamps :) :p
I was waiting for this thank you very much Tim
YESSS THIS IS WHAT I WANTED @techwithtim :))))))))))))))))))))))))))))))
Great video!!!
@TechWithTim
3 жыл бұрын
Thank you!!
This is a real cool project. Not just an example; but really cool
Thank you! I've been wanting a tutorial like this for so long!
Hello. If I get it well, all this was simply to setup some kind of router. It seems to me overcomplicated, but will follow the series along. Thank you.
Eagerly waiting for the next part 😎
Yes favourite Python youtuber back with a bang !
Please add some core explanations also, like before doing any work practically, teach some theory or concept in ms-paint or anywhere so we can grab the things easily. Only spend 2 to 3 minutes on theory so it will be very helpful for us. Thanks 👍😊
@prawgspinkz8015
3 жыл бұрын
He said fron the beginning that the video is not beginner friendly ✌️
@faizahmed4283
3 жыл бұрын
@@prawgspinkz8015 i know but it would be more helpful for all the people and for any level for grasping the knowledge of behind the practical work.
@prawgspinkz8015
3 жыл бұрын
I get what you are saying... he probably said that because on his channel he also has a tutorial on Django framework .... But i think he will explain more about React because he doesn't really have tutorials about them.. Maybe also he is trying to make the Video short and precise ...
when I type python .\manage.py makemigrations I keep getting: can't open file '.manage.py': [Errno 2] No such file or directory as an error. I figured out that after I redid everything that what I needed to do was type: django-admin startproject music_controller . There needed to be space and then a period after music_controller
@bhargavkalita2207
3 жыл бұрын
Im getting the same error can you please explain the Solution in detail
@getsuresh
3 жыл бұрын
@@bhargavkalita2207 python manage.py makemigrations
Thanks a lot!! Very good tutorial!!
You are my god, thank you 🙏🏻 absolutely wonderful tutorial!
YESSSSS I was waiting for it!
Thank you so much for this awesome tutorials!
exactly what I have been looking for
Waited a long time for this
really great tutorial Tim never disappoints
Very clear explanation of the url routing!
Another great video! Thank you :)
No module named rest_framework ? what should I do?
@LiloG123
3 жыл бұрын
install rest_framework
@Saad-hi1zz
3 жыл бұрын
run pip install django djangorestframework in cmd or terminal
wassup tim! ur content is the best bro