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.

State is held entirely in React Context (nine providers in contexts/). The HTTP layer is a thin fetch wrapper in utils/api.ts with JWT refresh via utils/tokenManager.ts. 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, EAS Build, store submission — lives in Operations → Native, since it's an operational workflow rather than an internals concern.

Explore