Communitygithub.com

DjFikie25/shipkit

Next.js と React Native のフルスタックアプリを、認証・データベース・AIチャット・テストを統合したプロダクション対応のスターターキットで構築します。

shipkit とは?

DjFikie25/shipkitは、Next.jsとReact Nativeを組み合わせたフルスタックアプリケーションを迅速に開発するためのプロダクション対応スターターキットです。認証(Auth.js)、データベース(Prisma + PostgreSQL/SQLite)、AIチャット(OpenAI互換API)、そしてテスト(Vitest, Playwright)が統合されており、開発者はゼロから設定を組み上げることなく、すぐにコーディングを開始できます。このスキルは、特にWeb版とモバイル版を同時に開発したいチームや、AI機能を組み込んだSaaSアプリの立ち上げに最適です。また、Turborepoを用いたモノレポ構成により、コードの共有と管理が容易で、Dockerを使用した環境構築もサポートしています。具体的な手順としては、リポジトリのクローン、依存関係のインストール、環境変数の設定、データベースのマイグレーションを順に行うだけで、認証済みのユーザー管理とAIチャット機能を備えたアプリケーションが起動します。

対応~Claude Code~Codex CLI~Cursor
npx skills add DjFikie25/shipkit

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

shipkit は何をしますか?

Next.js と React Native のフルスタックアプリを、認証・データベース・AIチャット・テストを統合したプロダクション対応のスターターキットで構築します。

概要

s shipkit コマンドは、ユーザーがプロダクション品質のフルスタックアプリケーションを迅速に立ち上げるためのスキルです。Next.js(Web)と React Native(モバイル)の両方をカバーし、以下の主要機能を最初から含んでいます。

  • 認証: Auth.js を使用した安全なサインイン/サインアップ
  • データベース: Prisma + PostgreSQL(または SQLite)による柔軟なデータ管理
  • AIチャット: OpenAI 互換の API を使用したリアルタイムチャット機能
  • テスト: Vitest によるユニットテストと Playwright による E2E テスト
  • モノレポ: Turborepo を使用した効率的なコード管理

使用方法

shipkit を起動するには、以下の手順に従ってください。

  1. リポジトリをクローンします。

    git clone https://github.com/DjFikie25/shipkit.git
    cd shipkit
    
  2. 依存関係をインストールします。

    pnpm install
    
  3. 環境変数を設定します。.env.example ファイルをコピーして .env を作成し、必要な値を入力します。

    cp .env.example .env
    
  4. データベースをセットアップします。

    pnpm db:push
    
  5. 開発サーバーを起動します。

    pnpm dev
    

これで、Web アプリケーション(http://localhost:3000)とモバイルアプリケーション(Expo Go など)の両方が利用可能になります。

アーキテクチャ

  • apps/web: Next.js アプリケーション(App Router)
  • apps/mobile: React Native(Expo)アプリケーション
  • packages/db: Prisma スキーマとデータベースロジック
  • packages/auth: 認証関連の共有コード
  • packages/ai: AI チャットの共有コード
  • packages/ui: 共通の UI コンポーネント
  • packages/validators: Zod を使用したバリデーションスキーマ

主な機能の詳細

認証

Auth.js を使用しており、メール/パスワード認証、GitHub や Google などの OAuth プロバイダをサポートしています。設定は packages/auth で管理し、セッション管理は JWT を使用します。

AI チャット

OpenAI 互換の API エンドポイントを使用するように設計されています。packages/ai にクライアントとサーバーサイドのロジックが含まれており、Vercel AI SDK を使用してストリーミング応答を実装しています。

テスト

  • ユニットテスト: Vitest(packages/* と apps/* に分散)
  • E2E テスト: Playwright(apps/web に統合)

テストの実行方法:

pnpm test

Docker サポート

プロダクションビルド用の Dockerfile が用意されています。

pnpm docker:build
pnpm docker:up

環境変数

.env ファイルに以下の変数を設定する必要があります(詳細は .env.example を参照):

  • DATABASE_URL: データベース接続文字列
  • AUTH_SECRET: 認証用のシークレットキー
  • AUTH_GITHUB_ID, AUTH_GITHUB_SECRET: GitHub OAuth 認証(使用する場合)
  • OPENAI_API_KEY: AI チャット機能を使用する場合の OpenAI API キー

カスタマイズ

  • スキーマの変更: packages/db/prisma/schema.prisma を編集し、pnpm db:push を実行します。
  • UI コンポーネント: packages/ui でコンポーネントを追加・変更します。
  • ルーティング: Web は apps/web/app、モバイルは apps/mobile/app で管理します。

トラブルシューティング

  • ポートの競合: Next.js サーバーがポート 3000 を使用できない場合は、apps/web の dev スクリプトで -p フラグを使用してポートを変更してください。
  • Prisma クライアントのエラー: pnpm db:generate を実行して Prisma クライアントを再生成してみてください。
  • 認証が機能しない: .env の設定が正しいか確認し、OAuth プロバイダのコールバック URL が適切に設定されているか確認してください。

関連スキル