Full Stack Project with React.js and Django (Task Manager Application)

[@BekBrace]

Thank you guys for the continuous support, appreciate all of your messages and comments. If you face any problems just let me know in the comments or write me on ([e-mail]) Peace out ✌️

[@aimkone]

hi , most of link you provide in description are broken ,can you check them some we have to copy past to access them

[@nnamdiekweariri]

My first programming language was also BASIC in 2006, it was so much fun. I used to write my code in a paper at home and test it on a computer in the computer cafe whenever I had access to one.

[@BekBrace]

I can relate :)

[@sifo_io]

Dude you're just rocking! Looking forward to collaborating on future tutorials/courses :D

[@BekBrace]

Thank you Saifeddin , my friend - It’s an awesome idea 👊

[@marcus7387]

Wow ! I have to study this ! Thank you very much I love your way of explanation , Bek

[@BekBrace]

Thank you, my friend 👊

[@akselcode]

I just love how relaxed and calm your voice is !! The best content!

[@BekBrace]

Thank you, Hustle 🙏🙂

[@olivechevalier2896]

Great work mon ami

[@BekBrace]

Merci Olivier 👊

[@marvicjoshuavillaverde7067]

Goodjob dude! thank you

[@BekBrace]

Glad you enjoyed it, Mavic 🙂

[@ZaarmTech]

Nice tutorial.. Watched completely without fast forwarding a second.

[@BekBrace]

Thank you very much for that 🙂🙏

[@স্বচ্ছনিরবতা]

As a beginner it was hard to understand class based components in React, btw great tutorial for Django, thank you very much

[@BekBrace]

Hello my friend, and thanks for stopping by and for your feedback - cheers

[@BrianHansen-so3cr]

24:57 -> If you use newer versions. You might get an error for 'corsheader.middleware.CorsMiddleware'. Just add an "s" and it will work. -> 'corsheaders.middleware.CorsMiddleware'

[@Jayakumar-uq1tv]

Very thanks ✨

[@abdulkabir_02]

As a beginner, your content is very helpful. Thank you for sharing your knowledge.

[@BekBrace]

Thank you my friend

[@codeazz3330]

The word thanks isn't enough .

[@BekBrace]

Hello Anas, thanks a lot my friend, this means a lot to me 🙏🙂

[@carlobenter5090]

great tutorial :) thank you

[@BekBrace]

Thank you, Carlo , glad you liked it 🙂

[@tommiamiludin3980]

for this tutorial you earn my subs.. thank you.

[@BekBrace]

Thank you, Tommi

[@imacoder7122]

Best tutorial ever on django api and react 👍. Thanks a ton.

[@BekBrace]

Thanks so much, this means a lot to me 🙏

[@kavitapisal]

hey thanks for this tutorial i was searching for react and django tutorial and i found this :)

[@BekBrace]

Enjoy :)

[@waelmohameddd]

Subscribed because of this great tutorial !!!!! Thanks so much man and keep up the great job

[@BekBrace]

Thanks a lot 😌

[@asha6175]

This is super useful and rich material, thank you very much - more of the Django React or Vue tutorials please

[@BekBrace]

Thank you Joanna, I’m not sure about Vue; but I’ll make more of the RAD stack ( Django + React/React Native )

[@atod2572]

great tutorial. Although whenever your mouse pointer moved I was like: 👁👄👁

[@BekBrace]

Thanks for the feedback 😊 I’ll take that in consideration in future videos 😉

[@avinashpatel6745]

must study this - 100000000 Thank You !

[@ueldermartin]

Amazing content and nice backsongs

[@BekBrace]

Thank you so much my friend :-) Glad you like them!

[@harshrajput3547]

At 26:56, is it updating the task or just making a new task that is completed? I think later one is happening.

[@BekBrace]

Hello Harsh ! Exactly, it’s not updating but creating a new task with different check marks - sorry if I didn’t mention it explicitly, but I just wanted to show what’s happening only when you check/uncheck a task ☑️

[@harshrajput3547]

@@BekBrace Woah, that was quick😅. I am really enjoying this video and yours ReactJS for python devs is also awesome. For next some projects, you can include authentication and authorization of the APIs. Can you make one video on deploying React+Django apps?

[@BekBrace]

@@harshrajput3547 hehe 😊 Yeah sure, although I’m preparing other videos for machine learning and video games in python but certainly I can find a spot for a React/Django project with deployment

[@kesnelsamuel]

Javascript was my first one 😁😁

[@BekBrace]

Do you remember the year ?

[@ayushgoyal892]

Thank you so much, this was an amazing tutorial

[@BekBrace]

Thank you so much my friend, you're very welcome

[@sherlock27]

Thanks for the tutorial!

[@BekBrace]

You are very welcome my friend

[@NoobForReason]

github links are not working.

[@BekBrace]

github.com/BekBrace/django-react-app-Task_Manager

[@NoobForReason]

@@BekBrace Thanks buddy for link and tutorial also...

[@ProSimples]

If it was a funtion component for the frontend would be the perfect one for the time.

[@oneplusiota]

Yeah I'm trying to do that on my own

[@mahendranath2504]

Thank you so much👍👌🙏🏻❤

[@BekBrace]

My pleasure

[@hasibulalamprionto2010]

Great tutorial!! Btw, What's your opinion about Django-ninja?

[@EyezaGotSKILLZ]

Hi Bek, thank you for this video. I was watching around the 9:45 mark and seeing the intellisense on your code looks a lot better than mine. I have the python, pylance, and intellicode extensions running on my vs code. I was wondering what extensions you have and/or settings you've enabled to have the intellisense on your python code to come out like that? Thank you for your time.

[@BekBrace]

Hey Hey 👋 Quite honestly I don't remember as I work on 3 different machines, i will find out and let you know for sure 😊 Cheers

[@hanniep8489]

This is a good video, but some features are no longer in use. @19:58 use fields = '__all__'

[@Abdalization]

hey, thanks for the video. my modal does not appear when I click the Add task button but I can make it appear using developer tools and making it true. What could be the problem?

[@BekBrace]

Thank you, friend :) I remember there was something wrong with the modal state; but I got it fixed by the end of the video. Have you watched the whole thing ?

[@BekBrace]

Also make sure that modal is set to true in your code

[@Abdalization]

@@BekBrace I am not sure, none of my buttons are working. I followed step by step throughout the tutorial.

[@BekBrace]

@@Abdalization ok, send me app.js and modal.js code only on [e-mail] , I’ll take a look

[@squarerootof2]

*model

[@DevBishwasBh]

Great, you're truly a guru. Django Rest Framework with Next Js authentication/authorization would work much better than FastAPI, but I just wanna know the core method of doing stuff, so I guess won't matter either it's FastAPI or Django. I am kinda impatient when it comes to learning from a great guru.

[@ashishchaudhari8223]

Plzz use latest react feature... Like Hooks useState n all... Because latest features make react trends in IT field

[@BekBrace]

Hello Ashish, thanks for your comment and I appreciate the suggestion, indeed this is applied in this tutorial as well as the other React tutorial for backend dev.

[@ashishchaudhari8223]

@@BekBrace which tutorial 🤔

[@jdcrunchman999]

How are you able to generate an error - see position 20:02 where you misspelled serializers, and that spiffy little popup came up -- Is that a plugin for VSCode? If so, what plugin?

[@BekBrace]

No no, not plugin. It's my video editor 😁

[@ronsmith37]

I have spent a fair bit of time working through your example. At first I used my mac, got to INSTALLED_APPS 'todo', that failed needed 'todo.apps.TodoConfig' to continue. Got to 'corsheaders' and 'rest_framework', couldn't solve it bailed out.. Onto my window machine. Got to 1.04 on your video "Modal" on line 139 App.js is not defined, can't find the prob. Any ideas?

[@BekBrace]

Hey Ron, thanks for reaching out. Ok, where is the problem right now, in which stage exactly ? Cause you mentioned a lot of areas and you got me lost 🙂 I’d be happy to help you - just I need a starting point, what does the error report say?

[@ronsmith37]

@@BekBrace Windows with VS Code. I worked through with you up until 1.04, everything worked the same. You added the line

[@DevlogBill]

Hi Bek, I've been learning Django for a couple of months now and I am at the stage where I know how to create my own API's and I kind of some what know how to make a CRUD app but not on my own yet. My end goal is full stack with either React or React Native on the frontend and Django on the backend. I've only made 2 CRUD apps with Django but not really on my own but I managed to make a couple of API's with Django. Would you recommend I continue to keep learning Django before learning React? Or is it possible to now learn React so I can use both technologies together? I guess all I would need Django for is making an API request for my React project? I am kind of stuck on what direction I should choose? Thanks Ben.

[@BekBrace]

Hey 👋 I've answered you on the other video comment on connecting Django to React 🙂

[@ryanmaddox6773]

I learned basic on an atari 800xl as well as did some game programming and some applications , I would try and recreate games and apps I saw and used

[@BekBrace]

I have an ASMR video in the channel where i recreated missile command, if you're interested

[@thelifeofbiraj]

Thank you so much so much sir.♥️♥️♥️♥️♥️♥️

[@gerardtoudji2634]

Very good

[@BekBrace]

Cheers

[@nathanielbrewmowl5007]

Hi, Please am happy with the training you have with me on the use of Django. I have a problem with which I will need help. I have tried running my project but it seems there is an error concerning my corsheaders. Below is the system error and warning given when I run the project. "the todo.Todo: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'Django.db.models.AutoField'. HINT: Configure the DEFAULT_AUTO_FIELD setting or the TodoConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'Django.db.models.BigAutoField'.

[@BekBrace]

Thanks a lot my friend :) The error message you're encountering seems related to a Django model configuration issue, specifically regarding the primary key type for the Todo model. The warning suggests that an auto-created primary key is being used without explicitly defining its type. Open the model and explicitely & define the primary key type. So, based on the hint, you can set it to a subclass of AutoField, such as BigAutoField. If you don't have a specific reason to use a different type, BigAutoField is a good choice. let me know if it worked

[@MansoorKhan-re7nf]

Cors origin whitelist should be a list not a tuple that tuple gives an error.

[@BekBrace]

Yes 👍

[@michaelmclean2363]

Should there be an onClick with the Add task button?

[@dell4559]

Can anyone help me please at 25:25 Error is : Exception in thread django-main-thread:

[@BekBrace]

It’s a coma issue , man , go to installed apps in settings.py and make sure that each line is ending with a coma; also below settings make sure that coma is in place - and let me know

[@dell4559]

@@BekBrace Exception in thread django-main-thread: Traceback (most recent call last): File "C:\Users\ateyu\AppData\Local\Programs\Python\Python38-32\lib\threading.py", line 932, in _bootstrap_inner self.run() File "C:\Users\ateyu\AppData\Local\Programs\Python\Python38-32\lib\threading.py", line 870, in run self._target(*self._args, **self._kwargs) File "C:\Users\ateyu\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\utils\autoreload.py", line 53, in wrapper fn(*args, **kwargs) File "C:\Users\ateyu\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\core\management\commands unserver.py", line 117, in inner_run self.check(display_num_errors=True) File "C:\Users\ateyu\AppData\Local\Programs\Python\Python38-32\lib\site-packages\django\core\management\base.py", line 441, in check raise SystemCheckError(msg) django.core.management.base.SystemCheckError: SystemCheckError: System check identified some issues: ERRORS: ?: (corsheaders.E013) Origin '/' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin '/' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin '0' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin '0' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin '0' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin '3' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin ':' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin ':' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'a' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'c' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'h' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'h' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'l' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'l' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'o' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'o' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 'p' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 's' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 's' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 't' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 't' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). ?: (corsheaders.E013) Origin 't' in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. ) or netloc (e.g. example.com). System check identified 22 issues (0 silenced).

[@BekBrace]

@@dell4559 I read the error report, and I can tell you that the problem is in the CORS ORIGIN WHITELIST, make sure you type ““

[@AADRIKASRIVASTAVA-wu3ih]

error @ 11:42 shows no changes detected after makemigrations

[@BekBrace]

what's the reason

[@AADRIKASRIVASTAVA-wu3ih]

Don't know sir tried many ways none of them helped . Installation and beginning was done as instructed in the video .

[@ugoozoeze]

Ensure you save your settings file after adding todo as part of your installed apps. This was how I resolved this issue

[@MovingUp_Lolo]

I'm getting errors on makingmigrations step,it says no changes detected

[@BekBrace]

Sure you didn't do it twice ?

[@LewraAzad]

Amazing tutorial.....can you make a part 3 to host the backend on Heroku?

[@BekBrace]

Thank you Saif. Yes why not, it’s just I’m currently busy doing other stuff but I’ll do it eventually

[@mujtaba.omar111]

Hello, thank you from your trainings it is too good but i faced to a problem when restart my computer it asks me to active virtual environment (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?), i did the project serval times but properly but when i turn of my computer it happens. any recommendation?

[@BekBrace]

You have to activate the virtual environment each time you run your backend, it's normal

[@mujtaba.omar111]

@@BekBrace how active it, command?

[@mujtaba.omar111]

@@BekBrace I followed your steps and I just need the activation command

[@liloflorida752]

Can you make more django react projects ?

[@BekBrace]

Yes, soon

[@liloflorida752]

@@BekBrace thank you , i enjoy your videos :)

[@ojogbenga9611]

How do we deploy this? Do we deploy the backend and frontend on different servers as they run in this tutorial?

[@BekBrace]

Heroku

[@aazizim]

Beo can we do this project with function comps? 33:30

[@BekBrace]

Of course

[@toufiknefouci6814]

is there a function-based component version for this project!

[@BekBrace]

Hello Toufik. You can use functional component to recreate the same project ( you will just need to take props in your args), it should be fun and easy if you’re good in plain vanilla JS. You can start doing it and if you’re stuck somewhere let me know and I’ll give you a hand, my friend

[@toufiknefouci6814]

@@BekBrace I really like your tutorials, thank you so much......and is there any chance you would make a tutorial on users auth and permissons between django and react js ....again I am so greatful for watching your tutorials !

[@HOPEDACODER]

My first programming language was Python back in the before times of 2017😅

[@BekBrace]

Python is awesome 👊

[@jamjam3337]

👏👍

[@BekBrace]

🙏

[@wensday_00]

Thanks alot for this awesome project and I face to some issues about Axios module could you please reply in this command

[@BekBrace]

Sure, what's the issue?

[@medslk9753]

rest_framework not working tried installing it a lot imported it and wrote it in settings.py and still not working

[@BekBrace]

Hello Med . Do you get any error report of any sort, it will help us in debugging. what does it say ?

[@medslk9753]

@@BekBrace nvm stack overflow solved it

[@tomstout8381]

I can't get the backend to work, I get an error: django.core.exceptions.ImproperlyConfigured: WSGI application 'backend.wsgi.application' could not be loaded; Error importing module.

[@AdamZbiti]

Please can you tell me the best extensions for django and react

[@BekBrace]

Django and react 😊

[@DevBishwasBh]

Tutorial Idea: Develop a blog using Next Js and Django Rest Framework with... 1. Authentication and Authorization 2. Commenting Feature 3. Like/Reaction

[@BekBrace]

Great idea 💡

[@DevBishwasBh]

@@BekBrace Thank you. I'll be waiting for this

[@krishnalalchaudhary640]

C is my first programming language

[@BekBrace]

C was once known as the future of programming

[@ayushadarsh9001]

I don't think it's even known widely but my first language was LOGO

[@BekBrace]

I've heard of it yeah 👍

[@homamwannous5948]

Hi...I need help please

[@BekBrace]

Hello Homam. how can I help you, sadiqi ?

[@homamwannous5948]

@@BekBrace First I am so sory for my comments💙 Mr Bek I use pycharm for your project but not work with me ...so I need correct code to this project sadiqi

[@BekBrace]

@@homamwannous5948 ok. But what causes the problem ?

[@AdityaKumar-y3y5y]

Good

[@BekBrace]

Ok

[@angtranhai6457]

My first languague was PASCAL :D

[@BekBrace]

Wow really

[@edip_c]

at kzbin.info/www/bejne/fGayhodpns-ebq8 the 'field' attribute should be 'fields' with 's' at the end.

[@rajatsharma6137]

React part...I have no idea what the heck is going on....totally over the head...appreciate your efforts though!

[@BekBrace]

I apologize for that

[@robinjoseph8925]

Majority of Video was about React. Way more complex than Django!

[@BekBrace]

If you have any questions feel free to ask

[@kennstack01]

The first Language: QBasic

[@BekBrace]

QBasic is not a language per-se but rather an IDE and interpreter for different BASIC flavors

[@kennstack01]

@@BekBrace Interesting, thanks for replying. just learnt sth

[@pourya1991]

Your mouse pointer in very annoying

[@BekBrace]

You're free not to watch

[@Funfork]

I fail to finish watching this vid coz of the distracting music background. Please consider not using music like that, either it's distracting for people with good ears or it'll be just like another kind of white noise adding nothing meaningful

[@BekBrace]

Sorry to hear that my friend

[@narutokun5093]

music ?

[@mauricefakhry8039]

Waaat ?

[@Funfork]

@@narutokun5093 LOL, the fact that you can't hear the background music means that the tune in the background of this video is perceived as white noise in your brain. Ask any professional sound engineers/ producers and they'll catch the background stuffs super easily, unlike normal folks who just want to fill the silence =))

[@ArturKubala]

At 25:20 all I get is "django.core.exceptions.ImproperlyConfigured: Application labels aren't unique, duplicates: todo". I've now spent 2h on googling the issue, still nothing :/

[@BekBrace]

Hey Artur! Sorry to hear you're having hard time trying to find the solution. I'll look at it tomorrow and I'll get back to you.