Back

// team tool

FAB LAB Tasks Tracker

Built for me and my colleagues at FAB LAB to track work progress — a shared Gantt dashboard on the lab TV, and a personal task page for each team member.

Web App Firebase Vanilla JS
View on GitHub →

// why it exists

Why I Built It

At FAB LAB, our team was juggling multiple projects with no shared view of who was working on what, what was done, and what was blocked. Work was tracked informally — in messages, sticky notes, or just kept in people's heads. Things slipped through.

I built this so everyone on the team could see the full picture at a glance. A TV screen in the lab runs the dashboard permanently — it shows a live Gantt chart of all ongoing tasks, cycles through team views, and updates in real time as people log progress from their own devices. No more asking "what's the status on that?" — the TV tells you.

// what it does

What It Does

// tv dashboard

  • Gantt chart showing all team tasks with dependency arrows, colour-coded by person
  • Auto-cycles between views: Timeline, Team, Completed This Week, Needs Attention
  • Live clock and sync status indicator
  • Updates in real time from Firebase — no refresh needed
  • Wake Lock keeps the screen on permanently

// personal task page

  • Each team member signs in and sees their own tasks
  • Start, complete, edit, or delete tasks from a clean interface
  • All Tasks tab shows the whole team's work in one read-only view
  • Admins can manage team members, user accounts, and projects from Settings
  • Task dependencies with cycle detection — no circular chains

// tech stack

How It's Built

Frontend Vanilla JS — no build step
Database Firebase Firestore (realtime)
Auth Firebase Authentication
Gantt chart Frappe Gantt (via CDN)
Hosting GitHub Pages
TV hardware Raspberry Pi 4 + Chromium kiosk

// get started

How to Set It Up

  • Step 1 — Fork the repo at github.com/akash2000e/FAB_Tasks_Tracker
  • Step 2 — Create a Firebase project at console.firebase.google.com — enable Firestore and Email/Password Auth
  • Step 3 — Register a Web app in Firebase and paste the config values into assets/js/config.js
  • Step 4 — Enable GitHub Pages on your repo: Settings → Pages → deploy from branch main, root folder
  • Step 5 — Open user.html in your browser — on first visit it shows a Create Admin Account form. Fill it in to create the first admin user
  • Step 6 — From Settings, add team members, create user accounts, and add projects. Then open index.html on the TV screen in fullscreen — it will show the Gantt dashboard live

For a permanent TV display, run Chromium in kiosk mode on a Raspberry Pi 4 pointed at your GitHub Pages URL. The dashboard requests Wake Lock to prevent screen sleep.