This to-do list application is a portfolio project designed to demonstrate modern web development skills. Built with Angular, the app provides tools for intuitive task management, including CRUD operations, filtering, drag-and-drop reordering, and task presets. It integrates with a MongoDB backend for persistent data storage and features a fully responsive design optimized for various device sizes.
- GitHub Repository: View Source Code
- Live Demo: View Live Site
- Add, edit, and delete tasks with ease
- Mark tasks as complete or active
- Clear all completed tasks with one click
- Create and manage task presets for quick reuse of predefined task lists
- Filter tasks by status (all, active, completed)
- Drag-and-drop functionality for reordering tasks
- Toggle between light and dark themes
- Fully responsive design optimized for mobile, tablet, and desktop views
- Persistent data storage using a MongoDB backend
- Simple user authentication for binding tasks to specific accounts
The application is built with the following technologies and tools:
- Frontend: Angular, RxJS, NgRx SignalStore
- Styling: SCSS
- Backend: Node.js, Express, MongoDB
- Deployment: Netlify (Frontend), Render (Backend)
The app integrates with a MongoDB backend to persist user data, ensuring tasks and presets remain consistent and accessible across sessions. A RESTful API handles all interactions between the front end and the database.
Simple user authentication tasks and presets to be tied to specific accounts. Key features include:
- Login and logout functionality with session persistence using
localStorage - Angular route guards to protect task management features for authenticated users only
The app includes a task preset management system for recurring workflows. Users can:
- Save task lists as reusable presets
- Edit and delete existing presets
- Quickly generate a new to-do list based on a saved preset
The app supports light and dark themes. Its responsive design ensures an optimal experience across mobile, tablet, and desktop devices.