Project Overview

Todo App is a dynamic web application designed to streamline your task management experience, allowing users to organize their tasks effortlessly. With CRUD functionality, drag-and-drop sorting, modals for detailed task views, and local storage capabilities, Todo App ensures seamless task management and productivity enhancement.

Project Inspiration

The project was inspired by the need for a CRUD app in my portfolio, the desire for a todo app with a good UI that doesn’t have a paywall, and the aspiration to create a customizable and self-hosted task management solution.

Key Features

CRUD Functionality: Seamlessly Create, Read, Update, and Delete tasks, ensuring flexibility and control over task management.
Drag and Drop Sorting: Facilitate intuitive task organization through drag-and-drop functionality (press and hold item to drag).
Modals: Enhance user interaction with modal windows, providing a focused view for task editing and trash handling.
Local Storage: Persist task data locally, ensuring seamless access and preservation of tasks across sessions.

Technologies Used

Languages: HTML, CSS, Typescript
Frameworks/Libraries: React.js, shadcn/ui, TailwindCSS, dnd kit
Tools: Vite, Lucide, Fontsource

Challenges Faced

Drag and Drop Implementation: Understanding, integrating, and fine-tuning the drag-and-drop functionality to provide a smooth user experience without compromising performance.

Key Learnings

CRUD Functionality: Gained proficiency in implementing Create, Read, Update, and Delete operations using React.
Drag and Drop: Learned to effectively use the dnd kit library for implementing drag-and-drop functionality.
TypeScript with React: Enhanced my understanding of utilizing TypeScript for type safety and better code management in a React application.

Conclusion and Reflection

This project was essential for learning and showcasing CRUD operations, as well as implementing advanced UI features like drag-and-drop sorting. Developing the Todo App allowed me to create a practical tool that meets the needs for flexibility, usability, and self-hosting. I look forward to expanding this project by adding more features and further refining the user experience.