Being able to use dnd-kit for the first time and make it work in this code was a big challenge. I'm happy with how, despite the difficulty, the code turned out quite clean and well-organized.
The most difficult part was adding the drag-and-drop functionality to reorder items. I used dnd-kit for the first time, and then the error appeared: {...listener} and {...attributes} from dnd-kit interfered with events like onChange. The solution was to remove {...listener} from the parent tag <li> to clear the event.
<li {...attributes}>
<input onChange={()} />
<label>
<p {...listener}>
</label>
</li> >
Reaching this solution took me a long time—reading the documentation, and even using AI to understand what was happening.
What specific areas of your project would you like help with?I would have liked the backend .json file to be stored in local memory so that I wouldn't have to modify the original backend. However, I ultimately decided that the logic should rely on different states and that the backend fetch should only be used the first time the page is rendered.
