Animated Todo and Note Application

Built during the early stages of my software development journey, this project goes beyond a standard CRUD (Create, Read, Update, Delete) application; it is a work heavily centered around user experience (UX) and micro-interactions. By combining the state management power of React with the flexible styling capabilities of Tailwind CSS and the fluid animations of Anime.js, I transformed an ordinary task manager into a dynamic and highly engaging interface.

🚀 Key Features

• Categorized Content Management: Users can independently manage two distinct data types: short-term "Tasks" and longer-form "Notes."
• Animated Rich Editor: Instead of redirecting to a new page or showing a clunky form when adding a new entry, a rich input box smoothly appears on the screen (fade-in & slide-up) with the help of Anime.js.
• Dynamic Task Completion (Strike-through): When a user completes a task, a dynamic Switch component activates instead of a standard HTML checkbox. Upon activation, Anime.js simultaneously applies a sleek strike-through animation across the text, providing satisfying visual feedback.

🛠️ Architecture & Technologies

• React.js: Used for managing tasks, notes, and UI states (modal open/closed, switch active/inactive). The component-based structure modularized the animation triggers.
• Tailwind CSS: Utilized for building a fast, responsive, and modern interface design.
• Anime.js: Integrated into the project to manipulate CSS properties (transform, opacity, width) of DOM elements using time-based functions for micro-interactions that breathe life into the app.

💡 Key Takeaways

Early in my coding career, this project taught me that managing data isn't everything; asynchronous visual feedback drastically changes the feel of an application. The foundation of the flawless user experience (UX) architectures I build into large-scale SaaS and B2B platforms today was laid in these early detail-oriented projects.