Todo App with Fetch Requests to Backend

What are you most proud of, and what would you do differently next time?

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.

What challenges did you encounter, and how did you overcome them?

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.