0. 概要📃

🍑58ハッカソン2025 feat.関西学生エンジニア in #桃山学院大学🏫　にて制作

Imacalla ~ 寂しがり屋の私たちが届ける！！暇人同士と繋がれる通話アプリ！ ~

Team ANDERE

1. 機能🛠️

1. Googleでログイン可能な便利さ

ワンクリックでログインし、「今から」始めることができます！

2. ボタンひとつで電話をかけれるクイックな使い心地

電話にフォーカスを当てたSNSなので、ここのUXにはこだわりました。

3. 本格的に使える通話画面

慣れ親しんだ通話アプリのようなUIで、快適な通話体験を提供します。（画像は待機画面）

4. フレンドのオンライン状況の確認・追加が簡単

画面でアクティブなフレンド、非アクティブなフレンドが丸わかり！+ボタンからフレンドの追加も行えます。

5. ダークモードも実装中🌚

ダークモードも対応できるように誠意製作中です！

2. 使用技術

挑戦したこと🔥

• Progate Pathと二週間インターンの知識をフル活用してものを作る！
• HonoのRPCを使うなど、型安全にすること
• MQTTのプロトコルとライブラリを使用したサーバー自作
• 例外を意識すること

3. 構成図🗺️

継続的な開発なために、GithubActionsを使用。 EsLintやPritterはもちろん、GCPにデプロイするyamlも書いています！ サーバーは、前回のハッカソンはk8sを使い大変だったので、GCPのCloudRun（サーバーレス）で楽をしました！

通話部分はWebRTCのsaas、Livekitを使用して構築しています！

4. 実行手順✊

リポジトリをクローンする

git clone git@github.com:yomi4486/progate-andere-hackathon.git

DBの立ち上げ

cd ./backend
npm migrate

iOSアプリの起動

cd ./frontend
npm run ios

5. 苦労した点・感想など💭

• Reactを触るのが初めてで、レンダリングの順番に苦労した。モーダルの作成が難しかった。(フロント担当者)
• MQTTのブローカーに対するアクセスの方法と、そのヘッダーの解析に苦労した。（バックエンド担当者）
• HonoのRPCを使ったフロントエンドとバックエンドの繋ぎ込みが難しかった。（フロント・バックエンド担当者）