Frontend · Agritech · Hardware
Agrotrack
A smart agritech platform that reduces conflicts between farmers and herders — using geofencing to define grazing zones and alert farmers the moment animals enter their farmland.
Built With
https://agrotrack-app.web.app/

Click to Zoom
Category
Frontend · Agritech · Hardware
Event / Achievement
Enugu Campus Hackathon - Top 11 finalist
Deliverables
- IoT Hardware Integration
- Geofencing Engine
- Real-time Alerts Dashboard
- Interactive Map UI
Technologies
React.jsNode.jsTailwind CSSFirebaseTTGO T-Call with SIM800LESP32NEO8M GPSLeaflet Maps APIAI Integrations
Live Product
Visit ApplicationOverview & Context
Agrotrack is an IoT-powered geofencing platform designed to reduce conflict between farmers and livestock herders. It integrates physical tracking hardware with a digital mapping system to protect agricultural zoning:
- Virtual Farmland Geofences: Custom virtual boundaries created by farmers to monitor perimeter safety around crop zones.
- Live Telemetry Stream: Real-time map displaying GPS coordinates of grazing herds next to protected farm zones.
- Instant Perimeter Alerts: Automated SMS/push notification triggers dispatched to farmers and herders the moment livestock cross a geofence.
- Hardware Node Sync: Low-power ESP32 microcontrollers with GPS modules sending coordinates to the cloud via cellular nodes.
What I Engineered
I engineered the mapping visualization and real-time data sync pipeline. Key contributions included:
- Interactive Geospatial Layer: Built a responsive, vector-based rendering layer with Leaflet and React to project complex geofences and path histories without lagging the DOM.
- Telemetry Sync Loop: Connected real-time database updates from IoT hardware (ESP32/SIM800L GPS) to the frontend, utilizing debounce algorithms to prevent map stutter.
- Alert Event Triggers: Set up serverless function endpoints to process incoming location payloads, calculate intersections, and queue immediate SMS alerts.
Challenges & Lessons
- High-Frequency Rendering Lag: Drawing dozens of active GPS tracks and multi-point geofence boundaries caused major browser reflow bottlenecks. I optimized this by implementing canvas-based map rendering rather than SVG DOM elements, cutting rendering time by 75%.
- Latent GPS Telemetry: Fluctuating cellular signals in remote areas sent duplicate or delayed GPS packages. I resolved this by coding a temporal-distance filter on the backend to verify coordinate velocity before updating the live map.
Product Screenshots

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom
LET'S TALK
Let's build something.
I'm currently open to frontend work — SaaS, fintech, edutech, or anything that needs real attention to detail.
If that's you, reach out.