Skip to content

Frontend

The Tomoda frontend is a single cross-platform application built with Expo SDK 55 and React Native 0.83, rendered natively on iOS and Android and via react-native-web in the browser. The codebase is written in TypeScript against React 19, with routes served by expo-router's file-based router (app/_layout.tsx plus folders under app/).

One repository (frontend/) ships three artifacts:

  • A native iOS binary (com.tomoda.app) signed for the App Store.
  • A native Android binary (com.tomoda.app) signed for Google Play.
  • A static web bundle (npm run build → expo export -p web) served behind nginx in production.

Platform-specific behavior is isolated via Platform.OS checks and .web.tsx / .android.tsx / .ios.tsx file suffixes. The largest such split is the map: mobile uses react-native-maps (Google Maps SDK), web uses react-leaflet over OpenStreetMap tiles.

Server state is held in TanStack Query (per-hook query keys, WebSocket-hydrated cache); app-level state (auth, theme, presence, page chrome) lives in React Context providers under contexts/. The HTTP layer is a thin fetch wrapper in utils/api.ts (handleResponse<T>) with JWT refresh via utils/tokenManager.ts, wrapped by one service per backend domain in services/. Real-time chat uses native WebSocket against the backend hub. Translations live in i18n/locales/*.json (en-US, ja-JP, zh-CN, zh-TW) and are wired in via react-i18next.

What's in this section

This section covers the frontend codebase itself — internal architecture, routing, state, API client, components, i18n. Two related concerns live elsewhere:

  • Visual language — colors, typography, component design — lives in Style Guide, since it's brand-level and spans more than just the codebase.
  • Native dev / build / release — Android Studio setup, expo run:android, local task build:*, store submission — see the Native sub-section.

Explore