← Back to Projects

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