技術情報共有スペース Link Mono

概要

2023年度に開催された所属団体のHorizon Hackathonに参加した際に作成した技術情報共有プラットフォーム「Link Mono」です。ZennやQiitaにインスパイアされた、Horizonコミュニティ内での学習と繋がりを重視したプラットフォームです。

メンバー

Riku-Mono
K5desu

開発の経緯

部内ハッカソンのテーマ「メンバーのWell Beingに貢献するプロダクト」について議論した際、「学習コンテンツが探しにくい」「学習意欲を維持しづらい」といった現状の課題が浮かび上がりました。この課題を解決し、メンバー同士が知識を共有し合い、学び合える環境を作ることがWell Beingの向上につながると考え、本プロダクト「Link Mono」を企画・開発しました。

プロジェクトの特徴

GitHubログイン・組織認証: セキュアなログイン機能と組織内での記事作成・プロジェクト紹介カード機能へのアクセス
Markdownによる記事作成: 多様な技術トピックについてMarkdownの力とシンプルさを活用した記事の作成・共有
コミュニティ連携: 活気あるHorizonコミュニティ内での学習者同士の繋がり
知識共有: 洞察と学習体験の楽しい交換のための環境構築
プロジェクト紹介カード: スタイリッシュなカード形式での成果物共有
パブリック閲覧: ログインなしでも外部ユーザーが記事やプロジェクトを閲覧・探索可能

主な技術スタック

フロントエンド: Next.js, TypeScript, Tailwind CSS
バックエンド: Next.js API Routes
データベース: PostgreSQL (Vercel Postgres)
認証: NextAuth.js, GitHub OAuth
ファイルストレージ: Vercel Blob
ORM: Prisma
デプロイ: Vercel

主な機能

認証システム
- GitHub OAuthによるログイン
- 組織内ユーザーのみアクセス可能な機能制限
- 管理者権限の設定
記事管理
- Markdownによる記事作成・編集
- 記事の一覧表示・詳細表示
- タグ・カテゴリによる記事の絞り込み
プロジェクト紹介
- プロジェクト紹介カードの作成・表示
- カードクリック時のURL遷移機能
ユーザー管理
- 組織内ユーザーの管理
- 管理者権限の付与

アーキテクチャ

技術構成

フロントエンド: Next.js App Routerを使用したモダンなSPA
認証: NextAuth.jsによるGitHub OAuth認証
データベース: PostgreSQL + Prisma ORM
ファイル管理: Vercel Blobによる画像・ファイルストレージ
デプロイ: Vercelによる自動デプロイ

データベース設計

// ユーザーテーブル
model User {
  id              String    @id @default(cuid())
  name            String?
  displayName     String?
  email           String?   @unique
  image           String?
  role            String
  articles        Article[]
  works           Work[]
  comments        Comment[] // コメント機能用（省略）
}
 
// 記事テーブル
model Article {
  id           String    @id @default(cuid())
  title        String?
  body         String?
  author       User      @relation(fields: [authorId], references: [id])
  authorId     String
  tags         Tag[]
  comments     Comment[] // コメント機能用（省略）
  visibility   Boolean?  @default(false)
  created_at   DateTime  @default(now())
  updated_at   DateTime  @updatedAt
}
 
// 成果物テーブル
model Work {
  id           String   @id @default(cuid())
  title        String?
  description  String?
  url          String?
  img          String?
  author       User     @relation(fields: [authorId], references: [id])
  authorId     String
  visibility   Boolean? @default(false)
  created_at   DateTime @default(now())
  updated_at   DateTime @updatedAt
}
 
// タグテーブル
model Tag {
  id         Int       @id @default(autoincrement())
  name       String    @unique
  articles   Article[]
}
 
// --- 以下は省略 ---
// コメントテーブル（Comment）
// ユーザー・タグ関連テーブル（TagsOnUsers, TagsOnUsers_StatusType）
// 認証・セッション管理用テーブル（Account, Session, VerificationToken など NextAuth.js関連）

主な機能詳細

認証システム

GitHub OAuthによるセキュアなログイン
組織内ユーザーのみアクセス可能な機能制限
管理者権限によるユーザー管理

記事管理

Markdownエディタによる記事作成
リアルタイムプレビュー機能
記事の公開・非公開切り替え（visibility機能）
タグ・カテゴリによる分類
コメント機能

成果物紹介

カード形式での成果物表示
画像アップロード機能
外部URLへのリンク機能
公開・非公開の制御

開発の学び

技術的な学び

NextAuth.js: OAuth認証の実装方法
Prisma: 型安全なデータベース操作
Vercel Blob: ファイルストレージの活用
Next.js App Router: モダンなルーティングシステム

プロジェクト管理の学び

要件定義: コミュニティのニーズを理解することの重要性
UI/UX: ユーザビリティを重視した設計
セキュリティ: 認証・認可の適切な実装

リンク

GitHubリポジトリ:

GitHub - Riku-mono/2023-Hack-S-no1: Horizonでの部内ハッカソンプロダクト

Horizonでの部内ハッカソンプロダクト. Contribute to Riku-mono/2023-Hack-S-no1 development by creating an account on GitHub.

github.com