Back to projects

PRODUCT / ENGINEERING

TaskFlow

Team task & attendance platform

Full-stack web app for daily planning, task tracking, attendance, breaks, and reporting—built for real team workflows: check-in, SOD/EOD, timesheets, and admin oversight.

Next.jsReactTypeScriptMaterial UITanStack Querydate-fnsAxiosNestJS
Web
TaskFlow — preview
TaskFlow product preview

About the project

Full-stack web app for daily planning, task tracking, attendance, breaks, and reporting—built for real team workflows: check-in, SOD/EOD, timesheets, and admin oversight.

Per-project tasks with types, status, priority,

Attendance: check-in/out, monthly calendar, live

SOD/EOD posts and break logging with live timers

Leaves, company holidays, and admin user/project

Key features

  • Per-project tasks with types, status, priority, hours, and links
  • Attendance: check-in/out, monthly calendar, live working hours
  • SOD/EOD posts and break logging with live timers
  • Leaves, company holidays, and admin user/project management
  • Weekly reports, analytics, and CSV/Excel export by date range
  • Light/dark theme and responsive MUI UI (Ctrl+K shortcuts)

Project details

Role
Full Stack Developer
Duration
—
Type
Side project
Status
Completed

Tech stack

NS
RT
TT
MI
TY
DS

Project gallery

More screenshots
coming soon

Technical deep dive▾
TaskFlow is a full-stack web application for teams to run their day in one place: plan and execute tasks per project, check in and out, post start-of-day (SOD) and end-of-day (EOD) updates, log breaks with live timers, and view attendance on a calendar.

Admins manage users, projects, and company holidays, and can review any employee's attendance, tasks, and leaves. Reports support weekly summaries, week-over-week comparison, and date-range export to CSV/Excel for timesheets.

✨ Key features


- Tasks — Per-project tasks (types, status, priority, expected/actual hours, links); create/edit flows with validation when marking a task complete.
- Attendance — Check-in/out, monthly calendar (present, half-day, leave, holiday, working), live hours when checked in.
- SOD / EOD — Start/end-of-day posts with timestamps used for workday-hour calculations.
- Breaks — Start/end break with type, optional reason, planned duration; live timer; break time excluded from working hours.
- Leaves & holidays — User leave requests; company holiday calendar.
- Reports — Weekly hours, tasks, and breaks; simple analytics; export attendance and tasks by date range.
- Admin — Create users and projects, assign users to projects, manage holidays; audit any user's attendance, tasks, and leaves.
- UX — Light/dark theme, responsive Material UI, keyboard shortcut (e.g. Ctrl+K) for quick access to reports/export.

🛠️ Tech stack


| Layer | Stack |
|-------|--------|
| Frontend | Next.js (App Router), React, TypeScript, Material UI, TanStack Query, date-fns, Axios |
| Backend | NestJS, TypeScript, JWT auth, REST APIs |
| Database | PostgreSQL, Sequelize ORM, migrations |
| Other | Role-based access (USER / ADMIN), file uploads (e.g. profile photo), Notistack toasts |

🌐 Links


- Live app: [taskflow.tarunjawla.com](https://taskflow.tarunjawla.com/)
Tarun Jawla — Full Stack Engineer · Healthcare & Wearable Tech