Technology Stack: React Native (Android & iOS),Firebase Client Objective: Enhance user engagement and responsiveness in visitor approval workflows
1. Background & Problem Statement
The existing Visitor Management System allowed guards to raise visitor requests, which triggered push notifications to residents for approval or rejection. While functional, this mechanism lacked interactivity:
• Notifications appeared passively and could be missed.
• Users had to open the app to take action.
• No immediate response capability from the lock screen.
This reduced efficiency and created friction in the visitor approval process, especially in scenarios requiring quick decisions.
2. Preferred Solution
The client envisioned a popup notification system that would behave like an incoming call:
• A ringing-style popup appears instantly when a visitor request is raised.
• Users can approve or reject directly from the popup.
• Actions trigger backend HTTP requests seamlessly.
• The popup functions even when the app is closed or the phone is locked.
This solution aimed to deliver real-time interactivity, ensuring residents never miss critical visitor requests.
3. Execution Strategy
Our team approached the project with a structured methodology:
Requirement Analysis
• Conducted workshops with stakeholders to understand pain points.
• Defined user experience goals: immediacy, simplicity, and reliability.
• Outlined technical constraints for lock-screen notifications.
Technology Selection
• React Native: Ensured cross-platform compatibility (Android & iOS).
• Firebase Cloud Messaging (FCM): Provided robust push notification delivery.
• Custom Native Modules: Integrated call-like UI behaviour for popup notifications.
System Design
• Designed a notification handler that intercepts FCM messages.
• Built a popup interface mimicking call screens with “Approve” and “Reject” buttons.
• Configured backend APIs to process HTTP requests instantly upon user action.
• Ensured lock-screen compatibility by leveraging native OS capabilities.Development & Integration
• Implemented modular React Native components for reusability.
• Integrated Firebase for real-time message delivery.
• Developed backend endpoints to handle approval/rejection securely.
• Conducted rigorous testing across devices, OS versions, and lock-screen states.
Quality Assurance
• Simulated visitor requests under varied conditions (app closed, device locked).
• Verified latency: popup appeared within milliseconds of guard request.
• Ensured secure transmission of user actions to backend.
• Collected user feedback and refined UI for clarity and responsiveness.
4. Outcome & Impact
The new popup notification system delivered significant improvements:
• Instant Engagement: Users respond without opening the app.
• Lock-Screen Accessibility: No missed requests due to inactive devices.
• Faster Decision-Making: Approval/rejection processed in real time.
• Enhanced User Experience: Call-like interface felt intuitive and familiar.
This innovation transformed the Visitor Management System into a proactive, interactive
solution, strengthening trust and satisfaction among residents.
5. Key Learnings & Strengths Demonstrated
• Expertise in cross-platform mobile development.
• Ability to integrate real-time communication systems.
• Strong focus on user-centric design and experience.
• Seamless collaboration between frontend, backend, and QA teams.
6. Conclusion
By combining React Native and Firebase, our team successfully delivered a next-generation visitor approval system that is fast, interactive, and reliable. This project showcases our ability to solve complex user experience challenges with innovative, scalable solutions.
