概要

**Walk City（ウォークシティ）**は、散歩を楽しみながら継続することを目指した街づくり型Webアプリです。歩いた量に応じて報酬を獲得し、それを使って自分だけの街を少しずつ発展させていきます。建物や住民が増えることで、日々の運動の成果を目に見える形で感じられる体験を提供します。

コア機能

• Google Healthと連携して歩数を取得し、報酬に換算
• 街づくり機能
• 建物の効果による人口の計算
• 人口ランキング機能

ターゲット

運動不足がちで、「少しは運動しようかなー」と考え始めている若い人の皆さん

ストーリー

なぜこの機能を作ったか

ウォーキングの「継続」をテーマにアプリを作成した。歩数の取得技術を活用して、何かゲームができれば面白いと考え、街づくりゲームを開発することにした。

開発中苦戦したこと・どうやって乗り越えたか

バックエンドとフロントエンドの接続の部分で、ドキュメントの整備が甘かったこともあり、かなり手間取ってしまった。 進め方をどうするか考えていたところ、メンターの方のアドバイスで、接続の担当者を決め、フロントエンドに合わせることで合意して実装することにした。最終的に時間はかかったが接続を行うことができた。

使用したサービスおよびフレームワーク

フロントエンド

• typescript
• react
• tailwindcss

バックエンド

• Supabase Database ユーザー、マップ等のプレーデータの保存。RLS (Row Level Security)を利用してセキュリティを確保。
• Supabase Auth Googleアカウントのログインと認証に利用。
• Edge Functions Google Health APIと連携して歩数データの取得。および、データベースへの反映。
• Google Health API 歩数データの取得に利用。AppleヘルスケアとGoogle Healthを連携することでクロスプラットフォームを実現。

アーキテクチャー図

チーム開発で工夫したところ

APIの型・インターフェースを先に定義し、モックAPIを使ってフロントを開発した。バックエンド完成後は、そのインターフェースの実装をSupabase版へ差し替えることで統合した。 これによってチームメンバーがお互いの実装完了を待たずに作業できた。

個人の目標

・yoanz6258 typescript+reactでモダンなWebフロントエンドに挑戦, チーム開発/githubのきれいな運用

・unknown19021 SupabaseとJavaScriptのコードがわかるようにする。 初めてのバックエンド、共同開発を頑張る

・alipirin3272 初めてフロントエンド開発に挑戦する。新たな技術の習得やGithubを用いた共同作業を頑張る。 初めて触る技術（typescript+react）を理解し、活用できるようにしたい。