← 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