Django & React Web App Tutorial - Authentication, Databases, Deployment & More...

Рет қаралды 165,616

Күн бұрын

In this video, you will learn how to use Python and JavaScript to create a full-stack web application. We will be using Django for the backend & React for the frontend as well as implementing authentication using JWT tokens. And as a bonus, I am going to show you how to deploy this application for free.
WSO2 Code Challenge: tinyurl.com/4whmzvsd
Choreo page: tinyurl.com/ywr7ak29
Choreo docs: tinyurl.com/2fvamzu9
Discord server for any questions: / discord
🎞 Video Resources 🎞
GitHub Repo (Completed Project): github.com/techwithtim/Django...
JWT Token Explainer Video: • Understanding JSON Web...
⏳ Timestamps ⏳
00:00:00 | Video Overview
00:00:39 | Project Demo
00:03:03 | Win a Cybertruck or $100,000
00:04:32 | Backend Setup/Installation
00:10:11 | Django Settings
00:14:39 | Understanding JWT Tokens
00:18:00 | Making The Registration View
00:25:40 | Connecting Our Auth Routes
00:32:58 | Creating Custom Models
00:38:57 | Writing Create, Read & Delete Views
00:50:38 | Frontend Installation/Setup
00:52:20 | Frontend Organization & Axios Setup
00:59:32 | Writing Protected Routes
01:08:57 | Navigation & Pages
01:16:35 | 404 Page
01:17:30 | Making A Generic Form
01:26:15 | Adding Form Styles
01:27:06 | Connecting The Login/Register Form
01:31:42 | Building The Home Page
01:44:10 | Building The Note Component
01:48:41 | Frontend Finishing Touches
01:52:20 | Database Deployment
02:00:03 | Deployment Configuration
02:05:02 | Choreo Project Setup
02:07:39 | Backend Deployment
02:14:30 | Frontend Deployment
02:16:23 | Connecting The Fronted To The Backend | 02:16:23
Hashtags
#techwithtim #djangoproject #djangorestframework #javascript

Пікірлер: 241

@pycat141 2 ай бұрын

Haven't even started watching, but want to thank you for the video in advance. You're effort in raising generations of young (or junior, rather) developers is underestimated. One love, man.

@StanWukong 3 ай бұрын

This couldn't have come at a more perfect time, I'm really grateful to whatever made you release this now

@lilian6171 3 ай бұрын

I agree, just finished the music controller tutorial yesterday

@shafiulAlamShafi 3 ай бұрын

Same here, just started learning Django

@andrewthompson4228 3 ай бұрын

Yeah, I needed this right now. Just started working for a company that has a lot of in house build web apps that I need to know better. I am only a backend guy so this will be great.

@niranjan986 3 ай бұрын

bro , you are a life saver. keep on doing the great work . We want more backend videos like this. Especially Django

@thesnedit5406 3 ай бұрын

You won't believe me but this is exactly what i was looking for. Thank you, tech with tim!

@marktaylor9886 3 ай бұрын

Oooh, been hyper focused on this channel for 3 weeks and now this. Nice.

@barscantayiz8131 3 ай бұрын

I liked how effective you use the components and react structure as well as starter template for django and simplisticly explain the concepts. This is a great video and I hope see more of them, django&react different kind of applications.👏🙌.

@itzAustin-qr8zx 3 ай бұрын

Thank TIm. this is exactly what i've been looking for, I'm tired of build admin user functionality with Flask. (which i also learned from your Flask x React video)

@vicky-mc8063 3 ай бұрын

This is what i was exactly looking for the past week... Thank you so much buddy... Im really,... REALLY GLAD that i follow ur channel

@_zEuS0390_ 2 ай бұрын

I'm also learning React at the moment. I recently found that there's a shortcut for creating these components in VS Code. You just need to type 'rfce' (function) or 'rafce' (arrow function). This saves a lot of time.

@dhruv3962 3 ай бұрын

Thanks Tim that's exactly i was looking for

@Complexo_escolar_privado 3 ай бұрын

I really like your videos, I learn a lot from them. My dream is to belong in one of your classes but first I need to improve my English because I speak Portuguese, I live in Angola Africa and some things here are a bit limited, but I love programming, please don't stop, your channel is one of the schools I attend.

@abhisheksharma10600 2 ай бұрын

This is the best explanation for django and using it with Reactjs. Thank you so much. Please make more videos using the django backend and react frontend. Thank you so much ❤

@abd1428 3 ай бұрын

nice I have been looking for new content about this , thx Tim

@neilkumar3626 3 ай бұрын

perfect; includes everything and is easily understandable

@TyronneRatcliff 7 күн бұрын

One of my favorite tech stacks. Awesome tutorial!

@gilles01990 3 ай бұрын

Thanks Tim for all your content !

@oluwaseunladeinde410 Ай бұрын

Lovely piece of work Tim. Thank you for sharing.

@RosieLee-em3cc 2 ай бұрын

Thanks Tim. What a great tutorial !!!

@EmmanuelBronyah 3 ай бұрын

Tim, you are a live saver!. Thank you very much.

@yasynbenrhouma2814 3 ай бұрын

You are doing god's work, We all appreciate you

@insensibility 3 ай бұрын

You're amazing, Tim!

@awan_kurniawan2962 3 ай бұрын

the one I look forward to the most

@spsomnath 3 ай бұрын

This is exactly what I'm looking for

@opokuandrew5716 3 ай бұрын

exactly what I was looking for

@KayderimGameplays 3 ай бұрын

Thanks Tim!

@rolandonunez1893 2 ай бұрын

Thank you very much for this!! it helps me a lot!!!

@nazmusas 2 ай бұрын

Next we need FastAPI + React

@youssefbarkaoui3502 13 күн бұрын

great tutorial and very efficient thx dude

@joeakatsa2270 Ай бұрын

bless up man waiting for the ecommerce one now

@PRIME322 3 ай бұрын

Bro thanks for your unconditional help ❤❤❤

@PyGpt_insight 3 ай бұрын

sir thank u so much for the heat you are my inspiration why i learnt programming and because of u i am doing it at the age of 14

@TechWithTim 3 ай бұрын

wow! happy to hear that, keep up the great work!

@PyGpt_insight 3 ай бұрын

thank u sir i will keep it up@@TechWithTim

@imSky69 Ай бұрын

you are helping me alot man , thank u so much

@rdnexta 3 ай бұрын

Bro literally set time like 222222🔥🔥

@uzairzarry8691 3 ай бұрын

Now you are talking i was waiting for this 😂❤

@andresbonelli 25 күн бұрын

This is pure gold...

@yessirski7868 2 ай бұрын

hey tim been watching you for about 3 years now. Luv the content you provide. Could you do a crash course/tutorial on building an app using MERN stack?

@ericmuijs1938 2 ай бұрын

Perfect, thanks a ton!

@ragnarok9131 3 ай бұрын

Great video!! Thankyou

@solartribal7273 Ай бұрын

Finally Django XD. Thanks Tim :)

@basura3157 3 ай бұрын

Hey Tim, I was just wondering if you had any plans in the near future (few months or so) to make and release an updated flutter tutorial. I've loved all of your tutorials so far and I'm really interested in learning flutter and I'm sure other people would be too.

@samarthsaxena692 4 күн бұрын

I wanted to thank you for creating so many interesting videos. I was wondering if you could do more Django projects, such as how to set up google authentication.

@gustavojuantorena 3 ай бұрын

Thank you!!

@bigonhim14 2 ай бұрын

Great Tim Thank you.

@osikoyaadeola2530 Ай бұрын

Thank you so much for your time.

@jonyifamily7311 2 ай бұрын

Thanks for your great videos

@not_amanullah 2 ай бұрын

This is helpful ❤

@aashayamballi 3 ай бұрын

Thank you!

@cruzej2228 2 ай бұрын

good project to example to practice

@GamePlay-pl2nv 3 ай бұрын

hi , i wanted to thank you for all your time and effort,one of most important things we need as a developer is securing our apps,could you please teach us how to secure our apps(secure coding) so it won't be hacked easily, thank you again

@akkiammuchannel143 3 ай бұрын

Hi Tim, out of curiosity will you consider looking into other parts of programming like game dev with Unity or Godot?

@kazmi401 3 ай бұрын

Keyboard sound is quite nice.

@joshuaarinaitwe8351 2 ай бұрын

Tim you should know that you are a genius

@ffzz007 2 ай бұрын

Thanks Tim alot.... I have a humble request that if you could add a Social Login too with this application and upload a second part and that would make this a Complete Authentication system. Hope you consider this request❤

@devicodebyte 3 ай бұрын

Been trying to do user authentication but loads of trouble thank you Tim.

@YacineNourine Ай бұрын

very informative content, 👏👏🏆

@potrishead Ай бұрын

Awesome video, thank you so much! But I have a question. Why do you sometimes use 'python3' and sometimes 'python' in the Terminal?

@reza-iq5df Ай бұрын

Thanks tim

@hassanjaber8169 2 ай бұрын

More Django Videos Please!

@EnglishRain 3 ай бұрын

I got excited to see a DJI app for a sec

@jandosabdiraiym5623 11 күн бұрын

Nice

@yerneroneroipas8668 2 ай бұрын

Hey Tim, I struggle to follow your tutorials but I made it through this one. It would be nice if you broke your github code into branches based on chapters in the video or break the video up and associate the code at each stage as a different branch.

@bigonhim14 2 ай бұрын

Great Idea ..Please Tim consider doing this for your subsequent projects

@yacoubasylla7358 2 ай бұрын

Thanks

@somtechnology1811 3 ай бұрын

can tell us where can we find full course for Flask or can u do it please

@batuklal 2 ай бұрын

hey completed this one and everythin worked fine now i will modify it more so i can upload it in my resume since this is my first project.

@bigonhim14 2 ай бұрын

Congrats Were you able to upload the proect on choreo

@batuklal 2 ай бұрын

@@bigonhim14 yeah every thing was fine and uploaded it tho the project is very basic we should try to implement update partsince it doesn't cover all crud operation

@PANDURANG99 3 ай бұрын

Looking for it long time

@404-not-found-service 2 ай бұрын

wow Thanks

@gabrielt.jaeger2722 3 ай бұрын

Can we have server-side rendering with django like in nextjs?

@kostiantynjohanlanguedoc3155 3 ай бұрын

Thank you very much 😊 for your job... That's really helpful part of my personal education 😁

@jonn5422 Ай бұрын

trying to follow along on this but React is not a Buildpack option for me when creating the frontend service in choreo...

@chegegitiche Ай бұрын

Thank you for the lovely video quick question at minute 31 you are trying to get the access token but on my side im getting the error "no active account found with given credentials" do u have any pointers as how to resolve this

@neiljohn2637 20 күн бұрын

did you create the user, as in did u feed in username and password in /register url

@VarunTripathi8307 3 ай бұрын

This video will cross million views

@TechWithTim 3 ай бұрын

I hope so :)

@culdezack 2 ай бұрын

django newbie here, so if I wanted to display the username in the home page what would be the best way to do that? could I just access that in a view somehow?

@yass3lon 3 ай бұрын

What made you change from Windows to macOS?

@Saibentos 2 ай бұрын

Good job

@TechWithTim 2 ай бұрын

Thanks!

@ValentinaSirbu-qd5zo 2 ай бұрын

Hi, is there any other platform that would allow to host the website for free/ or for a smaller price but from a private repo?

@MATHANM23CS099 2 ай бұрын

Brother can you make advance tutorial or explore the advance concept and show any real time project code for beginners

@sridhar7251 10 күн бұрын

while building the in choreo, i am not getting the build check done due to docker fail in step 2 please help!

@Maxmarcos84 Ай бұрын

Do you have a video where you explain how to handle errors and show the actual server message, because the catch error from this exaple just says "Request failed with status code..something" when try to create an user thay already exist or you try to login whith a wrong password. Thanks!

@aruns6214 3 ай бұрын

What the f*ck i am waited for perfect video for django+react ,thank you so much man🥳🥳🥳🥳🥳❤❤❤❤❤

@TrilioniME 2 ай бұрын

FastAPI + React example please. Thank you for Flask and Django.

@hasithawikramasinghe7293 2 ай бұрын

Hey, Thank you very much Tim. This is an awesome video. at the last moment in the deployment part when I'm trying to create a connection for frontend, I'm getting an error called "Something went wrong while creating connection for Development environment. As a result the connection was partially created." I tried almost everything to get rid of this issue. Do you have any idea what can I try further?

@tishan-89 2 ай бұрын

Please check whether your backend is deployed in to the dev environment before deploying frontend

@foenixsc5412 15 күн бұрын

AxiosError: Request failed with status code 502. Anyone know how to fix with Choreo?

@rahneshin752 3 ай бұрын

❤❤

@nefix6819 3 ай бұрын

Maybe react & fastapi video?

@danielhalmstrand2123 Ай бұрын

Hello Tim and thank you for a great tutorial. I used your tutorial and learned a lot. I have some error when I try to login and it is 415 error saying that the content-type should be "text/jsx" and I keep getting that in the error alert. I tried to add "config.headers.setContentType("text/jsx");" at start of the api.js after getting the token from local storage but still getting same error. I wopuld appreciate it if you could assist me with that.

@lll-gr7dk 3 күн бұрын

Can you also make a tutorial video on deploying on Choreo with a NEXTJS project

@oj43085 3 ай бұрын

very cool! following along the video , stuck at api.js does not provide export named 'api' even though it does.

@TechWithTim 3 ай бұрын

Just make sure you have the export name before it

@batuklal 2 ай бұрын

can u pls make a e commerce website fully complished with django rest framework it will be very helpfull in one video

@abdulhannan8129 2 ай бұрын

Hello tim sir. Sir I have a question that I am not good at maths so can I learn dsa and become good at it??

@poldiaz Ай бұрын

Failed building wheel for psycopg2" - Windows using virtualenv and pip solution please

@Xryndelub228 21 күн бұрын

Thanks a lot, Tim! But I've encountered such a problem, connected to a module named "rest_frameworks." For some reason, it gives me this error: ModuleNotFoundError: No module named'rest_frameworks'. I tried to find a solution on the internet, but I couldn't find anything that worked for me. Can you please help me? (If you know what the problem is)

@KishanPatel-gq1sw 15 күн бұрын

im getting a an error in the backend saying broken pipe, but the code still passes a 200, and also when I login its not sending me to the home page

@samarthsaxena692 4 күн бұрын

Hi, I felt that this video was quite helpful, but I have two questions. My first question is, when you filtered the notes queryset based on the author, couldn't you have just accessed the notes from the user by caccessing user.notes? My second question is about JWT. I have two projects, one is a website backend which is coded in Django. My other project is a desktop application written in Java. I want to if there's a way I can use JWT tokens to communicate between my java application and django website to authenticate the user? If so, can someone help me figure out how to accomplish this?

@udithweerasinghe6402 Ай бұрын

How to deploy both components to production?

@Michelle-me6sg 2 ай бұрын

should we be hashing the user passwords we are saving? I am getting error "{ "detail": "No active account found with the given credentials" }"

@MuhammadHaseebAhmed Ай бұрын

have you figure out the problem?

@gavin4056 28 күн бұрын

yea im getting the same issue, the token obtain only works with superuser logins

@ZoneTasker 2 ай бұрын

When building the frontend I keep getting the following error: Rollup failed to resolve import "react-router-dom" from "/app/src/App.jsx". Anyone has any ideas why? It's happening on the deployment to Choreo

@pravachanpatra4012 7 күн бұрын

TIM HOW CAN REFACTOR THIS TO USE A CUSTOM USER MODEL?

@b-ball7458 2 ай бұрын

Was really enjoying the tutorial until I ran into an error when doing the make migrations where it states "connection to server on socket "/tmp/.s.PGSQL.5432" failed: Socket operation on non-socket Is the server running locally and accepting connections on that socket?" Cannot get past this :(

@oblivion7300 2 ай бұрын

You and i seem to be the only ones following along I was doing okay Unttil I kept running into CORS issue added CORS to chrome browser and still having an issue. I’m learning its best to to learn from ChatGPT or something like that because at least with that you can get an answer back

@CamilleLeon 2 ай бұрын

try changing your 'settings.py' file ln98 to DATABASES = { "default": { "ENGINE": "django.db.backends.sqlite3", "NAME": BASE_DIR / "db.sqlite3", } }

@oblivion7300 2 ай бұрын

@@CamilleLeon It was. typo. then I had a CORS issue that drove me crazy and then I got a chrome plugin that allowed it to work.When your learning to code this can be so frustrating