どぅんどぅん片づけたい！

作業時間ぴったりのプレイリストで、集中力が続く！

アプリ概要

• AIによりタスク消化に最適な時間のプレイリスト作成
• 時間軸で管理できるTODO
• フレンドユーザーのTODO達成率が見れてモチベーション保持

機能概要

• TODO作成機能：タスク名、所要時間、期日を記入したら登録完了
• TODO並べ替え機能：時間軸に沿って並べ替えが可能
• 音楽再生機能：タスク完了に必要な時間のプレイリストを作成、再生が可能
• プロフィール編集機能：名前、アイコン、通知の受け取り可否が変更可能
• フレンド機能：ID検索後フレンド登録が可能。お互いの達成率やタスクを閲覧可能となる
• 終わったタスクの積み上げ機能：タスク完了までの長さによって異なるサイズの箱が積みあがる
• 朝夕のリマインダー：タスクが終わったかの確認リマインダーを設定可能

技術概要

フロント・バック：Next.js、Typescript DB：supabase API:spotify、Gemini

チャレンジしたこと

メギド：Supabaseでテーブル構築やTriggerを使用したDBへの自動登録 データベース設計は初めてだったので、まずMVPの機能を実現するにはどうすればいいか悩みました。また、どんなDBなら後からMVPではない機能を追加する時困らないかを考えるのが難しかったです。 Trigger機能を初めて知り、データの不整合を防げる点やフロントの負荷を減らせる点で非常に便利だと感じました。 とばくろ：SpotifyAPIとgeminiAPIを用いたプレイリストの生成と再生の実装 SpotifyAPIは初めて触りました。2つのAPIを組み合わせて何か実装することは初めてだったので、苦戦しましたがうまく実装できてよかったです！

マーキア：

頑張ったこと

1. フレンド申請機能（最も苦戦した部分）

実装内容

Supabaseで管理されているユーザーのUUIDの最初の8文字のみを使用してフレンド申請を行う機能を実装しました。

苦戦したポイント

• UUIDは通常36文字（ハイフン含む）の長い文字列ですが、ユーザーが簡単に共有できるように最初の8文字のみを使用する仕様にした
• 部分一致検索でのユーザー特定とセキュリティのバランスを取ることが難しかった
• SupabaseのクエリでLIKEやsubstringを使った検索ロジックの実装
• 同じ8文字を持つユーザーが存在する可能性への対応
• フレンド関係のデータベース設計とRLS（Row Level Security）ポリシーの設定

技術スタック

• データベース: Supabase PostgreSQL
• 認証: Supabase Auth
• クエリ: PostgreSQL関数とフィルタリング --

2. AI を使ったタスクリマインド機能（挑戦したこと）

実装内容

Gemini AI を活用して、ユーザーのタスクを分析し、優先度の高いタスクをホーム画面でリマインド表示する機能を実装しました。

---

その他の実装機能

タグカラーカスタマイズ機能

• ユーザーが各タグにカラーコードを設定できる機能
• カラーピッカーUI の実装
• タスク一覧でのカラー適用
• 

カレンダーで月ごとのタスク管理

• 日にちごとのタスクの件数を閲覧できる機能

フレンドのタスクの閲覧

ぎぷそ：Service WorkerとWeb Pushを使用したプッシュ通知の実装とGitHubActionsを使用したリマインダーの実装 通知もGitHubActionsも初めて触るものだったため苦戦しつつも実装することができたため満足しています。

AI活用について

• UIをGeminiによって作成
• コード作成をchatGPT、ClaudeCode、GitHubCopilot等を使用
• コードレビューにGitHubCopilotを使用

スクリーンショット

ホーム画面 タスク管理画面 タスク追加モーダル プロフィール画面 プレイリスト生成画面

1. Spotifyへのログイン

2. プレイリストの生成

3. プレイリスト再生

おまけ イメージキャラクター「どぅんどぅん」