Pomo!

はじめに

このアプリは、ほぼ全ての機能を オン/オフ切り替え可能 な、 カスタマイズ性抜群 のポモドーロ記録アプリです。

ポモドーロテクニックとは

ポモドーロテクニックは時間管理法の一つで、作業を25分間（1ポモドーロ）集中して行い、その後5分間の休憩を取るというサイクルを繰り返す方法です。4ポモドーロごとに、より長い休憩（15〜30分）を取ります。この手法は、集中力の維持や作業効率の向上、疲労軽減に効果があるとされています。

概要

https://pomo-custom.vercel.app/

このアプリは、ポモドーロテクニックを使って 学習･作業時間を記録したい と考えている人向けに、
既存のアプリではユーザーにとって必要/不要な機能が入り混じっているという課題を、
ほぼすべての機能を オン/オフ切り替え可能 という機能で解決する、高いカスタマイズ性を持ったポモドーロ記録アプリです。

タイマーページ	分析ページ	設定ページ

主要機能

• カスタマイズ可能なポモドーロタイマー: 作業時間・休憩時間を自由に設定
• カテゴリー機能: カテゴリー登録＆カテゴリーごとの分析が可能
• 機能のオン/オフ切り替え: 必要な機能だけを有効化
• 統計とデータ可視化: 学習・作業時間の分析と可視化
• サウンド設定: カスタマイズ可能な音声通知
• ユーザー認証: Supabase Authによる安全なログイン

システム構成図

使用技術

フロントエンド

• 言語: TypeScript
• フレームワーク: Next.js 14 (App Router)
• スタイリング: TailwindCSS, Radix UI, shadcn/ui
• 状態管理/データフェッチ:
  • SWR: データフェッチと状態管理

バックエンド

• 言語: TypeScript
• フレームワーク: Next.js 14 (Route Handlers)
• データベース: PostgreSQL (Supabase Database)
• ORM: Prisma
• 認証: Supabase Auth
• ストレージ: Supabase Storage

開発環境・インフラ

• IDE: Cursor
• ホスティング: Vercel
• バージョン管理: Git, GitHub
• デザイン: Figma

主要なライブラリ

• React Hook Form: フォーム管理
• Zod: バリデーション
• React Select: セレクトボックス
• ESLint / Prettier: コード品質管理
• Tone.js: 音声再生
• Recharts: データ可視化
• React Toastify: 通知
• Jest / Testing Library: テスト

データベース設計

開発環境のセットアップ

前提条件

• Node.js 18.x以上
• npm
• Git

インストール手順

1. リポジトリをクローン:

git clone https://github.com/hayato33/pomo.git
cd pomo

2. 依存関係をインストール:

npm install

3. 環境変数を設定:

   .env.localファイルを作成し、以下の環境変数を設定してください：

   # Supabase設定
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
   
   # データベース設定
   DATABASE_URL=your_database_url_here

   注意: これらの値はSupabaseプロジェクトの設定から取得できます。

   • Supabase URL: プロジェクト設定 > API > Project URL
   • Supabase Anon Key: プロジェクト設定 > API > Project API keys > anon public
   • Database URL: プロジェクト設定 > Database > Connection string > URI

4. 開発サーバーを起動:

npm run dev

5. ブラウザで http://localhost:3000 を開いてアプリにアクセス

GitHub Actions設定

CI/CDパイプラインを正常に動作させるために、GitHub Secretsに以下の環境変数を設定してください：

1. GitHubリポジトリの設定ページに移動
2. Settings > Secrets and variables > Actions
3. 以下のSecretsを追加：
   • NEXT_PUBLIC_SUPABASE_URL: SupabaseプロジェクトのURL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabaseの匿名キー
   • DATABASE_URL: データベース接続文字列

これらの値は開発環境で使用するものと同じです。