Skip to main content
Pal PatelFreelance Remote Developer
All Case Studies
HR & Workforce ManagementMobile App + Web Admin Platform 4 months Live

NFC Attendance Management System

Enterprise contactless attendance tracking — NFC card tap-in via React Native mobile app with full HR management backend.

View Live System
NFC Attendance Management System

Technology Stack

React NativeExpoNFC (IoT)Laravel 11Filament 3MySQLPush NotificationsExcel ExportSubscription Billing

Overview

Most small-to-medium manufacturing businesses in India still track employee attendance with paper registers or basic biometric devices that don't integrate with payroll. Buddy punching (one employee punching in for another) is common. Leave management is done via WhatsApp.

This system was built for a textile manufacturer running 120 workers across two shifts. The owner needed tamper-proof attendance data that fed directly into payroll calculations, with leave approval workflows that didn't require a dedicated HR person.

The solution: workers tap their NFC card against a supervisor's phone. The React Native app captures the tap, sends a signed request to the Laravel backend, and marks attendance in real-time. The admin panel handles leave, salary, and reporting.

The Problem

Buddy punching: With paper registers, workers could mark colleagues as present without management knowing. On review, the client estimated 8–12% of attendance records were inaccurate.

Manual payroll calculation: 120 workers × salary calculations involving attendance days, overtime, late marks, and deductions took 3 days each month. Errors led to disputes.

Leave management chaos: Leave requests via WhatsApp meant approvals were sometimes missed, balances were manually tracked in a spreadsheet, and there was no audit trail.

No real-time visibility: Management had no way to know who was present at any given moment without physically walking the factory floor.

Biometric device limitations: Existing fingerprint devices worked offline only and required manual export to Excel. Integration with any other system was not possible.

The Solution

NFC as the identification layer:

Each worker is assigned an NFC card. The supervisor's phone (Android) runs the React Native app. When a worker taps their card, the app reads the NFC tag ID, maps it to the employee record, and submits an attendance event with a server timestamp. There is no way for a worker to clock in another employee — the supervisor must be physically present with the phone.

React Native Mobile App:

The app handles NFC reads, displays the employee name and photo for visual confirmation, shows real-time attendance status for the shift, and submits to the API. It works in low-connectivity environments with a local queue.

Laravel Backend with Filament Admin:

The web admin handles employee management, shift configuration, leave approval workflows, salary computation, and report generation. Role-based access allows factory supervisors to view their shift, while management sees everything.

Automated Payroll Engine:

At month-end, the system calculates net salary per employee — base salary, attendance-based deductions, overtime additions, approved leaves, and advance deductions. PDF salary slips are generated per employee and can be bulk-downloaded.

Architecture

Mobile (React Native / Expo):

Built with Expo for managed workflow. Used expo-nfc (community package wrapping Android's NfcAdapter) for tag reading. State managed with Zustand for simplicity. API calls use axios with a retry interceptor for connectivity issues. Secure token storage with expo-secure-store.

Backend (Laravel 11):

RESTful API with Laravel Sanctum for mobile auth. Business logic in service classes — AttendanceService, PayrollService, LeaveService. Queue workers handle push notification delivery to avoid blocking API responses.

Admin (Filament 3):

Custom resources for Employee, Shift, Leave, Salary. Custom Filament pages for the attendance monitor (real-time view of who's present) and payroll batch processing. Excel exports use Laravel Excel package.

Database:

MySQL with attendance records as an append-only log (no updates — corrections are separate corrective records with audit trail). This prevents data tampering.

Key Implementation Details

  • Built NFC tap-to-attend flow in React Native with employee photo confirmation screen
  • Implemented local attendance queue for offline operation with background sync
  • Designed append-only attendance log database schema for tamper-proof records
  • Built payroll engine with configurable deduction rules, overtime rates, and advance tracking
  • Implemented leave management with multi-level approval workflow
  • Created real-time attendance monitor in Filament admin panel
  • Built bulk PDF salary slip generation with employee-wise download
  • Implemented Excel export for attendance and payroll reports
  • Built subscription billing system for multi-tenant SaaS deployment
  • Configured push notifications for leave approval status updates

Screenshots

NFC Attendance Management System screenshot 2
NFC Attendance Management System screenshot 3
NFC Attendance Management System screenshot 4
NFC Attendance Management System screenshot 5
NFC Attendance Management System screenshot 6
NFC Attendance Management System screenshot 7

Business Impact

  • Buddy punching eliminated — attendance accuracy reached 99.8% in first month
  • Monthly payroll processing time reduced from 3 days to 45 minutes
  • Leave approval now happens within 2 hours vs. 2–3 days via WhatsApp
  • Management can view real-time attendance from their phone at any time
  • System deployed as SaaS to 3 additional manufacturing clients within 2 months of launch

Key Engineering Challenge

NFC reliability across different Android devices was the primary technical challenge. The NFC tag reading behaviour varied between manufacturers — Samsung, Xiaomi, and Realme all had different foreground dispatch handling. I maintained a device-tested compatibility list and wrote adapter code for the two most common edge cases. The offline queue presented a consistency challenge: if the supervisor's phone queued attendance records while offline, and a different supervisor submitted for the same employee on a different device that was online, we could end up with duplicate entries. I solved this with an idempotency key (employee ID + shift date + event type) on the backend that rejected duplicate submissions regardless of timing.