How I Built Presentee: A Full-Stack Smart Attendance and Payroll SaaS with Next.js 16 & React Native
An in-depth architectural walkthrough of building Presentee — a production-grade workforce platform featuring a Next.js 16 Web CRM, native Expo mobile app on Google Play, server-authoritative GPS geofencing, device binding, and automated hourly payroll.
Introduction: The Problem with Traditional Attendance
For most growing businesses, attendance tracking is a fragile patchwork of spreadsheet columns, WhatsApp check-ins, or clunky on-premise biometric fingerprint hardware. These legacy systems suffer from pervasive vulnerabilities: buddy punching (employees clocking in for absent colleagues), lost cards, device failure, and hours of administrative overhead every month manually reconciling overtime, leaves, and salary deductions.
To solve this, I designed and engineered Presentee — a modern, server-authoritative SaaS ecosystem consisting of a high-productivity web admin CRM, an automated payroll engine, and a native mobile application published on the Google Play Store.
The Core Architectural Principle: Server-Authoritative Verification
The cardinal rule when designing anti-fraud attendance systems is simple: never trust the client clock, coordinates, or validation state. In Presentee, the mobile client only acts as a sensor reporting raw telemetry. All business policies and decisions are verified on the server against the backend database clock:
- GPS Geofencing: Attendance punches are verified on the backend by calculating the Haversine distance between the device's reported coordinates and the company's configured office perimeter (e.g., 50m–150m radius).
- Live Selfie Evidence: At the precise timestamp of check-in, the front-facing camera captures photo evidence directly through native APIs (preventing gallery uploads). Photos are stored with automated 60-day privacy retention cleanup.
- Strict Single-Device Hardware Binding: Each employee account is cryptographic-hash-bound to one approved physical smartphone. Switching devices triggers a security flag requiring explicit administrator sign-off.
- On-Device Biometric Confirmation: The app leverages native OS biometric hardware (Fingerprint, Touch ID, Face ID) verified locally via operating system dialogs, ensuring sensitive biometric vectors never touch cloud servers.
The Web Architecture: Next.js 16 App Router Unified Monolith
Rather than sprawling into unneeded microservices, Presentee runs as a unified, highly scalable Next.js 16 App Router application. A single deployable codebase powers:
- Marketing & Onboarding: Self-serve workspace registration that provisions a company tenant in under 60 seconds.
- Company Admin Web CRM: A desktop command center with live attendance feeds, employee directory, leave management, manual punch exception handling, and office rule configuration.
- Automated Payroll Engine: Automatically translates validated punches into payroll-ready payout summaries, featuring precise hourly overtime pay and fair, proportional late-arrival deductions instead of arbitrary penalties.
- Platform Super Admin Console: An isolated, high-security operational tier for platform billing, tenant lifecycle monitoring, and telemetry.
- Versioned REST API (
/api/v1): Secure, session- and token-authenticated endpoints consumed by both the web CRM and mobile clients.
The Mobile Client: Native React Native & Expo 57 on Google Play Store
Employees expect a fast, one-tap mobile check-in that works even with spotty connectivity. Built using React Native and Expo 57, the mobile application provides native hardware access to the camera, geolocation sensors, and local authentication modules.
Key engineering feats in the mobile client include:
- Real-Time Geofence Radar: Live visual status indicators showing employees whether they are within office bounds before attempting a punch.
- Shared Zod Schemas: Request and response payloads share identical validation schemas between the mobile app and server, ensuring type-safe API communication.
- Admin Approvals on the Go: Company administrators can review pending device bindings and approve employee leave requests directly from mobile push notifications without opening a computer.
- Google Play Store Review Mode: An isolated, mock-backed reviewer mode that allows App Store and Play Store compliance teams to evaluate authentication and check-in without mutating production data.
Data Integrity & Multi-Tenancy with MongoDB Replica Sets
In multi-tenant SaaS platforms, data isolation and transactional consistency are critical. Presentee scopes every database query explicitly to the authenticated company tenant workspace. Multi-step operations — such as workspace provisioning and multi-document attendance logging — execute inside MongoDB replica set atomic transactions, guaranteeing zero partial writes and rock-solid reliability.
Quality Assurance, CI/CD, and Zero-Downtime Deployment
To ensure bulletproof reliability in production, the codebase incorporates:
- 600+ Automated Tests: Comprehensive test suite covering unit logic, integration tests running against ephemeral disposable MongoDB replica sets, and end-to-end browser flows with Playwright.
- Architectural Import Boundaries: Custom linting rules that fail CI builds if domain layer encapsulation is violated.
- Zero-Downtime VPS Deployment: Automated GitHub Actions pipelines that build, test, and deploy production containers to a self-managed VPS via PM2 in under 2 minutes.
Conclusion & Key Takeaways
Building Presentee demonstrated that small, focused teams can deliver enterprise-grade, anti-fraud workforce platforms by pairing modern frontend architectures with strict, server-authoritative backend design. The platform is actively running in production today at presentee.ashwanitiwari.com and available for Android on the Google Play Store.
