Yoga Image

Yogaardiana

Portfolio
  • Portfolio
  • Articles

Back to Portfolio
Moreps — Personal Workout Tracker - Portfolio Banner

Moreps — Personal Workout Tracker

Visit WebsiteGitHubYouTube
Flutter
Dart
Supabase
Riverpod
GoRouter
fl_chart

Video Demo

About This Project

Moreps — パーソナルワークアウトトラッカー & 筋力アナライザー

背景

定期的にジムに通う人の多くは、自分自身の成長を把握しきれていません。前回何kg挙げたか、自己ベストからどれくらい経つか、体重がどう推移しているか——スマホのメモに残しても、すぐに散らかって分析しづらくなります。Morepsは、こうした課題を解決するために作られました。すべてのトレーニングセッションを記録し、筋力の成長を追跡し、自己ベスト(PR)を自動で検出する、たった一つのアプリです。

開発内容

認証とオンボーディング。 メール/パスワードまたはGoogle OAuthでログインでき、ログイン状態に応じて自動的に画面を振り分けるスマートセッションチェックを搭載。オンボーディングでは名前・生年月日・体重・身長・目標といった初期データを収集し、アプリ内の計算やおすすめが最初から自分に合った内容になるようにしています。

ワークアウトビルダーとアクティブトラッカー。 アプリの中核機能です。ドラッグ&ドロップでテンプレートを組み立て、セットを追加し、KGとLBSの単位変換もできます。セッション中はタイマー・レップ数・重量に加え、テンプレートにない突発的なエクササイズもリアルタイムで記録できます。

通知・振動付き休憩タイマー。 セット間の休憩カウントダウンにはローカル通知、振動フィードバック、モチベーションを保つための名言を組み合わせています。

PR自動検出とビジュアル分析。 セッション終了と同時に、ボリューム・所要時間・セット数、そして新記録が出た場合はそのハイライトが即座に表示されます。これらの進捗はインタラクティブなグラフで可視化され、体重トラッカーも1ヶ月/3ヶ月/全期間のフィルターで確認できます。

履歴とワークアウトカレンダー。 ネオンカラーのマーカーでトレーニング日を示すビジュアルカレンダーに加え、データが増えても軽快に動く無限スクロール履歴を実装しています。

技術的な工夫

MorepsはFeature-First StructureとRepository/Service Patternを組み合わせて構築されており、ビジネスロジックとUI層を明確に分離することで、保守や機能追加をしやすくしています。状態管理にはRiverpod(Notifier・AsyncNotifier)を採用し、データの流れを予測可能な形に保ちつつ、GoRouterでOAuthリダイレクトを含む宣言的なルーティングを実現しました。ビジュアル面ではダークモード+グラスモーフィズムを採用し、#010102のダークな配色に#CFFF4Bのネオングリーンをアクセントとして加えることで、長時間のトレーニング中でも見やすく、かつプレミアム感のあるデザインに仕上げています。

技術構成

カテゴリテクノロジー
フレームワークFlutter & Dart
バックエンドSupabase (PostgreSQL, Auth, Storage)
状態管理Riverpod
ルーティングGoRouter
データ可視化fl_chart
認証メール/パスワード & Google OAuth

チームと方法論

Morepsは3名のチーム — Yoga Ardiana(私)、Adprian Pratama、Nova Perwira — によってアジャイルスクラム手法で開発されました。私はプロジェクトマネージャーを務めると同時に、開発にも直接参加しました。全てのチームメンバーがプロジェクトのあらゆる側面に積極的に関与しました。

このプロジェクトはモバイルプログラミングおよび情報システムプロジェクトマネジメントの各講義の最終課題であり、授業で学んだ知識とスキルをアプリケーション開発に直接応用しました。

成果

Morepsは、テンプレートの計画からセッションの実行、長期的な分析まで、トレーニングの全サイクルを一つのアプリにまとめることに成功しました。PR自動検出と進捗グラフが単なる記録用アプリを超えたモチベーションとなり、ユーザーが継続的にトレーニングを続ける後押しとなっています。

🔗 Live website: https://moreps.vercel.app/

🎥 Demo Video: https://youtu.be/XgnO-fKrJd4 💻 Source Code: https://github.com/yogaarrd/uas_mobile_programing

Gallery

Back to Portfolio