In this article, we are going to learn how to design Jira Board like UI using React with Tailwind CSS and how to manage its state using Context API. Also we are going to implement our own custom Drag and Drop feature by implementing reusable custom hooks. By Altamash Ali.
We are going to implement the whole feature in this post, so it is better to plan step by step how we can approach the problem. I am going to divide the whole problem into three steps:
- Designing and implementing the UI
- What should be optimal component hierarchy for this UI
- How does the data flow work with the proposed component design considering performance scenarios like minimizing extra re-renders
- Managing the state of the component hierarchy
- What should be the interface of the state for the UI
- How can we optimize state design
- Implementing Drag and Drop feature
- Implementing custom hooks for the Drag and Drop
- Using custom hooks in our UI
We liked how author though about deciding on component hierarchy, data structure and data flow through component hierarchy. Very interesting!
[Read More]