Modern Todo App with Next.js https://to-do-app-green-mu.vercel.app/ Use it now from this link A feature-rich, responsive todo application built with Next.js 15, TypeScript, and Tailwind CSS. This application offers a modern, intuitive interface for managing tasks with advanced features like categories, sorting, filtering, and multilingual support.

✨ Features 📱 Responsive design that works on desktop and mobile 🎨 Beautiful UI with smooth animations using Framer Motion 🌓 Dark/Light mode support 🌐 Multilingual support (English and Persian) 📂 Category management with color coding 🔍 Advanced search and filtering capabilities ⏱ Task sorting by due date and alphabetically 💾 Local storage persistence using IndexedDB ✅ Task completion tracking 📅 Due date management with remaining days display 🛠️ Built With Next.js 15 - The React framework for production TypeScript - For type safety Tailwind CSS - For styling Framer Motion - For animations IndexedDB - For local data storage date-fns - For date manipulation Lucide React - For icons 🚀 Getting Started Prerequisites Node.js 18.17 or later npm or yarn or bun Installation Clone the repository:

git clone https://github.com/Mahdirnj/todoapp.git cd modern-todo-app Install dependencies:

npm install

or

yarn install

or

bun install Run the development server:

npm run dev

or

yarn dev

or

bun dev Open http://localhost:3000 with your browser to see the result.

📖 Usage Adding Tasks Click the "+" button in the top right corner Fill in the task details (title, description, category, due date) Click "Add Task" to save Managing Categories Use the category panel on the left side Add new categories with custom colors Edit or delete existing categories Filter tasks by category Sorting and Filtering Use the dropdown menus above the task list to: Filter by status (All/Active/Completed) Sort by due date or alphabetically Search tasks by title Language Support Toggle between English and Persian using the language switch button Interface automatically adjusts for RTL text in Persian mode Theme Toggle Switch between light and dark modes using the theme toggle button Theme preference is saved automatically 🤝 Contributing Contributions are welcome! Here's how you can help:

Fork the repository Create your feature branch (git checkout -b feature/AmazingFeature) Commit your changes (git commit -m 'Add some AmazingFeature') Push to the branch (git push origin feature/AmazingFeature) Open a Pull Request

🙏 Acknowledgments Next.js Documentation Tailwind CSS Documentation Framer Motion Documentation 📸 Screenshots

📫 Contact Mahdi - @iMahdirn ( Telegram )

Project Link: https://github.com/Mahdirnj/todoapp