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/)
TJ

Tarun.

Compiling the good stuff...

Tarun Jawla — Full Stack Engineer | React Native · NestJS | Open to Contract