Smaran is a modern todo application that demonstrates the power of Angular's latest features combined with Material Design. Built as a showcase of contemporary web development practices, this app provides an intuitive interface for task management while highlighting cutting-edge Angular capabilities.
This todo app goes beyond basic task management by implementing Angular's newest features and best practices. It serves as both a functional productivity tool and a demonstration of modern Angular development patterns. The application features a clean, responsive interface that adapts seamlessly across devices, making task organization effortless whether you're on desktop or mobile.
The app emphasizes user experience with smooth animations, intuitive interactions, and a thoughtfully designed Material Design interface. Each component is built with reusability and maintainability in mind, showcasing how modern Angular applications should be structured.
- Complete Task Lifecycle - Create new todos with due dates, edit existing tasks, and delete unwanted items
- Inline Editing - Click any task to edit content and due dates directly in place
- Status Management - Mark tasks as complete or reactivate them with a simple checkbox interaction
- Intelligent Filtering - Switch between active and completed task views with dedicated category filters
- Smart Sorting - Active tasks sorted by due date priority, completed tasks by completion time
- Date Validation - Built-in date picker with validation preventing past due dates
- Reactive State - Real-time UI updates using Angular's modern signals API for optimal performance
- Dynamic Theme System - Seamless light/dark mode switching with system preference detection
- Responsive Design - Mobile-first design that adapts beautifully across all device sizes
- Angular 21 - Core framework with signals, computed, and inject APIs
- Angular Material - UI components (Dialog, Button, Checkbox, Chips, Form Fields, Date Picker)
- @angular/forms/signals - Signals-based form API with declarative validation
- TypeScript - Type-safe development with interfaces and enums
- CSS/SCSS - Custom styling and Material Design theming
- Standalone Components - Modern Angular architecture without NgModules
This project showcases Angular's latest signals feature for reactive state management, using signal(), computed(), and update() methods for efficient component state handling. It also uses the new @angular/forms/signals API for declarative, type-safe form validation without traditional FormBuilder or observables.
This project is licensed under the MIT License - see the LICENSE file for details.
Abhinav Sinha
- Email: abhi.sinha1302@gmail.com
- GitHub: @CoderSinha
Built with ❤️ using Angular and Material Design