Todo Management App

A Task management application built with Angular 20, featuring comprehensive todo and person management with advanced filtering, export capabilities, and responsive design.

Features

Task Management

• Todo Management: Create, edit, and manage tasks with detailed information
• Priority System: Organize tasks by priority levels (High, Medium, Low)
• Label System: Categorize tasks with customizable labels
• Progress Tracking: Track completion status and date ranges
• Person Assignment: Assign tasks to specific team members

People Management

• Contact Management: Manage team members with contact information
• Task Assignment: View and assign tasks to individuals
• Contact Details: Store names, emails, and phone numbers

Advanced Features

• Filtering & Search: Advanced filtering by priority, labels, completion status, and assignee
• Export Capabilities: Export data to multiple formats (PDF, Excel)
• Responsive Design: Mobile-friendly interface built with Tailwind CSS
• Real-time Updates: Dynamic data management with reactive forms
• Toast Notifications: User feedback for all actions

Technology Stack

• Framework: Angular 20 with standalone components
• Styling: Tailwind CSS with Angular Material components
• State Management: Angular services
• Export Functionality: jsPDF and xlsx libraries
• Testing: Jasmine and Karma
• Build System: Angular CLI with modern bundling

Prerequisites

• Node.js (version 18 or higher)
• npm (version 8 or higher)
• Angular CLI

Local Development Setup

1. Clone and Install Dependencies

# Clone the repository (if applicable)
git clone https://github.com/sonegillis1/todo
cd todo

# Install dependencies
npm install

2. Environment Configuration

The application uses environment-based configuration. Environment files are automatically generated during the build process.

3. Start Development Server

# Start the development server
npm start

The application will be available at http://localhost:4200. The development server supports hot reloading for real-time updates during development.

4. Start Mock Data Server (Optional)

For development with mock data:

# Start JSON server for mock API
npm run json-server

This starts a mock API server on http://localhost:3000 with sample data.

Available Scripts

Development

npm start          # Start development server with environment setup

Building

npm run build      # Production build with optimization

Testing

npm test           # Run unit tests with Karma

Data Server

npm run json-server # Start mock API server

Project Structure

src/
├── app/
│   ├── components/          # Feature components
│   │   ├── todo/           # Todo management components
│   │   ├── person/         # Person management components
│   │   └── shared/         # Reusable UI components
│   ├── models/             # TypeScript interfaces and types
│   ├── services/           # Business logic and data services
│   └── environments/       # Environment configuration
├── public/                 # Static assets
└── styles.scss            # Global styles

Key Components

Todo Management

• TodoList: Main todo dashboard with filtering and actions
• TodoModal: Create/edit todo items with full form validation

Person Management

• PersonList: Team member directory with management capabilities
• PersonModal: Add/edit person details and contact information

Shared Components

• ExportControls: Multi-format data export functionality
• FilterButton: Advanced filtering interface
• Toast: User notification system

API Integration

The application is designed to work with REST APIs for data persistence. During development, it uses a JSON server for mock data. For production deployment, update the service endpoints in the respective service files.

Build and Deployment

The application builds to static files in the dist/ directory and can be deployed to any web server or CDN that supports single-page applications.

# Production build
npm run build

# The dist/ folder contains all static assets for deployment

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

---