A modern, collaborative task management board similar to JIRA and Trello, built with Angular 18 and Flask.
✨ Core Functionality
- 📋 Four-column Kanban board (To Do, In Progress, Review, Done)
- 🎯 Drag & drop tasks between columns using Angular CDK
- ✏️ Create, edit, and delete tasks with Material dialogs
- 🔍 Advanced filtering by assignee, priority, and search term
- 📊 Analytics dashboard with task statistics and visualizations
🎨 User Experience
- 🎨 Modern, responsive UI with Angular Material components
- 🔔 Real-time feedback with snackbar notifications
- ⚡ Loading states and progress indicators
- 🎨 Priority color coding (High: Red, Medium: Yellow, Low: Green)
- ⏰ "Due soon" highlighting for tasks within 3 days
- 📱 Mobile-responsive design
🔧 Technical Features
- 🔄 RESTful API with Flask backend
- 💾 In-memory data storage with seed data
- 🌐 CORS enabled for cross-origin requests
- 🔒 Input validation and error handling
- 🎲 Simulated network latency for realistic testing
TaskDemo/
├── frontend/ # Angular 18 application
│ ├── src/
│ │ ├── app/
│ │ │ ├── components/
│ │ │ │ ├── board/ # Main board with drag-drop
│ │ │ │ ├── dashboard/ # Analytics view
│ │ │ │ ├── filter-bar/ # Task filtering
│ │ │ │ ├── task-card/ # Individual task display
│ │ │ │ └── task-dialog/ # Create/edit dialog
│ │ │ ├── app.component.ts # Root component
│ │ │ └── app.routes.ts # Routing configuration
│ │ ├── models/
│ │ │ └── task.model.ts # TypeScript interfaces
│ │ ├── services/
│ │ │ └── task.service.ts # HTTP service
│ │ ├── styles.scss # Global styles
│ │ ├── main.ts # Application bootstrap
│ │ └── index.html # HTML entry point
│ ├── angular.json # Angular CLI configuration
│ ├── package.json # npm dependencies
│ ├── proxy.conf.json # Development proxy
│ └── tsconfig.json # TypeScript configuration
│
└── backend/ # Flask API
├── app.py # Main Flask application
└── requirements.txt # Python dependencies
- Node.js 18.x or higher
- npm 9.x or higher
- Angular CLI 18.x
- Python 3.8 or higher
- pip package manager
# Navigate to backend directory
cd backend
# Create a virtual environment (recommended)
python3 -m venv venv
# Activate virtual environment
# On macOS/Linux:
source venv/bin/activate
# On Windows:
# venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Run the Flask server
python app.pyThe backend server will start on http://localhost:5005
Backend includes:
- 10 pre-seeded sample tasks related to software development
- Automatic data persistence during runtime
- API endpoints accessible at
/api/*
Open a new terminal window:
# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start the development server
npm startThe Angular app will start on http://localhost:4200
The development server includes:
- Auto-reload on file changes
- Proxy configuration to backend API
- Source maps for debugging
- Ensure backend is running on port 5005
- Ensure frontend is running on port 4200
- Open your browser and navigate to http://localhost:4200
- View Tasks: See all tasks organized in 4 columns by status
- Drag & Drop: Click and drag tasks between columns to update status
- Create Task: Click "Create Task" button or the "+" icon on any column
- Edit Task: Click the three-dot menu on any task card and select "Edit"
- Delete Task: Click the three-dot menu and select "Delete"
- Search: Type in the search box to filter by title or description
- Filter by Assignee: Select from dropdown to view tasks for specific person
- Filter by Priority: Filter tasks by Low, Medium, or High priority
- Clear Filters: Click "Clear Filters" to reset all filters
- Click "Analytics" in the top navigation
- View task distribution by status and priority
- See tasks due within the next 3 days
- Review quick statistics and completion rates
- Click "Reset Data" button to restore original seed data
- Useful for testing or starting fresh
http://localhost:5005/api
GET /api/tasksReturns array of all tasks.
POST /api/tasks
Content-Type: application/json
{
"title": "Task title",
"description": "Task description",
"assignee": "Alice Johnson",
"priority": "High",
"status": "To Do",
"due_date": "2025-11-15"
}PUT /api/tasks/{id}
Content-Type: application/json
{
"status": "In Progress"
}DELETE /api/tasks/{id}GET /api/summaryGET /api/assigneesPOST /api/reset{
id: number; // Unique identifier
title: string; // Task title (required)
description: string; // Task description
assignee: string; // Assigned team member
priority: 'Low' | 'Medium' | 'High'; // Priority level
status: 'To Do' | 'In Progress' | 'Review' | 'Done'; // Current status
due_date: string; // ISO date format (YYYY-MM-DD)
}- Angular 18: Modern web framework with standalone components
- Angular Material: UI component library (Toolbar, Cards, Dialogs, etc.)
- Angular CDK: Drag-and-drop functionality
- RxJS: Reactive programming with Observables
- TypeScript: Strongly-typed JavaScript
- SCSS: Enhanced CSS with variables and nesting
- Flask 3.0: Lightweight Python web framework
- Flask-CORS: Cross-Origin Resource Sharing support
- Python: Backend logic and API implementation
- Frontend: http://localhost:4200 (Angular dev server)
- Backend: http://localhost:5005 (Flask server)
- Proxy: Frontend proxies
/api/*requests to backend automatically
The backend includes a 0.3-second delay on all API calls to simulate realistic network latency. This helps test loading states and user experience.
Tasks are stored in memory and will be reset when the backend server restarts. For production, replace with a database (PostgreSQL, MongoDB, etc.).
Edit backend/app.py:
ASSIGNEES = ["Alice Johnson", "Bob Smith", "Your Name Here"]Edit both:
backend/app.py: UpdateSTATUSESarrayfrontend/src/app/components/board/board.component.ts: Updatestatusesarray
Edit seed_data() function in backend/app.py
Angular Material themes can be customized in frontend/src/styles.scss
Port 5005 already in use:
# Change port in app.py:
app.run(debug=True, host='0.0.0.0', port=5006)
# Also update proxy.conf.json to match the new portModule not found:
pip install -r requirements.txtPort 4200 already in use:
ng serve --port 4201npm install fails:
# Clear npm cache and retry
npm cache clean --force
npm installAPI calls failing:
- Ensure backend is running on port 5005
- Check
proxy.conf.jsonconfiguration (should point to port 5005) - Verify CORS is enabled in Flask app
- 🔐 User authentication and authorization
- 💾 Persistent database storage (PostgreSQL/MongoDB)
- 👥 Multi-user collaboration with real-time updates (WebSockets)
- 📎 File attachments for tasks
- 💬 Comments and activity log
- 🔔 Email notifications for due dates
- 📅 Calendar view
- 🏷️ Tags and labels
- 📈 Advanced analytics and reporting
- 🎨 Custom themes and board backgrounds
- ⌨️ Keyboard shortcuts
- 📱 Native mobile apps
This project is open source and available for educational purposes.
Feel free to fork this project and submit pull requests for any improvements!
For questions or issues, please open an issue in the repository.
Happy Task Managing! 🎉