← Back to Projects
ShiftTracker - Employee Time Tracking Web Application

ShiftTracker - Employee Time Tracking Web Application

ShiftTracker is a full-stack employee time tracking web application that enables employees to clock in/out of shifts, manage breaks, and track their work hours with GPS-based location verification. The app features a role-based system with an admin dashboard for workforce oversight and a personal Employee Dashboard for individual shift management.

ReactTailwind CSSNode.jsExpress.jsMongoDBMongoose

About This Project

Key Features - Real-Time Shift Tracking: Start and end work shifts with a single click, with a live timer displaying working hours in real time - Break Management: Support for Lunch Break and Short Break types, with automatic exclusion of break time from total working hours - GPS Location Tracking: Captures employee geolocation at shift start/end and break transitions using the browser Geolocation API, displayed on an interactive Leaflet/OpenStreetMap - Work Statistics Dashboard: View daily, weekly, and monthly working hour summaries at a glance - Shift History: Paginated history table showing date, start/end times, duration, and break count for all past shifts - Admin Dashboard: Admin panel to view all employees, manage roles (Employee/Admin), toggle active/inactive status, and review all shift records - CSV Export: Export shift data to CSV for payroll or reporting purposes - JWT Authentication: Secure token-based authentication with role-based route protection - Dark Mode: System: Aware dark/light theme toggle with localStorage persistence - Responsive Design: Mobile-first UI that adapts seamlessly across all screen sizes - Email Notifications: Automated shift start/end confirmation emails with HTML formatting Detailed Tech Stack: React 19, Vite, Tailwind CSS, React Router v7, Axios, Leaflet/React-Leaflet, date-fns, JWT Decode, Node.js, Express.js, MongoDB, Mongoose, JWT (jsonwebtoken), bcryptjs, Nodemailer, Leaflet + OpenStreetMap with Geolocation API