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

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

[@StanWukong]

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

[@lilian6171]

I agree, just finished the music controller tutorial yesterday

[@shafiulAlamShafi]

Same here, just started learning Django

[@andrewthompson4228]

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]

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

[@thesnedit5406]

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

[@marktaylor9886]

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

[@pycat141]

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.

[@barscantayiz8131]

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]

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]

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

[@abhisheksharma10600]

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 ❤

[@dhruv3962]

Thanks Tim that's exactly i was looking for

[@_zEuS0390_]

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.

[@Complexo_escolar_privado]

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.

[@neilkumar3626]

perfect; includes everything and is easily understandable

[@abd1428]

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

[@oluwaseunladeinde410]

Lovely piece of work Tim. Thank you for sharing.

[@gilles01990]

Thanks Tim for all your content !

[@yasynbenrhouma2814]

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

[@RosieLee-em3cc]

Thanks Tim. What a great tutorial !!!

[@EmmanuelBronyah]

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

[@PyGpt_insight]

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]

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

[@PyGpt_insight]

thank u sir i will keep it up@@TechWithTim

[@basura3157]

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.

[@yessirski7868]

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?

[@awan_kurniawan2962]

the one I look forward to the most

[@opokuandrew5716]

exactly what I was looking for

[@KayderimGameplays]

Thanks Tim!

[@spsomnath]

This is exactly what I'm looking for

[@insensibility]

You're amazing, Tim!

[@rdnexta]

Bro literally set time like 222222🔥🔥

[@PRIME322]

Bro thanks for your unconditional help ❤❤❤

[@rolandonunez1893]

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

[@imSky69]

you are helping me alot man , thank u so much

[@nazmusas]

Next we need FastAPI + React

[@ericmuijs1938]

Perfect, thanks a ton!

[@uzairzarry8691]

Now you are talking i was waiting for this 😂❤

[@akkiammuchannel143]

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

[@GamePlay-pl2nv]

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

[@gustavojuantorena]

Thank you!!

[@osikoyaadeola2530]

Thank you so much for your time.

[@jessepinkman3734]

Nice Session , BIG Thanks

[@ragnarok9131]

Great video!! Thankyou

[@not_amanullah]

This is helpful ❤

[@cruzej2228]

good project to example to practice

[@bigonhim14]

Great Tim Thank you.

[@ffzz007]

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❤

[@aashayamballi]

Thank you!

[@solartribal7273]

Finally Django XD. Thanks Tim :)

[@devon047]

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

[@YacineNourine]

very informative content, 👏👏🏆

[@jonyifamily7311]

Thanks for your great videos

[@potrishead]

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

[@joshuaarinaitwe8351]

Tim you should know that you are a genius

[@kazmi401]

Keyboard sound is quite nice.

[@batuklal]

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]

Congrats Were you able to upload the proect on choreo

[@batuklal]

@@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

[@EnglishRain]

I got excited to see a DJI app for a sec

[@reza-iq5df]

Thanks tim

[@yerneroneroipas8668]

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]

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

[@chegegitiche2994]

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

[@MATHANM23CS099]

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

[@kostiantynjohanlanguedoc3155]

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

[@batuklal]

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

[@hassanjaber8169]

More Django Videos Please!

[@TrilioniME]

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

[@yacoubasylla7358]

Thanks

[@somtechnology1811]

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

[@PANDURANG99]

Looking for it long time

[@oj43085]

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

[@TechWithTim]

Just make sure you have the export name before it

[@julioccorderoc]

Can't go beyond 28:42. When running the command, it shows the error: connection to server at "localhost" (::1), port 5432 failed: fe_sendauth: no password supplied I just google it and it relates to more complex problems (when setting up the database), I dont think that is my case

[@abdulhannan8129]

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??

[@Saibentos]

Good job

[@TechWithTim]

Thanks!

[@yass3lon]

What made you change from Windows to macOS?

[@VarunTripathi8307]

This video will cross million views

[@TechWithTim]

I hope so :)

[@404-not-found-service]

wow Thanks

[@gabrielt.jaeger2722]

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

[@hasithawikramasinghe7293]

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]

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

[@user-cc9hi9nm9i]

Hey Tim thank you so much for the project. I finished it 🎉. Apparently the verification link to submit my application for the WSO2 Code Challenge is broken 💔. Keeps saying I should refresh and try again later.

[@bigonhim14]

Does it tell you how many draws you have been awarded

[@b-ball7458]

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]

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]

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

[@oblivion7300]

@@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

[@culdezack]

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?

[@nefix6819]

Maybe react & fastapi video?

[@YannAriell]

nice, what about Django & svelte

[@poldiaz]

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

[@ValentinaSirbu-qd5zo]

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?

[@udithweerasinghe6402]

How to deploy both components to production?

[@aruns6214]

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

[@timbrap4693]

Decoding jwt on frontend? ):

[@samdktv2158]

I cannot go pass 1:15:45 because mine does not show whatever yours is showing. All it shows is a blank page. Even when I navigate to other pages like register or home or login, it is still a blank page. Please help me!!! PS: I fixed it. Took me a while. I spelled Register wrong

[@pavanmadhusudan6646]

are function based views better than class based?

[@sahilchauhan3154]

to me its showing axios error: request failed with status code 400

[@simplegametutorials1341]

18:47 - I am making a project Manager. Do you have any recommendations? Like for example, What can I use for collaboration?

[@simplegametutorials1341]

40:57 - Nevermind, since you took too long to respond, I have figured it out by myself

[@simplegametutorials1341]

1:17:31

[@kennymilestech1576]

Hey Tim i get an axios error 500 cannot login or register but locally project was working fine. On choreo its not with that error, what am i missing

[@user-os4lj3pi4q]

Try to also read the error in console. The console gives information that is more helptul.

[@haitech7895]

there is an issue, which is that the authenticated user can access login and register. how to make those page protected from the authenticated user!?

[@jonathandavidson1379]

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

[@aryashbajaj223]

I am getting this error after deploying the backend component - 2024-04-12T18:38:21.7410641Z ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment? {"level":"INFO","logContext":null} Venv is activated so what's the problem?

[@bigonhim14]

when running the server ensure the virtual environment is activated and if activated ensure you run pip install django

[@Michelle-me6sg]

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?

[@rahneshin752]

❤❤

[@quranvirtual2566]

I have read Django documentation and follow through it and I want to ask you why we use react if all the one work can be done in Django? Isn't it create confusion where the sole purpose of these app developed is to organize and simplfy web dev. Why we use react?it's a frontend frame work. But I am confused......

[@tedeye9542]

You can sure do everything in Django but it will take you much time to create the nice front end design with Django template language and that's where react comes in handy. Don't forget, python is more suitable for server side while JavaScript is best for client side. So no matter how great a programmer, you'll always face limitations creating stunning and highly competitive web applications solely on Django framework.

[@quranvirtual2566]

@@tedeye9542 thanks

[@TrendzNoww]

This made me move unto my react journey off my MERN 🎉

[@PraveenPaul-od9en]

I will write complete notes here do like it Django for backend React for front end

[@fukuhackarz2717]

Hi Tim, I love your tutorials but I am stuck with this one. I keep getting “AxiosError: Request failed with status code 401” when trying to login on the Choreo deployed app after I have registered a new user.

[@vedantmodi9474]

Did you find a solution?

[@fukuhackarz2717]

Not yet but I’ve read it has something to do with the token. If I figure it out I will let you know mate 👍

[@bigonhim14]

either the database went off or ensure the server is running on your local server

[@mylovefeeling]

im having similar issue. i am using mysql and getting 401 error.

[@subhajitadhikary-99]

Watching the cybertruck winning challenge, and then he says its valid till April 30th, when I saw the time, its 1st May, 00:15, LOL 😆

[@Hari-ln1qd]

can anyone plz help me with login and register route connection at 1:29:00 , my code is crt but after i press on register button its showing axios error, status 404 error in the browser ????how to solve this plz help

[@aebel.shajan]

I just fixed it. My issue was that i had the keyword baseUrl instead of baseURL in api.js

[@akkazeusmubark8940]

i run the command requirements.txt, but doesn't work No error but just nothings down Teacher😥

[@TechWithTim]

you need to do pip install -r requirements.txt