← back to Beverlyhillsvideos App
README.md
133 lines
# Beverly Hills Videos — iOS App
An elegant guide to Beverly Hills dining, shopping, hotels, and culture built with Expo (managed workflow) + TypeScript + expo-router.
## Stack
- Expo SDK 57 (managed workflow)
- React Native 0.86.2
- expo-router 57 (file-based routing, native bottom tabs)
- react-native-webview — Home, Videos, Guides tabs
- react-native-maps — native Map tab with 44 Beverly Hills locations
- @react-native-async-storage/async-storage — Favorites persistence
- @react-native-community/netinfo — offline detection
## Development
```sh
# Install dependencies
npm install
# Start Expo dev server (scan with Expo Go or a dev client)
npm start
# iOS simulator
npm run ios
# Android emulator
npm run android
# TypeScript check
npm run typecheck
```
## EAS Build
First, install the EAS CLI and log in:
```sh
npm install -g eas-cli
eas login
```
### Development build (simulator)
```sh
eas build --platform ios --profile development
```
### Preview build (device, internal distribution)
```sh
eas build --platform ios --profile preview
```
### Production build
```sh
eas build --platform ios --profile production
```
## EAS Submit (App Store)
Before submitting, fill in the TODOs in `eas.json`:
| Field | Location | How to find it |
|---|---|---|
| `appleId` | `eas.json` → `submit.production.ios` | Your Apple ID email address |
| `ascAppId` | `eas.json` → `submit.production.ios` | App Store Connect → App → App Information → Apple ID (numeric) |
`appleTeamId` is already set to `3VAV3KMNZK`.
Also replace `TODO_REPLACE_WITH_EAS_PROJECT_ID` in `app.json` with the project ID from your Expo dashboard after running `eas build` for the first time (it will prompt you).
### Submit to App Store
```sh
eas submit --platform ios --profile production
```
Or build and submit in one step:
```sh
eas build --platform ios --profile production --auto-submit
```
## Project Structure
```
app/
_layout.tsx Root layout (SplashScreen, StatusBar)
(tabs)/
_layout.tsx Bottom tab navigator (Home, Videos, Map, Guides)
index.tsx Home tab — beverlyhillsvideos.com/
videos.tsx Videos tab — /videos.html
map.tsx Map tab — native react-native-maps screen
guides.tsx Guides tab — /restaurants.html
components/
BHVWebView.tsx Shared WebView: pull-to-refresh, offline state, external link routing
FilmModal.tsx In-app WebView modal for restaurant film pages
FavoritesModal.tsx Favorites list sheet
constants/
Colors.ts Brand palette (cream, ink, green, gold) + map marker colors
hooks/
useFavorites.ts AsyncStorage-persisted heart toggle
useNetworkStatus.ts NetInfo online/offline state
types/
index.ts MapLocation, Film, LocationType types
assets/
icon.png 1024x1024 app icon
splash.png Splash screen
map-locations.json 44 Beverly Hills locations
films.json 44 restaurant film entries
```
## App Store Guideline 4.2 (Not a bare WebView)
The app satisfies Guideline 4.2 through the native Map tab, which provides unique, app-only functionality:
- Native `react-native-maps` map with 44 curated Beverly Hills markers
- Markers colored by category (restaurant, store, doctor, lawyer)
- Tappable callouts with Call, Menu, and Watch Film actions
- Filter chips by location type
- Favorites system persisted via AsyncStorage
- Native Share integration
- Offline detection with graceful retry
## Apple SDK Requirement
Apple requires the iOS 18 SDK (Xcode 16) or later for all App Store submissions.
EAS Build's `production` profile uses a managed image that ships the current Xcode — no additional configuration needed.
## Configuration Notes
- `ios.bundleIdentifier`: `com.abrams.beverlyhillsvideos`
- `appleTeamId`: `3VAV3KMNZK`
- Location permission: NSLocationWhenInUseUsageDescription set in `ios.infoPlist`
- NSAllowsArbitraryLoads enabled for beverlyhillsvideos.com HTTP compatibility