https://github.com/imaimai17468/imaimai-front-templete
いまいまいのフロント用テンプレートです。
https://github.com/imaimai17468/imaimai-front-templete
biome bun lefthook nextjs tailwindcss typescript
Last synced: 6 months ago
JSON representation
いまいまいのフロント用テンプレートです。
- Host: GitHub
- URL: https://github.com/imaimai17468/imaimai-front-templete
- Owner: imaimai17468
- Created: 2022-10-30T05:50:00.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-01T10:36:55.000Z (over 1 year ago)
- Last Synced: 2025-03-08T00:06:38.808Z (over 1 year ago)
- Topics: biome, bun, lefthook, nextjs, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 2.22 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My App
Next.js 15 + TypeScript + Tailwind CSS + shadcn/ui を使用したモダンなWebアプリケーションテンプレートです。
## 技術スタック
- **Framework**: Next.js 15 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS v4
- **UI Components**: shadcn/ui (Radix UI primitives)
- **Authentication**: Supabase Auth
- **Database**: PostgreSQL (Supabase) + Drizzle ORM
- **Code Quality**: Biome (linting & formatting)
- **Testing**: Vitest + Testing Library
- **Storybook**: Component development & documentation
- **Package Manager**: Bun
- **Git Hooks**: Lefthook
## 開発環境のセットアップ
### 前提条件
- Node.js 18.0.0 以上
- Bun (推奨) または npm/yarn/pnpm
- Supabaseアカウント
- GitHubアカウント（OAuth認証用）
- Googleアカウント（OAuth認証用）
### クイックスタート
```bash
# リポジトリをクローンまたはテンプレートから作成
git clone
cd
# 依存関係をインストール
bun install
# 環境変数の設定
cp .env.example .env.local
```
### Supabaseのセットアップ
このテンプレートはSupabaseを使用した認証とデータ管理を実装しています。
#### 📖 ドキュメント
- **[データベースセットアップガイド](./docs/DATABASE_SETUP.md)** - Supabase + Drizzle ORMの設定手順
- **[Supabaseを使わない場合](./docs/WITHOUT_SUPABASE.md)** - 認証機能が不要な場合
#### 必要な設定
Supabaseを使用する場合は、以下の設定が必要です：
1. Supabaseプロジェクトの作成
2. OAuth認証の設定（GitHub/Google）
3. 環境変数の設定
4. データベースとストレージのセットアップ
### 開発サーバーの起動
```bash
bun run dev
```
http://localhost:3000 でアプリケーションにアクセスできます。
## 利用可能なコマンド
### 開発
```bash
bun run dev # 開発サーバーを起動
bun run build # プロダクション用ビルド
bun run start # プロダクションサーバーを起動
bun run typecheck # TypeScript型チェック
```
### コード品質
```bash
bun run check # Biome linter/formatter チェック
bun run check:fix # Biome 自動修正（unsafe修正含む）
bun run format # Biome フォーマットチェック
bun run format:fix # Biome 自動フォーマット
```
### テスト
```bash
bun run test # Vitestでテスト実行
```
### Storybook
```bash
bun run storybook # Storybook開発サーバーを起動 (http://localhost:6006)
bun run build-storybook # Storybookをビルド
```
## プロジェクト構成
```
src/
├── app/ # Next.js App Router
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # ホームページ
├── components/
│ ├── ui/ # shadcn/ui コンポーネント
│ ├── shared/ # 共有コンポーネント
│ └── features/ # 機能別コンポーネント
└── lib/
└── utils.ts # ユーティリティ関数
```
## コーディング規約
このプロジェクトは厳密なコーディング規約に従っています：
- **コンポーネント命名**: ディレクトリ名（kebab-case）とTSXファイル名（PascalCase）の対応
- **インポート**: `@/` エイリアスを使用した絶対パス
- **コード品質**: Biomeによる自動linting/formatting
- **Git Hooks**: コミット前の自動品質チェック
詳細は `CLAUDE.md` を参照してください。
## Git Hooks
Lefthookにより以下のフックが自動実行されます：
- **Pre-commit**: `bun run check:fix` による自動修正
- **Pre-push**: `bun run check` と `bun run typecheck` による品質チェック
## shadcn/ui
shadcn/uiコンポーネントは `src/components/ui/` に配置されています。新しいコンポーネントを追加する場合：
```bash
bunx shadcn@latest add [component-name]
```
## 認証機能
このテンプレートには、Supabase Authを使用した認証機能が実装されています：
- GitHub OAuth認証
- Google OAuth認証
- ログイン/ログアウト機能
- 認証状態に応じたUIの出し分け
- プロフィールアバターの表示
### 認証フロー
1. ユーザーが「Sign In」ボタンをクリック
2. `/login`ページでGitHub/Googleログインボタンをクリック
3. 選択したプロバイダーの認証画面にリダイレクト
4. 認証成功後、`/auth/callback`でセッションを作成
5. ホームページにリダイレクト
## プロフィール機能
ユーザーは自分のプロフィール情報を管理できます：
### 機能一覧
- **プロフィール表示**: `/profile`ページでユーザー情報を表示
- **名前の編集**: 表示名を自由に変更可能
- **アバター画像のアップロード**:
- 最大5MBまでの画像ファイルをアップロード
- アップロード中のプログレス表示
- 即時プレビュー機能
- Supabase Storageに安全に保存
### プロフィール編集フロー
1. ヘッダーのユーザーメニューから「Profile」を選択
2. `/profile`ページでプロフィール情報を確認
3. アバター画像をクリックして新しい画像を選択
4. 名前フィールドを編集
5. 「Update Profile」ボタンで保存
### 技術的な実装
- **データ管理**: `public.users`テーブルでユーザー情報を管理
- **画像保存**: Supabase Storageの`avatars`バケットに保存
- **リアルタイムバリデーション**: Zodスキーマによる入力検証
- **アクセシビリティ**: shadcn/uiのFormコンポーネントでWCAG準拠
## 参考リンク
- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [shadcn/ui](https://ui.shadcn.com/)
- [Supabase Auth](https://supabase.com/docs/guides/auth)
- [Biome](https://biomejs.dev/)
- [Vitest](https://vitest.dev/)
- [Storybook](https://storybook.js.org/)