2Guide
Development of a React Native app for indoor localization: WebView integration, API security, and CI/CD deployment.
Overview
During my internship, I entirely designed and developed a mobile prototype for indoor navigation based on React Native.
The application allows the user to orient themselves within complex buildings by triangulating their position using Bluetooth Low Energy (BLE) and GPS signals, interfacing with third-party dynamic maps and a secure backend architecture.
UX & Sensors
Hardware permission management (GPS and Bluetooth) is often frustrating for users. Instead of blocking the app at the first refusal, I implemented a reactive logic.
Using custom Hooks, the app constantly monitors the sensor states. If Bluetooth is disabled, the system doesn't stop: it adapts the interface in real-time by showing non-intrusive warnings, alerting the user that positioning accuracy will undergo a physiological degradation.
WebView Integration
The real architectural challenge was the interactive rendering of the maps. Not being static images but HTML documents received via API, I delegated the rendering to a native WebView component.
I built a bidirectional communication bridge between the native environment and the DOM. Bluetooth beacon data read by the sensors are serialized into JSON and, via the injectJavaScript function, passed in real-time to the WebView. A JavaScript CustomEvent intercepts the data and updates the cursor position on the map without ever reloading the page.
API Security
To protect the endpoints from unauthorized access, I structured a multi-level defense approach (Defense in Depth) for Axios calls.
In addition to the mandatory use of unique API Keys generated by the backend, each web request is validated by dynamically checking the Referer header, injected during the build phase via environment variables protected by Git versioning. This nips unauthorized client scraping attempts in the bud.
CI/CD & Deploy
Being a cross-platform project, I automated the entire build cycle for Android and iOS by adopting Expo Application Services (EAS) and GitLab.
Working in an Agile ecosystem, every push to the repository triggers a cloud pipeline that compiles native binaries and centrally manages the app.config.ts file, programmatically resolving Apple and Android's strict policies for sensitive permission requests (Info.plist and AndroidManifest), concluding with store submission.
Do you have a complex architecture to build?
Tell me about your idea. Let's design a solid, automated, and scalable solution together.