🧠 TaskFlow: Behavior-Driven Task & Code Management Platform

TaskFlow is a full-stack web application designed to help teams organize tasks, submit code, and optimize productivity through behavioral analytics and role-aware workflows. Built with React and Django, it simulates real-world project dynamics — from employee code submissions to Scrum Master reviews, automated status transitions, and VS Code-style repositories.

---

✨ Core Features

👥 Role-Based Access & Navigation

• Scrum Master:
  • Assign tasks, monitor progress, and review submitted code.
  • View code per task, compare outputs, and approve or reject with feedback.
  • Access analytics dashboards and project-wide status.
• Employee:
  • Personalized dashboard with assigned tasks and meeting schedule.
  • Submit code for each task using a VS Code-style file explorer.
  • Drag-and-drop Kanban board to manage task status.
  • Real-time feedback loop from Scrum Master.

---

Scrum login details: name - Chandan password - chandu123

employee login details: name - keerthi password : 123

✅ Task Management

• Create, edit, and categorize tasks by project, tags, or priority.
• Assign tasks to specific roles or individuals.
• Set deadlines, reminders, and status transitions.
• Kanban Workflow:
  To Do → In Progress → Review → Passed/Failed → Done
  with drag-and-drop support for intuitive task movement.
• Comment threads and file/code attachments per task.
• Task cards dynamically reflect role-based permissions and review status.

---

💻 Code Submission & Review Platform

• Employees submit code directly inside task cards using a Monaco-powered editor.
• VS Code-style file explorer:
  • Create folders and files.
  • Rename, delete, and organize like a real IDE.
• Scrum Masters view submitted code per task:
  • Compare actual output with expected output.
  • Provide feedback and mark as Passed or Failed.
  • Failed tasks auto-reset to To Do with reason.
• Status transitions:
  • In Progress → Review on submission.
  • Review → Passed or Failed based on output match.
  • Feedback stored and visible in both dashboards.

---

📊 Behavioral Analytics

• Tracks task interactions: time spent, edits, completion rates.
• Monitors code submission patterns and review cycles.
• Visual dashboards for:
  • Individual productivity
  • Team velocity
  • Focus trends and bottlenecks
• Smart suggestions:
  • Daily summaries
  • Focus tips
  • Task prioritization nudges

---

🎨 UI/UX Highlights

• Responsive design for desktop and mobile.
• Context-aware backgrounds and overlays per page.
• Cinematic transitions between views (dashboard, Kanban, meetings).
• Modular CSS architecture with support for dark mode toggle.
• VS Code-inspired repo interface with icons, spacing, and context menus.
• Consolidated Project Status tab showing:
  • All submitted, passed, failed, and in-review tasks.

---

🛠 Tech Stack

Layer	Technology
Frontend	React.js, Vite, JSX, Monaco Editor
Backend	Django, Django REST Framework
Database	PostgreSQL (via Render)
Analytics	Pandas, Chart.js / react-chartjs-2
Drag & Drop	@hello-pangea/dnd
Code Editor	@monaco-editor/react
Versioning	Git & GitHub

---

📂 Project Structure

TaskFlow/
├── frontend/
│   └── frontend/
│       ├── src/
│       │   ├── pages/         # Dashboard, Login, Register, RoleSelect, Tasks
│       │   ├── main.jsx       # Entry point (4000+ lines of logic)
│       │   ├── style.css      # Global styles
│       │   └── api/           # Axios config
│       └── vite.config.js
├── backend/
│   ├── api/                   # Django apps and views
│   ├── venv/                  # Python virtual environment
│   └── manage.py              # Django entry point
├── docs/                      # Architecture diagrams, API specs
├── assets/                    # UI mockups, screenshots
└── README.md                  # Project documentation

---

⚙️ Installation & Setup

🔧 Backend (Django + Render PostgreSQL)

📦 requirements.txt

Django>=4.2
djangorestframework>=3.14
django-cors-headers>=4.0
django-filter>=23.5
python-decouple>=3.8
psycopg2-binary>=2.9
pandas>=2.2
gunicorn>=21.2
whitenoise>=6.6
django-extensions>=3.2
django-debug-toolbar>=4.2

🛠 Local Setup

cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver

🔐 Environment Variables (.env)

DEBUG=True
SECRET_KEY=your-secret-key
DATABASE_URL=postgres://your_user:your_password@your_host:5432/your_dbname
ALLOWED_HOSTS=localhost,127.0.0.1

On Render, set these variables in the dashboard and connect to your PostgreSQL instance.

---

🎨 Frontend (React + Vite)

📦 package.json dependencies

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.1",
    "axios": "^1.6.7",
    "@hello-pangea/dnd": "^13.1.0",
    "xlsx": "^0.18.5",
    "@monaco-editor/react": "^4.7.0",
    "chart.js": "^4.4.0",
    "react-chartjs-2": "^5.2.0",
    "uuid": "^9.0.1",
    "classnames": "^2.5.1"
  },
  "devDependencies": {
    "vite": "^5.0.10",
    "@vitejs/plugin-react": "^4.0.3",
    "postcss": "^8.4.31",
    "autoprefixer": "^10.4.16"
  }
}

🛠 Local Setup

cd frontend/frontend
npm install
npm run dev

---

🔹 Frontend Static Site

npm run build

👨‍💻 Author

Chandan M
GitHub: @ChandanM123456