Stupomo（スタポモ）は、ポモドーロ・テクニック（25分作業＋5分休憩）を活用して、学習や作業の集中時間を記録・管理できるWebアプリです。
ユーザーはタイマーを開始するだけで学習時間を自動的に記録でき、日別・週別の学習時間を確認することで継続的な学習習慣を作ることができます。
また、集中用BGM（MP3）をアプリ内で再生できるため、学習環境を整えながら作業を進めることが可能です。
プログラミング学習を継続する中で、集中できる時間帯とできない時間帯の差が大きいことに悩んでいました。また、学習時間を記録しようとしても、手動でメモを取るのは面倒で続かないという課題がありました。
そこで、ポモドーロタイマーを使って「集中と休憩を強制的に切り替える」ことで学習効率を高めつつ、学習時間を自動で記録できるアプリがあれば便利だと考えました。
学習記録が蓄積されることで、モチベーション維持にもつながると考え、Stupomoを開発しました。
- プログラミング学習をしている人
- 資格勉強をしている人
- 作業の集中力を高めたい人
- 学習記録を残して習慣化したい人
- 日々の努力を可視化したい人
- ユーザー登録・ログイン（Googleログイン）
- ポモドーロタイマーを開始する
- 作業時間（25分）終了後に休憩時間（5分）へ切り替わる
- セッション終了時に学習記録が保存される
- 学習履歴ページで日別・週別の合計時間を確認できる
- 集中用BGMを再生しながら学習できる
- 認証機能（Supabase Auth）
- Googleログイン / ログアウト
- ポモドーロタイマー機能
- 25分作業 / 5分休憩の切り替え
- タイマー開始 / 停止 / リセット
- 学習記録機能
- 学習時間の保存
- 今日の学習時間合計の表示
- 学習履歴一覧表示
- BGM機能
- MP3再生 / 音量調整 / ループ再生
- 学習科目タグ機能
- 週・月単位のグラフ表示
- streak（連続学習日数）機能
- 目標学習時間設定機能
- ランキング機能
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js / TypeScript |
| UI | Tailwind CSS |
| 認証 | Supabase Auth |
| データベース | Supabase（PostgreSQL） |
| インフラ | Vercel |
| 開発環境 | Docker / Supabase CLI |
| その他 | localStorage（タイマー状態保持） |
| 技術 | 選定理由 |
|---|---|
| Next.js / TypeScript | 学習目的で選定。型安全に開発でき、App RouterでSSRも扱える |
| Tailwind CSS | クラス名だけでスタイリングが完結し、開発テンポを落とさない |
| Supabase Auth | Googleログインを数行で実装でき、JWT管理も不要 |
| Supabase（PostgreSQL） | 認証・DB・APIを一括管理でき、個人開発に最適 |
| Vercel | Next.jsとの親和性が高く、GitHubと連携して自動デプロイ可能 |
| Docker / Supabase CLI | 本番DBを触らずローカルで開発でき、環境を再現しやすい |
| localStorage | ブラウザにタイマー状態を保持し、リロードしても継続できる |
タイマーを動かすだけで学習時間が記録されるため、手動での入力が不要で継続しやすい設計になっています。
学習記録を集計して表示することで、自分の努力を数字として振り返ることができます。
アプリ内で集中用BGM（MP3）を再生できるため、環境を整えて学習を開始できます。
現在Figmaでのデザイン作成中です。完成までしばらくお待ちください。
flowchart TD
ログイン画面 -->|Googleログインボタンを押す| タイマー画面メイン
タイマー画面メイン -->|学習履歴ボタンを押す| 学習履歴画面
学習履歴画面 -->|戻るボタンを押す| タイマー画面メイン
タイマー画面メイン -->|ログアウトボタンを押す| ログイン画面
