← All work
CASE STUDY · [10]
YEAR · 2023
ROLE · Full-stack mobile + native

Vero-Drive

React Native driver app for a multi-service delivery platform with integrated DJI drone control. Food, packages, purchases, returns, and drone drops in one flow.

Outcomes
0+Profile screens
0Order types
0Drone
MEDIA SLOT
app screenshots or drone control screen with telemetry
Suggested: MapScreen with active ride + drone telemetry side-by-side
BRIEF

A driver's app that had to do a lot: accept orders, navigate to pickup, capture signatures, and — on the drone-equipped variant — pilot a DJI drone for aerial delivery. The stack has to hold across all of that while running on a phone strapped to a dashboard.

[01]

The map screen (src/Containers/Main/MapScreen) is the driver's home. Live location updates on a timer push to the backend at https://vero-1.herokuapp.com/api/v1/ (Config/index.js:3, axios wrapper at Services/index.js:6). Gas stations render as pins, earnings scroll in a bottom sheet. When an order lands (Firebase Cloud Messaging via @react-native-firebase/messaging), a TripNotification screen alerts the driver. Accepting transitions app state through ride_accepted → ride_started → ride_arrived → ride_ended, each backed by an API call. Signatures capture at both pickup and delivery via react-native-signature-capture and upload before the ride can end (Containers/Main/RideToPickup/index.js:594, RideToDestination/index.js:630). The Main navigation stack includes 7 top-level screens (MapScreen, RideScreen, RideToPickup, RideToDestination, ChatScreen, TripNotification, ProfileStack) and ProfileStack itself holds 15 subscreens: About, BankDetails, ChangePassword, Earnings, EditProfile, MyVehicle, PrivacyPolicy, Profile, ProfileDetails, RideDetails, RideHistory, Settings, Summary, SwitchService, TermsConditions.

Order lifecycle + drone branch
LIVE·yellow = hot path·rust = data flow·+ = click for source
BackendHeroku REST+FCM pushper-driver topic+MapScreenlive location · offers+Accept rideride_acceptedRideToPickupnavigate + signature1 of 5 statesRideToDestinationnavigate + signaturesigned deliverySignature captureupload before startSignature captureupload before endCompleteride_endedDroneControllandscape lockDJI native bridge12 exposed methods+Drone feed + telemetrybattery · altitude
State machine for a normal delivery on the left; DJI native module branches off for drone-equipped rides.
[02]

For drone-equipped orders, DroneControl hands off to a custom native module that wraps the DJI SDK. The JS-side wrapper (src/DJIModule.js) exposes 12 methods to the app: startSDKRegistration, checkDroneConnection, getSDKVersion, getProductInformation, listenForProductChanges, startVideoFeed, getBatteryLevel, getDroneHeight, getDroneLocation (2D), getDrone3DLocation, takePicture, and a testMethodDJI diagnostic. Everything visual on that screen — video feed, telemetry overlays — comes over the bridge; JS drives the UI shell.

[03]

Signal on a delivery route is not reliable. Redux Persist keeps the whole state tree in AsyncStorage so a driver who loses connection mid-ride comes back to the same order status. Every API call goes through a single axios wrapper that queues writes if the network is down (via @react-native-community/netinfo).

STACK
React NativeRedux + Redux Persistreact-native-mapsreact-native-maps-directionsDJI SDK (native bridge)Firebase Cloud MessagingaxiosHeroku (backend)