Django & React Web App Tutorial - Authentication, Databases, Deployment & More...
HTML-код
- Опубликовано: 4 июн 2024
- 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
This couldn't have come at a more perfect time, I'm really grateful to whatever made you release this now
I agree, just finished the music controller tutorial yesterday
Same here, just started learning Django
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.
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.
bro , you are a life saver. keep on doing the great work . We want more backend videos like this. Especially Django
You won't believe me but this is exactly what i was looking for. Thank you, tech with tim!
Oooh, been hyper focused on this channel for 3 weeks and now this. Nice.
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.👏🙌.
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)
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
Thanks Tim that's exactly i was looking for
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.
nice I have been looking for new content about this , thx Tim
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 ❤
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.
perfect; includes everything and is easily understandable
Next we need FastAPI + React
Lovely piece of work Tim. Thank you for sharing.
You are doing god's work, We all appreciate you
Thanks Tim for all your content !
Thanks Tim. What a great tutorial !!!
Thanks Tim!
Tim, you are a live saver!. Thank you very much.
This is exactly what I'm looking for
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
wow! happy to hear that, keep up the great work!
thank u sir i will keep it up@@TechWithTim
the one I look forward to the most
Thank you very much for this!! it helps me a lot!!!
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.
exactly what I was looking for
you are helping me alot man , thank u so much
Bro literally set time like 222222🔥🔥
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?
Thank you!!
bless up man waiting for the ecommerce one now
Bro thanks for your unconditional help ❤❤❤
You're amazing, Tim!
Now you are talking i was waiting for this 😂❤
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
Great video!! Thankyou
Thank you so much for your time.
Perfect, thanks a ton!
Hi Tim, out of curiosity will you consider looking into other parts of programming like game dev with Unity or Godot?
Thank you!
Been trying to do user authentication but loads of trouble thank you Tim.
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
Great Tim Thank you.
This is pure gold...
good project to example to practice
Keyboard sound is quite nice.
Finally Django XD. Thanks Tim :)
Thanks for your great videos
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❤
Awesome video, thank you so much! But I have a question. Why do you sometimes use 'python3' and sometimes 'python' in the Terminal?
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.
Great Idea ..Please Tim consider doing this for your subsequent projects
Tim you should know that you are a genius
very informative content, 👏👏🏆
I got excited to see a DJI app for a sec
Thanks
Thanks tim
Looking for it long time
can tell us where can we find full course for Flask or can u do it
please
What made you change from Windows to macOS?
Brother can you make advance tutorial or explore the advance concept and show any real time project code for beginners
More Django Videos Please!
This is helpful ❤
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!
Can we have server-side rendering with django like in nextjs?
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.
Congrats Were you able to upload the proect on choreo
@@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
trying to follow along on this but React is not a Buildpack option for me when creating the frontend service in choreo...
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?
Please check whether your backend is deployed in to the dev environment before deploying frontend
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?
Good job
Thanks!
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?
very cool! following along the video , stuck at api.js does not provide export named 'api' even though it does.
Just make sure you have the export name before it
can u pls make a e commerce website fully complished with django rest framework it will be very helpfull in one video
This video will cross million views
I hope so :)
FastAPI + React example please. Thank you for Flask and Django.
Thank you very much 😊 for your job... That's really helpful part of my personal education 😁
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.
should we be hashing the user passwords we are saving? I am getting error "{
"detail": "No active account found with the given credentials"
}"
have you figure out the problem?
yea im getting the same issue, the token obtain only works with superuser logins
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 :(
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
try changing your 'settings.py' file ln98 to DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": BASE_DIR / "db.sqlite3",
}
}
@@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
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??
Failed building wheel for psycopg2" - Windows using virtualenv and pip solution please
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
Try to also read the error in console. The console gives information that is more helptul.
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)
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
18:47 - I am making a project Manager. Do you have any recommendations? Like for example, What can I use for collaboration?
40:57 - Nevermind, since you took too long to respond, I have figured it out by myself
1:17:31
Maybe react & fastapi video?
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
I am also stuck at that point, but I keep getting the "Import .serializers could not be resolved" error. I've been searching for days for a solution.
@@Msgilt I had to restart the project, an error in the setup
nice, what about Django & svelte
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.
Does it tell you how many draws you have been awarded
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?
when running the server ensure the virtual environment is activated and if activated ensure you run pip install django
I am node developer but want to learn django because it seems better
but node is faster
@@kodiak809 but nowadays most websites have Django as backend :-(
And Django is more secure @@kodiak809
I need help at 1:29:40. When I try to register with a new account, instead of redirecting me to the login route, it returns an error message,
"AxiosError: Request failed with status code 404"
I have the exact same error, the Django server isnt available for the frontend when logging in or registering and throws a 404 error, but the server is definitly online.
@@rhodium92 Is there no way to fix this?
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
I just fixed it. My issue was that i had the keyword baseUrl instead of baseURL in api.js
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
What the f*ck i am waited for perfect video for django+react ,thank you so much man🥳🥳🥳🥳🥳❤❤❤❤❤
are function based views better than class based?
Decoding jwt on frontend? ):
indepth project with postgresql,django and react like ecommerce pls
How to deploy both components to production?
Nice Session , BIG Thanks