!!QUICK NOTE!! If anyone is having issues on mobile, try adding ontouch events along with your ondrag events! According to caniuse, the drag API SHOULD be supported on all modern browser's, but after a bit of googling it looks like some devices won't listen for drag. Touch events should work though! I've been unable to replicate as this works as expected on all devices I have access to, so if this solution works for anyone, please let me know so that I can update the source code 😂😂

For any juniors - pay attention to his mental approach when going through this exercise. The order, code layout, how functions are introduced, is the most valuable thing in this video.

This is simply brilliant. The way you used data-attributes, and storing the ID on the event itself! I learnt a ton from this tutorial. Thank you very much.

@tomisloading

5 ай бұрын

Thank you so much! :)

this is awesome really appreciated for these tutorials looking forward for more.

Damn this is gold here guys!

Tom is loading ❌ legend ✅. Thanks for this absolutely simple explanation.

Great content, keep the good work up

Awesome!!!

Dude, you're amazing

You should change the channel name to Tom Is Cooking. Thank you for making this!

@tomisloading

4 ай бұрын

😂😂😂

Awesome content 🎉

This tutorial is worth moneyy

@tomisloading

5 ай бұрын

Thank you!! Took a while longer than most of my videos, hoping people find it more useful 😂

For things like this, it might be better to use react context to provide the methods for setting cards and reading cards associated with each column. It does couple your components to context though, but I'd imagine its a lot more efficient. If you store a hashmap in the context, using column IDs as keys, and storing the associated cards in an array, you'd be able to instantly look up all card associated with that column. Instead of doing linear search on all cards for every column. That method would require a bit of boilerplate and probably not the best content, maybe even overkill for a non performance intensive app like a todolist.

@iukys3889

5 ай бұрын

I agree, react context feels better here

Noice bro keep it up

Thank u!!

@tomisloading

5 ай бұрын

Happy to help!

OMG!!!!! That's amazing 🤩

@tomisloading

5 ай бұрын

Thank you!! 😁

I wish I had known about this sooner

No shadcn - Here take your like

That is the next project in my queue and after that in my resume also you are just amazing bro what an easy tutorial you have created for such an advanced project(KANBAN BOARD) 🔥🔥 Also please let me know which VSCode theme you are using that looks very cool!

@tomisloading

5 ай бұрын

Thank you!! Happy to help! :) and my theme is called Andromeda 😁

@Solo_playz

5 ай бұрын

@@tomisloading Thank you

css is not loading so what should i do,also i have npm install react framer-motion react-icons in my react app please help!!

Great

this was really easy to understand and follow along video! But I'm having a hard time understanding how your handleDragEndFunction knows what column the card is being dropped into if you never passed it?

Bro please make a video on your website how you create it and can we create it using on react

The result is solid but it gives me ticks that you instantiate variables descending order. E.g. when you start building the kanban and you have “Board” and “Column” AFTER the Kanban, but still use them inside. That should be illegal 😅

@tomisloading

5 ай бұрын

LOL well I mean I’d generally have them in their own files, just easier to do it in one for a video 😂😂

It would be really helpful if you make another video about improving the accessibility of this, or at least show how migrating it to something like shadcn would improve accessibility I suppose

It is a nice and clear tutorial, could you please help me to create a nesting drag and drop, where items may have sub items and subitems can be drag and drop inside an item along with it's parent

Your components are incredible I checked your website, and it's generous with a lot of free components! So talented! Design and being creative is my biggest issue as software engineer, like when I see a design or an animation I can replicate it without looking at the code most of the time (not all of them, you have some intriguing and difficult animations) but come up with the design or animation it's nearly impossible I find that task so difficult 😅

@tomisloading

5 ай бұрын

Thank you for the kind words!! 🙂

is there ways to impliment your components in WordPress?

Your code is readable and I can follow the video very well. I haven’t done much with React, but all those functions returning JSX returning functions make me a bit nervous … about React. Does code like this GC alright? Typescript’s type system would help React out quite a bit.

@tomisloading

5 ай бұрын

One thing I’ll note is that I would generally never have all of these functions in the same file, it’s just easier to follow (and record) in a video. TypeScript ABSOLUTELY helps, I never work without it, but I recognize some haven’t learned it yet so I generally make videos without it just so it’s easier for beginners to follow

would be awesome if nesting was covered too.

Would this also work on touch devices? As far I know you can't pass data using dataTransfer on touch devices. Please let me know if it is possible. Nice vid 👍

@tomisloading

5 ай бұрын

Yes, it should work the same! Possible there’s edge cases I’m unaware of but I can say that the demo in this video works as expected :)

@megamind452

5 ай бұрын

@@tomisloading it's not working, I tried on your website using my phone. Is there any way to make it work.would really appreciate that.

@tomisloading

5 ай бұрын

@@megamind452 Hmm, try adding onTouch events as well as the onDrag events (named similarly, so onTouchStart etc). I was under the impression you didn't need to do this, but Googling around a bit, looks like that could be an issue for some devices. If not, I'd try googling for issues with whatever browser you're using. caniuse shows support for pretty much every modern browser outside of firefox for android heh.

2:33, how can you accept ${headingColor} prop as a Tailwind class? Shouldn't tailwind classes be typed out explicitly for them to properly compile?

@tomisloading

4 ай бұрын

They’re typed out explicitly higher up in the file, you are correct in a sense though, if you tried to do something like ‘text-${color}-500’ it would not work

@Cypekeh

4 ай бұрын

@@tomisloading Thanks for a quick reply

Why didn't you use framer motion reorder?

@tomisloading

4 ай бұрын

I find it to be a bit buggy

@redcastle1745

4 ай бұрын

@@tomisloading thank you for reply, I always learn from your work

wow

Any tutorials on Gsap ?

@tomisloading

5 ай бұрын

Haven’t done any yet, but definitely will in the future!

I like how you present the building process by not typing everything, this vid will easily become a 5 hours course in some other channel. Thank you for saving our time.

There is one bug. How to reproduce? 1. Add a new card. 2. Again Add a new card without typing anything. It will take title from older state. As you forgot to clear the state on submit.

@tomisloading

Ай бұрын

Good callout!

This is not working well for phone devices its going out of the page 😊 do have a look at it thanks for the tutorial

im so far from it, even tho coding for two years...

Awesome !