The Midnight Concierge — a real-time backpacker meetup app built with Expo, React Native, and the Midnight Gilt design system.
RoamReach connects travelers with shared interests, enabling spontaneous meetups, plan creation, and community discovery in any city worldwide.
- Check In — Mark your presence in a city to appear on the map
- Discover Nearby — Find travelers around you with map & list views
- Backpacker Cards — Rich profiles with reputation scores, verified badges, and travel styles
- Create Plans — Organize food crawls, hikes, nightlife, and cultural outings
- Plans Feed — Browse upcoming meetups filtered by category
- Trust & Safety — Report users, block, and post-meetup ratings
| Tool | Purpose |
|---|---|
| Expo SDK 52 | React Native framework |
| TypeScript | Type safety |
| Expo Router | File-based routing |
| React Native Maps | Map display |
| Zustand | State management |
| Expo Location | GPS check-in |
| Expo Image | Image handling |
| Expo Linear Gradient | Gold gradients |
| Expo Blur | Glassmorphism |
| React Native Reanimated | Animations |
Colors:
- Primary surface:
#131313(matte dark) - Accent:
#e9c176(brushed gold) - Text:
#e6e1e5(onSurface),#c8c6c5(muted) - Glass:
rgba(19, 19, 19, 0.70)
Typography:
- Display: Manrope (Bold, ExtraBold)
- Text: Plus Jakarta Sans
Principles:
- No borders (tonal layering only)
- Floating glassmorphic elements
- Editorial, luxury aesthetic
RoamReach/
├── app/ # Expo Router screens
│ ├── (auth)/ # Onboarding, sign-in, profile setup
│ ├── (tabs)/ # Main navigation: explore, plans, community, profile
│ ├── plan/ # Create plan & plan detail modals
│ ├── backpacker/ # Traveler profile card
│ └── messages/ # Messaging screens
├── src/
│ ├── components/
│ │ ├── common/ # Reusable UI (GoldButton, GlassCard, etc.)
│ │ ├── checkin/ # Check-in sheet
│ │ ├── discover/ # MapView, filters
│ │ ├── plan/ # PlanCard, forms
│ │ ├── safety/ # ReportModal, RatingPrompt, BlockConfirm
│ │ ├── profile/ # Profile enhancements
│ │ └── messages/ # Chat UI
│ ├── constants/ # Theme, categories, travel styles
│ ├── stores/ # Zustand (auth, location, discover, plans, social)
│ ├── data/ # Mock data (backpackers, plans)
│ └── utils/ # Haversine, formatting
└── assets/ # Fonts, images
- Node.js 18+
- Expo CLI (
npm install -g expo-cli) - iOS Simulator / Android Emulator (or physical device with Expo Go)
# Clone the repo (or navigate to project folder)
cd RoamReach
# Install dependencies
npm install
# Copy environment template
cp .env.example .env
# Edit .env with your Supabase URL and anon key (optional for mock mode)
# Start development server
npm startScan the QR code with Expo Go (Android) or Camera app (iOS).
The app runs entirely on mock data in Expo Go. No backend connection required for testing.
Check-in uses GPS simulation set to Bangalore by default. Change coordinates in locationStore.ts for other cities.
Uses react-native-maps with a custom dark style fitting the Midnight Gilt theme. No Mapbox token required.
- Onboarding flow
- Check-in & discovery (map/list)
- Plan creation & feed
- Backpacker profile cards
- Safety & moderation
- Profile with milestones
- Real-time messaging (WebSocket)
- Supabase backend integration
- Push notifications
- Photo verification for ID
MIT
Built with ♥ by Abdul Taufeeq
GitHub: @trippusultan
RoamReach uses Maestro for fast, reliable mobile E2E tests — no native linking required.
-
Install Maestro (one-time):
curl -L "https://get.maestro.dev" | bash
Or download from maestro.mobile.dev.
-
Build the app for your platform:
# Android APK npx expo run:android --variant release # iOS (requires Mac) npx expo run:ios --configuration Release
-
Install the APK on your device/emulator:
adb install android/app/release/app-release.apk
From the project root:
# Run all flows
npm run test:e2e
# Run a specific flow
python scripts/auto/maestro_runner.py signin
python scripts/auto/maestro_runner.py explore
python scripts/auto/maestro_runner.py plan
python scripts/auto/maestro_runner.py checkin
python scripts/auto/maestro_runner.py profile
# Generate HTML report
npm run test:e2e:reportLocated in tests/e2e/flows/:
| Flow | Purpose |
|---|---|
signin.flow.yaml |
OAuth sign-in → Explore landing |
explore_map.flow.yaml |
Map view, marker tap → backpacker profile |
plan_details.flow.yaml |
Plan details, join, rate after date |
checkin.flow.yaml |
City check-in flow end-to-end |
profile.flow.yaml |
Profile page scroll and journey gallery |
- Create a
.flow.yamlintests/e2e/flows/ - Use Maestro syntax:
tapOn,assertVisible,scroll,takeScreenshot - Reference element IDs/text from the app UI strings
- Run with
maestro test tests/e2e/flows/your-flow.flow.yaml
See Maestro docs for advanced selectors and assertions.
RoamReach uses Supabase for authentication and data persistence. Follow these steps:
# 1. Install Supabase CLI
npm install -g @supabase/cli
# 2. Link project (use your project ID from dashboard)
supabase link --project-ref aqcbobnhkiqkhcraeahd
# 3. Push schema
npm run db:push
# 4. Generate TypeScript types
npm run db:types
# 5. (Optional) Seed sample data
npm run db:seedsupabase/migrations/001_initial_schema.sql— tables + RLS policiessupabase/seed/01_data.sql— sample profiles & plansscripts/auto/generate_supabase_types.py— type generatorscripts/auto/run_migrations.py— SQL executor
RLS: Profiles readable by all, editable by owner only. Plans readable by all, manageable by host only.
| Issue | Fix |
|---|---|
| Invalid API key | Verify .env values, restart Expo |
| RLS violation | Ensure user is authenticated before writes |
| Type errors after schema change | Re-run npm run db:types |
| Migration already applied | Already deployed, skip |