Build a Multi-List Drag and Drop To-Do App Using React

In this video, we'll be building a Multi-List Drag and Drop To-Do App using React. This to-do app will allow users to manage their lists of tasks easily and efficiently.
By the end of this video, you'll have successfully built a Drag and Drop To-Do App using React! This app is perfect for users who want to manage their lists of tasks easily and efficiently. So be sure to watch the whole video, and see how easy it is to build a Multi-List drag-and-drop to-do app using React!
_______________________________________________________________
SOURCE CODE 👇👇👇
github.com/dieudonneAwa/react...
___________________________________________
🙏 PLEASE SUBSCRIBE FOR MORE VIDEOS 👇👇👇
bit.ly/3cIb4er
____________________________________________
🔮OTHER VIDEOS YOU MIGHT LIKE👇👇
▶️ How to Create a Sidebar in Next.js & Tailwind CSS: • How to Create a Sideba...
▶️ Complete Google OAuth with Next.js, Node, Express and Postgres | part 1: • Complete Google OAuth ...
▶️ How to create React App from Scratch: • How to setup React app...
▶️Create Sequelize Migration and Association: • Create Sequelize Migra...
▶️How to create an animated modal in reactjs: • How to create a nicely...
▶️ How to render a list of todo objects in Reactjs: • Render a list of task ...
▶️How to setup sequelize and postgres: • How to setup Sequelize...
▶️Password Reset using SendGrid: • Password Reset using S...
▶️ CRUD Operations with sequelize: • CRUD operations with S...
____________________________________________
Follow me on Social Media:
Facebook: profile.php?...
Twitter: awadieudone?s=09
GitHub: github.com/dieudonneAwa
Personal Blog: awadieudonne.vercel.app/
KEYWORDS
Multi-list Drag and Drop To-Do App, React and react-beautiful-dnd, Drag and drop To-Do App, Multi-list To-Do App, Building a To-Do App with React, React-beautiful-dnd To-Do App, Drag and drop functionality in React, To-Do App with multiple lists, Creating a To-Do App with React and react-beautiful-dnd, React To-Do App tutorial, Best practices for building a To-Do App, Building a To-Do App with React and react-beautiful-dnd, Drag and drop To-Do app with React, Implementing drag and drop in To-Do App, How to create a Multi-List Drag and Drop To-Do App using React and react-beautiful-dnd, React and react-beautiful-dnd: A complete guide to build a Multi-List Drag and Drop To-Do App, React To-Do App with drag and drop feature, Building a To-Do App using React and react-beautiful-dnd, Multi-List To-Do App with React and react-beautiful-dnd, React and react-beautiful-dnd: Creating a Multi-List Drag and Drop To-Do App.

[@Poohbify]

🔥 great video!
I'm trying to get better at JS and understanding things as soon as I look at it.

[@fullstackmastery]

Great to hear! And thanks for watching. Please subscribe if you haven't done it yet

[@davidekunno]

Brilliant video. Thank you!

[@venkuvenky1493]

great video. thanks @fullStack Mastery , best explanation ever

[@albertorobles4738]

Thanks!!

[@rashidmachingal]

Thank You! 👍

[@fullstackmastery]

You're welcome

[@verydifferentthought]

Great video! Could you make it in reactsjs without using nextjs?

[@user-ip6lj6fl3n]

Hi i used your model to start an project but now im facing some problems with "lags" when i try move my cards from a column to another, i have like 500 cards, do u know any way to optimize it?

[@Vivek_-_]

how can we retain the background color property of draggable e.g if we have a red background color for to-do how can we keep it in completed and if in-progress we have a background color blue how we retain its color property in complete.

[@pandulaweerasooriya7689]

Thanks a lot mate!

[@fullstackmastery]

You’re welcome @Pandula Weerasooriya
Don’t forget to subscribe for more helpful contents.

[@GS-st2sp]

can you build this with time tracking ?

[@jdillon6682]

20:40 memo
thks for good video

[@fullstackmastery]

You're welcome and thanks for watching

[@anim_ie]

Add light theme as well

[@fullstackmastery]

Nice suggestion! I'll consider making a tutorial on how to implement theme change in the future.

[@mittal_motivation]

Hi, i need a drag and drop just like we do in powerpoint. Can you please help...

[@fullstackmastery]

Sorry I can't help you with that.

[@Novia5555]

32:18 is there another way for not using dynamic import? I'm not using Next Js right here

[@fullstackmastery]

Yeah sure. If you're using react, you should use React suspense and react lazy.

[@fullstackmastery]

Or you could simply remove strict mode from index.js

[@Novia5555]

@@fullstackmastery Yup that work. Thank you 👍🏻👍🏻

[@fullstackmastery]

@@Novia5555 you’re very welcome ☺️

[@jotredev]

@@fullstackmastery Gracias bro

[@whatever3152]

23:00

[@itsforhad_]

How can I solve the 31:50 problem in react?

[@fullstackmastery]

In create react app, you will need to remove that wraps your App in root index.js

[@itsforhad_]

@@fullstackmastery I have already removed StrcitMode yet the error is remaining. Is there any other way to solve!

[@itsforhad_]

@@fullstackmastery It shows the drag icon after removing the StrictMode though not working.

[@fullstackmastery]

@@itsforhad_ I don't know for sure yet. Check your code well you could be making a mistake somewhere.

[@itsforhad_]

I am follwing your code and everything was fine before 31:50.

[@abieknutt7409]

p̴r̴o̴m̴o̴s̴m̴ 🌷