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
 
nevodavid profile image
Nevo David •

Trello

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
 
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 🛡️ •

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
 
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
 
nevodavid profile image
Nevo David •

I have tasks in my backlog from 2019 😅
Ghost task

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
 
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
 
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 •

Do you use Trello, Monday or Jira?

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
 
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
 
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
 
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

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! 🚀