alingo-app-frontend

Alingo Frontend

Expo Router React Native app for the Alingo ride-sharing workflow.

The frontend covers:

• phone OTP login and signup flow
• onboarding and verification-status routing
• identity verification submission
• live location sharing
• ride creation and ride search
• ride request, approval, and completion UI
• profile, reviews, and push notifications

Stack

• Expo
• React Native
• Expo Router
• TypeScript
• Axios
• AsyncStorage
• Expo Notifications
• Expo Location
• Expo Image Picker
• Expo Camera
• react-native-maps

Project Structure

frontend/
|-- app/
|   |-- auth/
|   |-- (protected)/
|   |-- _layout.tsx
|   `-- index.tsx
|-- components/
|-- constants/
|-- context/
|-- hooks/
|-- services/
|-- types/
|-- package.json
`-- README.md

Requirements

• Node.js 18+
• npm
• Expo-compatible Android or iOS environment

Setup

cd frontend
npm install

Create frontend/.env if needed.

Main environment variable:

EXPO_PUBLIC_API_BASE_URL=http://10.0.2.2:8000

Fallback behavior in the app:

• Android emulator uses http://10.0.2.2:8000
• other local environments use http://localhost:8000

Running The App

npx expo start

Other commands:

npm run android
npm run ios
npm run web

Navigation Model

The app uses Expo Router with:

• public auth screens in app/auth/
• protected screens in app/(protected)/
• root auth and verification redirects in app/_layout.tsx

Verification-based routing sends users to different screens depending on:

• UNVERIFIED
• PENDING
• REJECTED
• VERIFIED

Main Screens

Public flow:

• app/auth/login.tsx
• app/auth/signup.tsx
• app/auth/otp.tsx

Protected flow:

• app/(protected)/finish-setup.tsx
• app/(protected)/identity-verification.tsx
• app/(protected)/verification-pending.tsx
• app/(protected)/verification-rejected.tsx
• app/(protected)/home.tsx
• app/(protected)/find-buddy.tsx
• app/(protected)/create-ride.tsx
• app/(protected)/ride-details.tsx
• app/(protected)/profile.tsx
• app/(protected)/public-profile.tsx
• app/(protected)/review.tsx

Service Layer

Shared API client:

• services/api.ts

Domain-specific client wrappers:

• services/userService.ts
• services/rideService.ts
• services/reviewService.ts

Other integrations:

• services/firebase.ts
• hooks/useNotifications.ts

Backend Integration

The frontend talks to these main backend route groups:

• /auth/*
• /api/verification/*
• /users/*
• /rides/*
• /reviews/*

Examples used by the app:

• POST /auth/otp/send
• POST /auth/otp/verify
• POST /api/verification/submit
• GET /api/verification/status
• GET /users/me
• PATCH /users/location
• PATCH /users/availability
• POST /users/push-token
• POST /rides/create
• POST /rides/search
• POST /rides/request
• POST /rides/respond
• POST /rides/complete
• POST /rides/cancel
• GET /rides/my-active
• GET /rides/my-requests
• GET /rides/detail
• POST /reviews/create

Core User Flow

1. User enters phone number.
2. User receives and verifies OTP.
3. New user is routed into setup flow.
4. User submits identity verification.
5. Verified users can access ride features.
6. Users can create rides or find nearby rides.
7. After ride completion, users can leave reviews.

Notifications

Push notifications are registered through Expo Notifications.

The app:

• requests notification permission
• fetches an Expo push token
• sends the token to the backend
• routes users when notifications are tapped

Local Development Notes

• The app expects the Django backend to be running.
• Android emulator networking requires 10.0.2.2 instead of localhost.
• Location, notifications, camera, and image-picker flows need device permissions.
• Some notification behavior works best on a physical device.

Manual Verification Checklist

After making frontend changes, manually verify the narrowest relevant flow:

• login / signup OTP flow
• auth redirect behavior
• finish setup screen
• identity verification upload
• home screen location load
• ride search
• ride request / respond UI
• active ride / completion flow
• profile and public profile screens
• review submission
• push notification registration

cd .\frontend; npx expo start --go