This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Users should be able to:

View the optimal layout for the app depending on their device's screen size

See hover states for all interactive elements on the page

Add new todos to the list

Mark todos as complete

Delete todos from the list

Filter by all/active/complete todos

Clear all completed todos

Toggle light and dark mode

Bonus: Drag and drop to reorder items on the list

Throughout this project, I deepened my understanding of how to implement drag-and-drop functionality using the Dnd-kit library, particularly integrating it with Chakra UI components. Handling responsive design was another significant learning, especially how to manage hover states and visibility based on screen size.

The backend of this Todo app is structured to simulate a full-stack application, even though it relies on localStorage instead of a traditional database. The architecture follows a RESTful API pattern, providing clear separation of concerns and ensuring that the app remains maintainable and scalable.

As I move forward with future projects, there are several areas and concepts that I plan to focus on to enhance my skills and refine my approach:

Database Integration: While this project uses localStorage, integrating a real backend database is a key area for future development. Gaining experience with databases such as MongoDB, PostgreSQL, or Firebase will be crucial for handling more complex data operations and ensuring data persistence in production environments.

Backend Frameworks: Exploring and implementing backend frameworks such as Express.js, NestJS, or Django will help in understanding server-side logic, API creation, and middleware. This will also provide insights into best practices for building scalable and maintainable backend systems.