DEV Community

Cover image for Building a Kanban board with Node.js, React and Websockets 📝 ✨

Building a Kanban board with Node.js, React and Websockets 📝 ✨

Nevo David on September 28, 2022

What is this article about? In this article, you'll learn how to build a Kanban Board the same as you have in JIRA, Monday and Trello. W...
Collapse
 
chijiooke profile image
Silva Chijioke Michael

finally a hobby project for the weekend ☕

Collapse
 
nevodavid profile image
Nevo David

Yes! Let me know if you are going to do something similar!

Collapse
 
renancferro profile image
Renan Ferro

Nice article man!

Collapse
 
nevodavid profile image
Nevo David

Thank you ❤️
Are you going to fork it? :)

Collapse
 
colonelxy profile image
Harold Oliver 🛡️

I've dropped all my projects to do this!

Collapse
 
nevodavid profile image
Nevo David

Haha! I hope it was not something important 😅

Collapse
 
colonelxy profile image
Harold Oliver 🛡️

This one seemed more important...

Collapse
 
nevodavid profile image
Nevo David

Trello

Collapse
 
nevodavid profile image
Nevo David

Have you joined HackSquad?
With the fantastic atmosphere of Hacktoberfest, we have decided to create Hacksquad. Hacksquad is here to enhance your Swag, meet with more community members and participate in workshops, read more here:
dev.to/novu/hacksquad-2022-contrib...

Collapse
 
colonelxy profile image
Harold Oliver 🛡️

How do I go about the react-beautiful-dnd? it seems not to work for me.

Collapse
 
nevodavid profile image
Nevo David

What's seem to be the problem?
Maybe you can fork the original code? :)

Collapse
 
colonelxy profile image
Harold Oliver 🛡️

On implementing the dnd, the tasks container disappears.

Collapse
 
softdev profile image
Softdev

Thanks for sharing this info with us.

Collapse
 
nevodavid profile image
Nevo David

Thank you for reading Softdev ❤️
How are you today? ✨

Collapse
 
nevodavid profile image
Nevo David

Do you use Trello, Monday or Jira?

Collapse
 
tejasparkar profile image
Tejas C Parkar

Awesome article man!

Collapse
 
nevodavid profile image
Nevo David

Thank you for the kind words Tejas!
And good morning! (from my side of the globe)

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

This is awesome. The drag and drop feature is pretty neat. I always like visual stuff and the integration with Socket.io is.... woah!

Collapse
 
nevodavid profile image
Nevo David

Thank you Juan! 🚀
I am addicted to dragging and dropping 😛

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Nice!!!

Collapse
 
nevodavid profile image
Nevo David

Thank you Dhruv!
How are you today? :)

Collapse
 
nevodavid profile image
Nevo David

I have tasks in my backlog from 2019 😅
Ghost task

Collapse
 
michelledai2020 profile image
Michelle Dai

Thank you for the awesome tutorial. It is very cool to see socket.io in action. 🙌🏼

Curious, would Novu work without it ? Is there another kind of socket implementation inside of Novu package, or the servers always need to implement the socket before passing on information to Novu?

Collapse
 
slavutych42 profile image
Mashtaler Vladyslav

hello, when writing this code I encountered the following errors Uncaught execution errors: ERROR
Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
at useState (localhost:3000/static/js/bundle.js...)
at useMemoOne (localhost:3000/static/js/bundle.js...)
at useInstanceCount (localhost:3000/static/js/bundle.js...)
at DragDropContext (localhost:3000/static/js/bundle.js...)
at renderWithHooks (localhost:3000/static/js/bundle.js...)
at mountIndeterminateComponent (localhost:3000/static/js/bundle.js...)
at beginWork (localhost:3000/static/js/bundle.js...)
at HTMLUnknownElement.callCallback (localhost:3000/static/js/bundle.js...)
at Object.invokeGuardedCallbackDev (localhost:3000/static/js/bundle.js...)
at invokeGuardedCallback (localhost:3000/static/js/bundle.js...)
ERROR
Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
at useState (localhost:3000/static/js/bundle.js...)
at useMemoOne (localhost:3000/static/js/bundle.js...)
at useInstanceCount (localhost:3000/static/js/bundle.js...)
at DragDropContext (localhost:3000/static/js/bundle.js...)
at renderWithHooks (localhost:3000/static/js/bundle.js...)
at mountIndeterminateComponent (localhost:3000/static/js/bundle.js...)
at beginWork (localhost:3000/static/js/bundle.js...)
at HTMLUnknownElement.callCallback (localhost:3000/static/js/bundle.js...)
at Object.invokeGuardedCallbackDev (localhost:3000/static/js/bundle.js...)
at invokeGuardedCallback (localhost:3000/static/js/bundle.js...)
ERROR
Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
at useState (localhost:3000/static/js/bundle.js...)
at useMemoOne (localhost:3000/static/js/bundle.js...)
at useInstanceCount (localhost:3000/static/js/bundle.js...)
at DragDropContext (localhost:3000/static/js/bundle.js...)
at renderWithHooks (localhost:3000/static/js/bundle.js...)
at mountIndeterminateComponent (localhost:3000/static/js/bundle.js...)
at beginWork (localhost:3000/static/js/bundle.js...)
at beginWork$1 (localhost:3000/static/js/bundle.js...)
at performUnitOfWork (localhost:3000/static/js/bundle.js...)
at workLoopSync (localhost:3000/static/js/bundle.js...)

dear developer, if you have free time, please look at this code and give me an answer, thanks

Collapse
 
ayuechuan profile image
ayuechuan

good

Collapse
 
mamunahmedbd profile image
Mamun Ahmed

This great post because you have describe couple of real package which is very important to me

Collapse
 
leticiacanum profile image
Letícia França

Wow, so cool! I was looking for a project to do during the week and this seems to be it, thanks! 🚀

Collapse
 
abhi199kr profile image
abhi199kr

i have problem with taskcontainer
please anybody provide code for it

Collapse
 
vinay_badola profile image
Vinay Badola

what type of problem?

Collapse
 
vinay_badola profile image
Vinay Badola

VM10:6789 crbug/1173575, non-JS module files deprecated.
I'm not able to solve this error

Image description