A complete Task Management System built using Flask, MySQL, Bootstrap, and Jinja2, featuring:
- Full CRUD operations
- Status workflow with color-coded badges
- In-Progress tasks with real progress bar
- REST API for AJAX updates
- View page (read-only mode)
- Icons, favicons, and clean UI
- MySQL database integration
- Fully modular Flask Blueprint structure
- Create tasks
- Edit title, description, status, due date
- Delete tasks
- Read-only View Info page
| Status | Color |
|---|---|
not-assigned |
🔴 Red (danger) |
assigned |
🔵 Blue (primary) |
started |
🔷 Light Blue (info) |
in-progress |
🟡 Yellow (warning) |
finalaudit |
⚪ Gray (secondary) |
completed |
🟢 Green (success) |
- Only visible when status =
in-progress - Progress editable in task list page only
- View Page is read-only
- When progress hits 100%, task auto-moves to finalaudit
- All other statuses have no progress bar
- Update status
- Update progress
- JSON responses
- Validation (no progress allowed unless
in-progress)
flask_task_manager/ │ ├── app.py ├── requirements.txt ├── init_db.sql ├── README.md ├── .env.example ├── .gitignore │ ├── app/ │ ├── init.py │ ├── routes.py │ ├── api.py │ ├── db.py │ │ │ ├── templates/ │ │ ├── base.html │ │ ├── tasks.html │ │ ├── task_detail.html │ │ ├── add_task.html │ │ ├── edit_task.html │ │ │ ├── static/ │ ├── css/ │ ├── js/ │ ├── favicon.ico │ ├── favicon_32.png │ ├── favicon_256.png
yaml
git clone cd flask_task_manager
r
python -m venv venv
.\venv\Scripts\Activate.ps1
Linux/macOS:
python3 -m venv venv
source venv/bin/activate
3️⃣ Install required packages
css
pip install -r requirements.txt
🛢️ MySQL Database Setup
4️⃣ Import the database schema
Make sure MySQL is running, then:
mysql -u root -p < init_db.sql
This creates:
taskdb database
tasks table
🔐 Environment Variables
Create a .env file in the project root:
ini
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=taskdb
SECRET_KEY=changeme
FLASK_ENV=development
▶️ Run the Application
Start the Flask server:
nginx
python app.py
Open in browser:
👉 http://127.0.0.1:5000
🔄 Status Workflow
scss
not-assigned → assigned → started → in-progress → finalaudit → completed
Progress is available only in in-progress.
🧠 REST API Endpoints
✔ Update Progress
POST /api/tasks/<id>/progress
Body: { "progress": 45 }
✔ Update Status
POST /api/tasks/<id>/status
Body: { "status": "in-progress" }
Responses use JSON.
🔍 View Task (Read-Only)
URL:
/tasks/<task_id>/view
Shows:
details
status badge
progress bar (if in-progress)
NO editing
🎨 Favicons
Place favicon files inside:
arduino
app/static/
Add in <head> of base.html:
html
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="icon" sizes="32x32" href="{{ url_for('static', filename='favicon_32.png') }}">
<link rel="icon" sizes="256x256" href="{{ url_for('static', filename='favicon_256.png') }}">
🧹 .gitignore
venv/
__pycache__/
.env
*.pyc
📸 Screenshots (optional)
Add screenshots here to showcase UI:
/screenshots/tasks_page.png
/screenshots/view_page.png
📜 License
Open-source for learning and development.