SkillStack

エンジニアが自身のスキルセットやポートフォリオを登録・公開し、他のエンジニアと繋がるためのプロフィール管理プラットフォームです。

機能

• スキル管理 — プログラミング言語・フレームワーク・ツールを習熟度（1〜100）付きで登録
• ポートフォリオ管理 — 作品をサムネイル・使用技術タグ・外部リンク付きで登録
• 公開プロフィール — /u/[handle] の固有URLでプロフィールを公開
• エンジニア検索 — キーワード・スキルタグでエンジニアを検索
• お気に入り — 気になるエンジニアをお気に入り登録
• PDFエクスポート — スキルシートをA4（1カラム・2カラム）でダウンロード
• 認証 — メール/パスワード（ローカル完結）

技術スタック

カテゴリ	技術
フレームワーク	Next.js 16 (App Router)
言語	TypeScript
スタイリング	Tailwind CSS v3 + shadcn/ui
データベース	SQLite（ローカルファイル）+ Prisma
認証	Cookie ベースの自前セッション（bcrypt）
ストレージ	ローカルファイルシステム（public/uploads/）
PDFエクスポート	@react-pdf/renderer

外部クラウドサービスには依存していません。 すべてローカルで完結します。

セットアップ

1. リポジトリをクローン & 依存インストール

git clone <repository-url>
cd skillstack
npm install

2. 環境変数を設定

.env.example をコピーして .env.local を作成します。デフォルト値のまま開発できます。

DATABASE_URL="file:./dev.db"
SESSION_SECRET="please-change-this-to-a-random-32-chars-or-more"
NEXT_PUBLIC_APP_URL=http://localhost:3000

Prisma CLI 用に .env にも DATABASE_URL が必要です（既存）。

3. データベースを初期化 & テストユーザーを作成

npx prisma db push   # SQLite スキーマを作成
npm run db:seed      # テストユーザー投入

テスト用アカウント: test@example.com / password123

4. 開発サーバーを起動

npm run dev

http://localhost:3000 をブラウザで開きます。ログイン画面のフォームはテストアカウントで自動入力済みです。

便利なコマンド

npm run db:generate   # Prisma Client を再生成
npm run db:push       # スキーマを SQLite に反映（マイグレーションなし）
npm run db:migrate    # マイグレーションファイル付きで反映
npm run db:seed       # テストユーザーを投入
npm run db:reset      # DB を初期化 → seed を再実行

ディレクトリ構成

skillstack/
├── app/
│   ├── (public)/          # 未ログインでもアクセス可能
│   │   ├── page.tsx       # ランディングページ
│   │   ├── login/
│   │   ├── register/
│   │   ├── search/        # エンジニア検索
│   │   └── u/[handle]/    # 公開プロフィール
│   ├── (app)/             # ログイン必須
│   │   ├── dashboard/
│   │   ├── skills/
│   │   ├── portfolio/
│   │   ├── profile/
│   │   ├── export/
│   │   ├── settings/
│   │   └── favorites/
│   ├── actions/           # 共有 Server Action
│   ├── auth/              # ログイン/ログアウト/登録の Server Action
│   └── api/               # APIルート（アップロード・アカウント削除）
├── components/
│   ├── ui/                # shadcn/ui コンポーネント
│   └── layout/            # レイアウトコンポーネント
├── lib/
│   ├── db.ts              # Prisma クライアント
│   ├── session.ts         # Cookie セッション / パスワードハッシュ
│   ├── upload.ts          # ローカルファイルアップロード
│   └── portfolio.ts       # tags の JSON 変換
├── hooks/                 # カスタムフック
├── prisma/
│   ├── schema.prisma      # Prisma スキーマ
│   ├── seed.ts            # テストユーザー投入スクリプト
│   └── dev.db             # SQLite ファイル（gitignore）
└── public/
    └── uploads/           # アップロード画像の保存先（gitignore）

URL一覧

URL	説明	認証
/	ランディングページ	不要
/login	ログイン	不要
/register	新規登録	不要
/search	エンジニア検索	不要
/u/[handle]	公開プロフィール	不要
/dashboard	ダッシュボード	必要
/skills	スキル管理	必要
/portfolio	ポートフォリオ管理	必要
/profile	マイプロフィール編集	必要
/export	PDFエクスポート	必要
/settings	設定	必要
/favorites	お気に入り一覧	必要

関連資料

実装のもとになった要件定義書・デザインモックも同リポジトリに含まれています。

ファイル	内容
requirements.md	要件定義書（初期の想定技術スタック・機能仕様）
skillstack.pen	Penpot/Pencil で作成したデザインモック

要件定義時は Supabase + Vercel 前提でしたが、最終的にはローカル完結構成（SQLite + 自前セッション + ローカルストレージ）で実装しています。