Skip to main content

Tech Stack

TechnologyPurpose
Expo SDK 54React Native framework
expo-routerFile-based routing
NativeWindTailwind CSS for React Native
React QueryServer state management
React Hook Form + ZodForm handling and validation
Supabase JSDatabase, auth, storage
Lucide React NativeIcons

Architecture

The mobile app connects to Supabase directly — no web API layer in between:
  • Direct Supabase RPC calls for all reads and writes (create, update, delete)
  • Direct Supabase table queries for simple operations (follows, favorites, saves)
  • Direct Supabase Storage uploads for images
  • Shared Zod schemas from @recipe-room/shared for client-side validation
  • React Query for caching, optimistic updates, and server state
  • expo-router for file-based navigation
  • RLS policies are the primary security boundary
app/
├── (tabs)/                   # Bottom tab navigation
│   ├── index.tsx             # Home feed
│   ├── discover.tsx          # Discover content
│   ├── search.tsx            # Global search
│   ├── saved.tsx             # Saved items & collections
│   └── profile.tsx           # Current user profile
├── create.tsx                # Create modal (transparent modal presentation)
├── saved-items.tsx           # Uncategorized saved items list
├── notifications.tsx         # Notifications inbox
├── profile/[username].tsx    # Other user's profile
├── connections/[username].tsx # User connections
├── followers/[username].tsx  # Followers list
├── following/[username].tsx  # Following list
├── recipe/[id].tsx           # Recipe detail
│   └── edit.tsx              # Recipe edit
├── post/[id].tsx             # Post detail
│   └── edit.tsx              # Post edit
├── collection/[id].tsx       # Collection detail
│   └── edit.tsx              # Collection edit
├── recipe/new.tsx            # Recipe create
├── post/new.tsx              # Post create
├── collection/new.tsx        # Collection create
├── login.tsx                 # Login screen
├── forgot-password.tsx       # Password reset request
├── register.tsx              # Registration
├── register-success.tsx      # Registration confirmation
├── settings.tsx              # Account settings
└── _layout.tsx               # Root providers, modal/push screen config
app/_layout.tsx also mounts SaveModal globally and configures create as a containedTransparentModal, so not every interaction surface maps 1:1 to a route file.

Key Differences from Web

AspectWeb (Phase 2)Mobile (Current)
Data mutationsAPI routes → SupabaseDirect Supabase (RPC + table queries)
Data readsAPI routes → SupabaseDirect Supabase (RPC + table queries)
Security layerAPI routes + RLSRLS only (primary boundary)
StylingTailwind CSSNativeWind
RoutingNext.js App Routerexpo-router
Image handlingnext/imageexpo-image
Image uploadAPI route → StorageDirect Supabase Storage
Auth storageCookiesexpo-secure-store
HapticsN/Aexpo-haptics

Feature Status

FeatureStatus
Authentication✅ Complete
Follow/Unfollow✅ Complete
Posts (CRUD)✅ Complete
Recipes (CRUD)✅ Complete
Likes/Favorites✅ Complete
Collections✅ Complete
Saved Items✅ Complete
Comments & Mentions✅ Complete
Notifications✅ Complete
Global Search✅ Complete