プロジェクト概要
WEALTH CLUBのWeb版と同等機能をReact Nativeで構築したスマートフォンアプリ。ダークテーマの高級感あるUIで、ネイティブのスムーズな操作感を実現しています。iOS/Android両対応のクロスプラットフォーム開発です。
システム構成図
主な機能
ダッシュボード
会員情報・予約状況・ポイント残高を一画面で確認。ゴールドのアクセントカラーでラグジュアリー感を演出。
レストラン予約
検索→詳細→決済→完了の4ステップ。カード決済・ポイント利用・現地決済の3種類に対応。
ラウンジ予約
会員専用ラウンジの空き状況確認と即時予約。時間帯選択やオプション追加に対応。
イベント
会員限定イベントの一覧・詳細・参加申込。カレンダー表示やリマインダー通知にも対応。
会員プロフィール・設定
会員情報の確認・編集、通知設定、セキュリティ設定。プライバシーに配慮した設定画面。
技術的なポイント
- React Native によるクロスプラットフォーム開発
- Salesforce REST APIとのリアルタイムデータ同期
- expo-secure-storeによるセキュアなトークン管理
- React Navigation（5タブ構成）によるネイティブライクな画面遷移
- AsyncStorageによるローカルデータキャッシュ
- カード決済・ポイント利用・現地決済の3種類の決済フロー
開発プロセス
Web版のデザインシステムをモバイルに適用し、AIとの対話でコンポーネントを一気に生成。ダーク＆ゴールドテーマのカスタムUIコンポーネントを約5時間でプロトタイプ完成しました。
注意事項
Expo Go上で動作するプロトタイプです。