A sleek, responsive, and functional ToDo application built with React. This project focuses on core React concepts, efficient state management, and data persistence using the Browser API.
- Full CRUD Functionality: Create, Read, Update, and Delete tasks seamlessly.
- Data Persistence: Integrated with LocalStorage to ensure your tasks are saved even after page refreshes.
- Smart Focus Management: Utilizes
useRefto handle input focusing for a better user experience (UX) during adding and editing. - Fully Responsive: Optimized for all devices—Desktops, Tablets, and Mobile phones—using advanced CSS (Media Queries, Flexbox, and
clamp()). - Input Validation: Includes error handling to prevent empty task entries.
- React.js: Functional components and modern Hooks.
- Hooks:
useState: Managing tasks, edit states, and errors.useEffect: Syncing tasks with LocalStorage and managing focus transitions.useRef: Direct DOM access for input optimization.
- CSS3: Custom styling with a focus on responsiveness and modern UI/UX.
- React Icons: Professional icons from the
react-iconslibrary. - Crypto API: Used
crypto.randomUUID()for generating unique, collision-resistant task IDs.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/N-Emil/ToDoApp.git