/RNGeoFence
Productivity / CareeriOS · Android

RNGeoFence

Geofence-Based Attendance Tracking App

Portfolio Demo
Users
4+
Screens
React NativeTypeScriptReact NavigationAsyncStorage@react-native-community/geolocationreact-native-mapsCustom HooksService Layer

App Demo

Watch the app in action

About the Project

RNGeoFence is a cross-platform React Native demo app designed as a location-aware attendance solution for iOS and Android. The product verifies whether a user is physically inside a configured office radius before allowing check-in or check-out, combining live device location, map visualization, attendance state management, and local persistence in one focused workflow.

The core business logic calculates the distance between the user's current coordinates and the office coordinates, then evaluates whether the user is inside the allowed geofence. Once in range, the app enables attendance actions and stores each session locally with timestamps, coordinates, and status context. Attendance history is grouped and displayed for later review, including support for multiple sessions in a day.

The project was built to showcase practical mobile engineering: real-time geolocation handling, permission flows, reusable TypeScript components, custom hooks, service abstractions, and a clean mobile-first UI. It highlights how product logic, UX clarity, and maintainable architecture can come together in a realistic workforce attendance demo.

Key Highlights

▸Geofence-based check-in and check-out restricted to a configured office radius
▸Live GPS distance tracking with in-zone / outside-zone status detection
▸Map-based office marker and geofence circle visualization using react-native-maps
▸Attendance history with local persistence and support for multiple daily sessions
▸Permission handling for location access, GPS disabled states, and error messaging
▸Reusable TypeScript architecture with screens, components, hooks, services, and theme tokens
▸Mobile-first UI with summary cards, banners, badges, and polished attendance interactions
▸Built as a portfolio-grade demo showcasing real-world geolocation product thinking

Technical Breakdown

Feature areas & implementation details

Geofence & Location Logic
▸Calculates live distance between user coordinates and office coordinates
▸Determines in-zone / outside-zone status based on a configured radius
▸Continuously updates location state with geolocation watchers
▸Surfaces location accuracy to help users understand unreliable GPS reads
▸Restricts attendance actions unless the device is inside the office geofence
Attendance Workflow
▸Check-in saves timestamp, coordinates, and office distance for each session
▸Check-out updates the latest open attendance session with exit details
▸Supports multiple sessions per day for realistic attendance usage
▸Attendance history groups and displays locally stored records
▸Designed for a simple, mobile-first employee attendance flow
Map & UI Experience
▸Interactive map view with office marker and rendered geofence circle
▸Live user location display for clear spatial context
▸Status banners, summary cards, badges, and empty states across the app
▸Conditional check-in/check-out controls based on real-time location state
▸Polished feedback and error messaging for common mobile scenarios
Architecture & Code Organization
▸Component-driven React Native architecture with reusable presentational components
▸Custom hooks separate stateful attendance and location logic from UI rendering
▸Service layer encapsulates geofence calculations and AsyncStorage persistence
▸Typed navigation and shared TypeScript models improve maintainability
▸Centralized theme tokens keep spacing, colors, typography, and shadows consistent
Reliability & Edge Cases
▸Handles permission-denied, blocked, GPS-disabled, timeout, and error states
▸Balances real-time location updates with a clean, understandable user experience
▸Uses local persistence so attendance history remains available across app restarts
▸Designed to demonstrate practical cross-platform geolocation engineering concerns
▸Built with maintainability in mind for future backend sync, analytics, and admin features

Other Projects

View All →
Arkmantra
Ayurvedic Cosmetics E-Commerce Storefront & Admin

A highly hardened, full-featured D2C storefront and admin control panel designed...

Soul33 – The Beacon
Spirituality, Meditation & Mindfulness Platform

A cross-platform spiritual wellness app live on iOS & Android with Free, Seeker ...

Yoke Yoga
Social Wellness, Live Yoga & Learning Platform

Production yoga social platform — TikTok-style Reels, ZEGOCLOUD live streaming +...