{"id":26120436,"url":"https://github.com/imaimai17468/imaimai-front-templete","last_synced_at":"2025-12-25T03:10:10.015Z","repository":{"id":172712917,"uuid":"559442451","full_name":"imaimai17468/imaimai-front-templete","owner":"imaimai17468","description":"いまいまいのフロント用テンプレートです。","archived":false,"fork":false,"pushed_at":"2025-01-01T10:36:55.000Z","size":2324,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-08T00:06:38.808Z","etag":null,"topics":["biome","bun","lefthook","nextjs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imaimai17468.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-30T05:50:00.000Z","updated_at":"2025-01-01T10:36:59.000Z","dependencies_parsed_at":"2024-11-04T07:19:33.791Z","dependency_job_id":"6e39ee48-9b4e-42ba-a2a0-7f944b38334b","html_url":"https://github.com/imaimai17468/imaimai-front-templete","commit_stats":null,"previous_names":["imaimai17468/imaimai-front-templete"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imaimai17468%2Fimaimai-front-templete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imaimai17468%2Fimaimai-front-templete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imaimai17468%2Fimaimai-front-templete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imaimai17468%2Fimaimai-front-templete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imaimai17468","download_url":"https://codeload.github.com/imaimai17468/imaimai-front-templete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242856023,"owners_count":20196360,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["biome","bun","lefthook","nextjs","tailwindcss","typescript"],"created_at":"2025-03-10T13:14:58.011Z","updated_at":"2025-12-25T03:10:10.009Z","avatar_url":"https://github.com/imaimai17468.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# My App\n\nNext.js 15 + TypeScript + Tailwind CSS + shadcn/ui を使用したモダンなWebアプリケーションテンプレートです。\n\n## 技術スタック\n\n- **Framework**: Next.js 15 (App Router)\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS v4\n- **UI Components**: shadcn/ui (Radix UI primitives)\n- **Authentication**: Supabase Auth\n- **Database**: PostgreSQL (Supabase) + Drizzle ORM\n- **Code Quality**: Biome (linting \u0026 formatting)\n- **Testing**: Vitest + Testing Library\n- **Storybook**: Component development \u0026 documentation\n- **Package Manager**: Bun\n- **Git Hooks**: Lefthook\n\n## 開発環境のセットアップ\n\n### 前提条件\n\n- Node.js 18.0.0 以上\n- Bun (推奨) または npm/yarn/pnpm\n- Supabaseアカウント\n- GitHubアカウント（OAuth認証用）\n- Googleアカウント（OAuth認証用）\n\n### クイックスタート\n\n```bash\n# リポジトリをクローンまたはテンプレートから作成\ngit clone \u003cyour-repo-url\u003e\ncd \u003cyour-repo-name\u003e\n\n# 依存関係をインストール\nbun install\n\n# 環境変数の設定\ncp .env.example .env.local\n```\n\n### Supabaseのセットアップ\n\nこのテンプレートはSupabaseを使用した認証とデータ管理を実装しています。\n\n#### 📖 ドキュメント\n\n- **[データベースセットアップガイド](./docs/DATABASE_SETUP.md)** - Supabase + Drizzle ORMの設定手順\n- **[Supabaseを使わない場合](./docs/WITHOUT_SUPABASE.md)** - 認証機能が不要な場合\n\n#### 必要な設定\n\nSupabaseを使用する場合は、以下の設定が必要です：\n\n1. Supabaseプロジェクトの作成\n2. OAuth認証の設定（GitHub/Google）\n3. 環境変数の設定\n4. データベースとストレージのセットアップ\n\n### 開発サーバーの起動\n\n```bash\nbun run dev\n```\n\nhttp://localhost:3000 でアプリケーションにアクセスできます。\n\n## 利用可能なコマンド\n\n### 開発\n\n```bash\nbun run dev          # 開発サーバーを起動\nbun run build        # プロダクション用ビルド\nbun run start        # プロダクションサーバーを起動\nbun run typecheck    # TypeScript型チェック\n```\n\n### コード品質\n\n```bash\nbun run check        # Biome linter/formatter チェック\nbun run check:fix    # Biome 自動修正（unsafe修正含む）\nbun run format       # Biome フォーマットチェック\nbun run format:fix   # Biome 自動フォーマット\n```\n\n### テスト\n\n```bash\nbun run test         # Vitestでテスト実行\n```\n\n### Storybook\n\n```bash\nbun run storybook        # Storybook開発サーバーを起動 (http://localhost:6006)\nbun run build-storybook  # Storybookをビルド\n```\n\n## プロジェクト構成\n\n```\nsrc/\n├── app/                    # Next.js App Router\n│   ├── globals.css        # グローバルスタイル\n│   ├── layout.tsx         # ルートレイアウト\n│   └── page.tsx           # ホームページ\n├── components/\n│   ├── ui/                # shadcn/ui コンポーネント\n│   ├── shared/            # 共有コンポーネント\n│   └── features/          # 機能別コンポーネント\n└── lib/\n    └── utils.ts           # ユーティリティ関数\n```\n\n## コーディング規約\n\nこのプロジェクトは厳密なコーディング規約に従っています：\n\n- **コンポーネント命名**: ディレクトリ名（kebab-case）とTSXファイル名（PascalCase）の対応\n- **インポート**: `@/` エイリアスを使用した絶対パス\n- **コード品質**: Biomeによる自動linting/formatting\n- **Git Hooks**: コミット前の自動品質チェック\n\n詳細は `CLAUDE.md` を参照してください。\n\n## Git Hooks\n\nLefthookにより以下のフックが自動実行されます：\n\n- **Pre-commit**: `bun run check:fix` による自動修正\n- **Pre-push**: `bun run check` と `bun run typecheck` による品質チェック\n\n## shadcn/ui\n\nshadcn/uiコンポーネントは `src/components/ui/` に配置されています。新しいコンポーネントを追加する場合：\n\n```bash\nbunx shadcn@latest add [component-name]\n```\n\n## 認証機能\n\nこのテンプレートには、Supabase Authを使用した認証機能が実装されています：\n\n- GitHub OAuth認証\n- Google OAuth認証\n- ログイン/ログアウト機能\n- 認証状態に応じたUIの出し分け\n- プロフィールアバターの表示\n\n### 認証フロー\n\n1. ユーザーが「Sign In」ボタンをクリック\n2. `/login`ページでGitHub/Googleログインボタンをクリック\n3. 選択したプロバイダーの認証画面にリダイレクト\n4. 認証成功後、`/auth/callback`でセッションを作成\n5. ホームページにリダイレクト\n\n## プロフィール機能\n\nユーザーは自分のプロフィール情報を管理できます：\n\n### 機能一覧\n\n- **プロフィール表示**: `/profile`ページでユーザー情報を表示\n- **名前の編集**: 表示名を自由に変更可能\n- **アバター画像のアップロード**: \n  - 最大5MBまでの画像ファイルをアップロード\n  - アップロード中のプログレス表示\n  - 即時プレビュー機能\n  - Supabase Storageに安全に保存\n\n### プロフィール編集フロー\n\n1. ヘッダーのユーザーメニューから「Profile」を選択\n2. `/profile`ページでプロフィール情報を確認\n3. アバター画像をクリックして新しい画像を選択\n4. 名前フィールドを編集\n5. 「Update Profile」ボタンで保存\n\n### 技術的な実装\n\n- **データ管理**: `public.users`テーブルでユーザー情報を管理\n- **画像保存**: Supabase Storageの`avatars`バケットに保存\n- **リアルタイムバリデーション**: Zodスキーマによる入力検証\n- **アクセシビリティ**: shadcn/uiのFormコンポーネントでWCAG準拠\n\n## 参考リンク\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [Tailwind CSS](https://tailwindcss.com/docs)\n- [shadcn/ui](https://ui.shadcn.com/)\n- [Supabase Auth](https://supabase.com/docs/guides/auth)\n- [Biome](https://biomejs.dev/)\n- [Vitest](https://vitest.dev/)\n- [Storybook](https://storybook.js.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimaimai17468%2Fimaimai-front-templete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimaimai17468%2Fimaimai-front-templete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimaimai17468%2Fimaimai-front-templete/lists"}