How To Make Full Stack Kanban App | React NodeJS MongoDB Material-UI | Full Stack Developer Course
HTML-код
- Опубликовано: 14 июн 2024
- In this video, we are going to make full stack Kanban website. We will use ReactJS, NodeJS, MongoDB and more. Hope this video useful to you.
Don't forget to click the like button and share the video with your friends if you found the video useful.
🔴 SUBSCRIBE for more AWESOME videos!
/ tuattrananh
🔴 TIMESTAMP
00:00 - Demo
01:02 - Setup project
14:09 - User api
32:27 - Front end setup
40:30 - Config axios
52:57 - Login - Register pages
01:15:12 - Sidebar
01:25:25 - Boards api
01:34:53 - Front end Board features
02:15:31 - Emoji picker
02:36:24 - Favourite board feature
03:01:06 - Section api
03:08:00 - Kanban board feature
03:27:16 - Task api
03:38:37 - Front end task feature
🔴 CONTACT
Facebook: / trananh2001
Github: github.com/trananhtuat
🔴 SOURCE CODE
github.com/trananhtuat/fullst...
🔴 REFERENCE
- Create react app:create-react-app.dev/
- React beautiful dnd: github.com/atlassian/react-be...
- Material-UI: mui.com/
- Express: expressjs.com/
🔴 MORE AWESOME VIDEOS
/ tuattrananh
------------------------------------------------------------------------------------------------
#tuattrananh #ReactJS #FullStack #MaterialUI #MUI #NodeJS #Express #ExpressJS #Kanban #ReactKanban #Draggable #ReactDraggable #SASS #Animated #3d #3dAnimation #Animation #ReactNavigation #Sidebar #AnimatedSidebar #ReactSidebar #AdminDashboard #adminpanel #reactadmin #HTML #CSS #JavaScript #SCSS #React
qua Nhật cày cũng không quên ra video cho ae :)) , cám ơn ông vì 1 số bài hay
brother, you are the beast !!! this is the coolest kanban i've seen in a while .😍
❤️❤️❤️❤️❤️
The best advanced react project i have seen
I learned redux toolkit, mui, emotion, drag and drop and more ... 😁
We want more and thanks ❤️
❤❤❤
@@tuattrananh help with my problem sir.
Cảm ơn anh rất nhiều, học được quá nhiều thứ luôn
welcome back we wating for 2 month
nhìn UI đã thấy chỉnh chủ và xịn xò rồi, ra nhiều video nữa xem cho đã anh ơi, quá xịn xò
♥️♥️♥️♥️
Very nice project thank you so much
Thank you sir
we love you the most
Thank you so much for sharing.
Xịn, cảm ơn anh nhiều ạ
đúng lúc em cần học drag drop, cảm ơn anh!
❤️❤️❤️❤️
cách cấu trúc dự án, cách triển khai anh làm clean quá, học đc nhiều quá ạ
😍 idol UIT em hâm mộ anh lắm
This is awesome thanks!
Thank you
Nice content bro. Thank you.
♥️♥️♥️♥️
Awesome! Thanks for sharing. What is a next project?)
Ty very much. Do a typescript with react tutorial next
Thank you Tuat....🔥
♥️♥️♥️♥️
@@tuattrananh please let me ask you if you can show how implement to react project script.js? I am new in React. Before I learn only css, html and how implement script.js for some effects… now I know how organise in react html and css but can’t understood how implement script.js file…? Please if you have time… show us. Thank you 😊❤️
you are really cool coder，I really want to how you learning coding
Nếu đc thì làm fullstack nextjs graphql đi ad ơi, tks ad nhiều vì những video bổ ích
for some reason the login and register doesnt work. as anything changed since this tutorial was done?
Great work, can you please show video how to deploy in hosting? Thanks again
up
Hello and thank you
Hope video useful to you
video hay lắm a mà có thêm giải thích nữa thì tốt
❤️❤️❤️
Great, But what if someone need to use it for their team, do u have project assign button
video hay quá, mong anh hướng dẫn thêm phần deploy ạ
❤❤❤❤
@@tuattrananh anh cho em hỏi phần env server em tạo cluster mongo thấy link nó dài vs có name và pass s của anh ngắn v ạ? còn 2 cái secret key là mình tự viết theo ý thích phải k anh?
Genius
♥️♥️♥️
I am getting an error "Couldn't find the binary git". Can you tell me what should i do?
are you from vietnam ? omg I follow 4 awesome developers that are from Vietnam, you guys are legends of programming
yes, I am Vietnamese
can u say the name of them ?
@@nhatbui229ruclips.net/user/ImVuCms
ruclips.net/user/DevATHTML
this both are awesome too
Anh khi nào làm thêm về redux toolkit với sagar nữa ak :>>
Ông anh làm bao nhiêu năm kinh nghiệm rồi vậy. Serie máu lửa quá
hey bengoan, u should talk to audience or at least add any subtitle for this video, i just mention u that , keep going and do fun stuff bae bengoan
Bro, I have this problem
caught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
at handleSubmit (Signup.jsx:57:1)
can you help me to fix it?
Congratulation!! A great project.
I needed something like that for my work to organized my projects !
I just finished all the tuto, with some changes : All in Typescript and not with MUI but with Styled Components and my own style, add an add-on on Beautiful DND that rotate task on drag. Add some confirmation modals and notification system. But the heart of the system is all yours ! And it's stunning!!
Just some problems with CK Editor, the buttons for the lists ( bullet and numbered ) and the ident buttons does not works... I will search why
Just a big thanks !
wow!
hey bro could you please share your repository with us, so that we could get a bit of guidance.
@@prajwalurkude007 I answered yersterday with the link of my repo, but it seems that the message was blocked... I don't know how share it here. Looks like links are the problem
Share please!
Signup.jsx:57 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'errors')
how to fix bro
@@duyngo6672 fix đc chưa anh ơi, giúp e đoạn này với
Did you fix it?
@@duyngo6672 did you fix it?
@@thihoang6133 did you fix it?
lâu lắm idol mới ra vid :))))
code cty nhiều bug quá em à 😂
idol cứ ra vid em sẽ ủng hộ đều đều
Great video.
In the .env do we use the same MONGODB_URL= PASSWORD_SECRET_KEY= & TOKEN_SECRET_KEY= as you do?
If not what should we use?
Did you get any answer to this?
@@ampsen5805 Nope
You get the MONGODB_URL in the database you created and can use any random string for PASSWORD_SECRET_KEY and TOKEN_SECRET_KEY
yes actually it does not matter
did you use the keys(Token and Password) shown in the video?
cho e hỏi là chỗ userController.register phút 30:27 là m ko cần truyền params là req vs res vào hàm register ạ.
ko cần em, express nó handle chổ đó rồi, vào controller là nó tự hiểu req, res
@@tuattrananh dạ cảm ơn a ạ. Với cho e hỏi là lúc response token về cho client e thấy a ko dùng return mà ko bị lỗi "ERR_HTTP_HEADERS_SENT: Cannot set headers after they are sent to the client" vậy ạ. E code giống a thì bị lỗi như trên phải thêm return thì mới ko bị lỗi ạ.
Anh có ra video về NodeJs k anh.
video này NodeJs đó e :v
Có event nào chỉ cần click chuột vào task thì task đó bay sang cột completed không ạ
tạo nút moveToComplete trong task, click nút đó thì add task vào section complete, remove task đó ở section hiện tại, update task.section = section mới, rồi setstate list mới
What is the use of index props in tag ?
"Index routes can be thought of as "default child routes". When a parent route has multiple children, but the URL is just at the parent's path, you probably want to render something into the outlet."
reactrouter.com/docs/en/v6/getting-started/overview#index-routes
hi mn mình bị gặp lỗi connect mongodb ở đoạn setup project, mn có thể giúp mình đc ko ạ
MongooseError: The `uri` parameter to `openUri()` must be a string
9:31 what's the shortcut used for refactoring all variables here?
just find and replace all
lấy những token trong .env kiểu gì thế anh
does the data store on database in this project ?
yes
Where can I see the TOKEN and PASSWORD database key on MAC?
or can i will use Token and Password key on video?
anh ơi, cho em hỏi tại sao khi updateTitle và updateDescription mình cần setTimeout vậy ạ?
Khi người dùng nhập title thì nó sẽ gọi api liên tục, như vậy là ko tốt. Cho nên thêm timer = setTimeout(...). Nếu người dùng tiếp tục nhập thì clearTimeout để ko gọi api. Khi người dùng ngừng nhập thì mới gọi api
@@tuattrananh em cảm ơn anh ạ ❤❤❤
im at 1:39 and i get an error when i click the create button. "AxiosError: options must be an object" anyone has this issue? cant seem to fix
If you use latest axios, please config axiosClient.js like this github.com/trananhtuat/react-openai-chat/blob/main/client/src/api/axios.client.js
@@tuattrananh im getting a verifyToken error.... ): but im following exactly as you do.
how did this take 4 hours??
in the board, can they add people on it?
now they can't
subtitle??
Hello, what is vscode theme?
Atom one dark
@@tuattrananh thanks buddy
Lỡ bấm vào coi. Tôi ăn bát mì tận 4 tiếng...
😂😂😂😂
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'errors')
help pleaseee
I have this problem when I try to sign up
Cannot read properties of undefined (reading 'errors')
TypeError: Cannot read properties of undefined (reading 'errors')
I guess this is the problem:
const errors = err.data.errors
did you fix it ?
@@manrajsingh8617 tive que usar autenticação de outro projeto dele (o chatIA) ai funcionou.O Problema que vc tem que ir adaptando aquele backend com esse ai e enfim, meio chato p fazer. Funcionando!
@@guilhermedosanjos6969 thanks man
@@guilhermedosanjos6969 hey man I tried to do it but I ended up with a bunch of errors, if you don't mind do you have a github repository of the new code you edited or something? that would be very much appreciated
@@aymanedrouzi hey, is your project working? Can you please share github link
Này nhìn dống jira v ta
didnt show us the kanban once
He showed it lots of times. You can see it clearly at the end of the video.
The promotional image for your video is a kanban with a big title “Learn python”, but you are teaching how to code in NodeJS. The irony
Can u answer my chat on Facebook? Pls i need help u i found trouble
you can comment your problem here
@@tuattrananh at minute 9:22 how did you get the password _secret_key , token_secret_key ? I've searched the mongodb web and can't find the key. You went through how to get it
@@tuattrananh I found the problem again can you help via chat
@@tuattrananh Signup.jsx:57 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'errors'), how to fix it?