Portfolio

Hyunseok Byun

ビョン・ヒョンソク · Frontend Engineer

Product

07
  1. 01Fluntiマルチテナント LMS
  2. 02Eduopsクラスマネジメントシステム
  3. 03LogisproWMS / 3PL 物流ソリューション
  4. 04Design Systemデザインシステム + Storybook ドキュメント
  5. 05LLM DocumentFE チーム向け LLM ドキュメント
  6. 06Design Studioデザイン + コード同時生成スタジオ
  7. 07Inner Admin社内向けフルアクセス管理画面

Toy

11
  1. 01BBlog個人ブログ
  2. 02kataruSaaS型ブログプラットフォーム
  3. 03Badge動的PNGバッジ生成サービス
  4. 04Webtoon BookmarkerNAVERウェブトゥーン ブックマーク Chrome 拡張
  5. 05BDMIN_VUEVue 3 + Spring Boot 管理画面学習 (B_CMS)
  6. 06scrollbar-tocスクロールバー sticky 目次 NPM ライブラリ
  7. 07snowbyスキー · スノーボード トラッキング RN アプリ
  8. 08trender韓 · 日 · 英 AI トレンド自動レポート
  9. 09CalendarCalDAV カレンダー + iOS 自動登録
  10. 10ESP32 Weather卓上天気ディスプレイ ファームウェア
  11. 11b-hub統合バックエンドハブ (8 domains · 40+ tables · 1,704+ tests)
HB
SaaS·稼働中

Flunti

マルチテナント LMS

企業·機関ごとにメインページ·テーマ·機能をカスタマイズでき、変化する事業方針に合わせて機能単位で素早く企画·実装·リリースするマルチテナント LMS です。

技術スタック

Next.js 16React 19React CompilerTypeScriptTailwind 4TanStack Query v5Zustandbetter-authVitest

制作の動機

目まぐるしく変わる事業方針と、頻繁に追加されるスペック·機能要求に対応するために作りました。

コメント

入社後から継続的に高度化を重ね、最終的に SaaS に至ったソリューションです。 Flunti サイトの中核として、現在も高度化を続けています。

主な特徴

  • 01マルチテナントルーティング: URL スコープ /[vendor]/[workspace] で企業·機関別に入口を分離、ミドルウェアで URL リライト / 権限分岐
  • 02企業情報に基づく動的なメインページ·テーマ (ブランドカラーは Material Color Utilities でランタイム生成)
  • 03Role ベースの機能 on/off: RoleProvider / RoleSweep / usePermission でページ·コンポーネント単位の制御
  • 04TanStack Query + Next.js fetch API 統合 (serverPararellFetcher + HydrationBoundary)、ベンダー prefix query key でマルチテナントキャッシュ分離
  • 05コンテンツタイプ: 動画講義、クイズ、プロジェクト、オフラインコース、セミナー、学習ロードマップ
  • 06管理者アドミン (コース / 講義 / タグ / モデレーション + 権限 + 受講統計) + リセラー向け B2B 出店フロー

担当した役割

  • 01プロジェクトのセットアップ、実装、アーキテクチャ定義
  • 02proxy.ts (middleware) で権限 · 企業情報 · 認証情報を fetch し page header へ提供
  • 03TanStack Query + Next.js fetch API 統合 fetcher 作成、各ページ fetcher で SSR / hydration を単純化
  • 04entities 層の API 自動生成スクリプト作成と全面適用
  • 05主要機能の実装: ロードマップ一覧 / 詳細、講義一覧 / 詳細、VOD、Quiz、Project、掲示板 (QNA / お知らせ / FAQ) など

備考

  • ·2026 年 6 月初頭にアップデート予定で、掲載している写真はアップデート後のもの
  • ·メインカテゴリセクションは運営者が直接管理可能
  • ·講義カードのタグ·価格·難易度·分量はコンテンツメタデータから自動表示
  • ·同一コードベースで B2C / B2B / 機関専用ワークスペースをすべて配信
Education·稼働中

Eduops

クラスマネジメントシステム

オン·オフライン講義に対応するため、出席 · ライブ · VOD · 掲示板などをサポートするクラスマネジメントシステムです。

制作の動機

オン·オフライン講義の需要に応じて出席モジュールを別途用意し、オンライン講義の場合はページ内でプラットフォームのアカウントを用いて Zoom 講義を受講できるようにしました。 アドミンはこれらすべてを一箇所で管理·確認できるよう構築されています。

コメント

2024 年末 〜 2025 年初頭に進めていたプロジェクトを教訓に立ち上げたプロジェクトです。 FE 側でもキャッシングをある程度導入し、API コール頻度や最適化により注意を払って実装しました。

主な特徴

  • 01動的に管理可能なメニュー
  • 02メイン LMS (Flunti) とは別に、クラスマネジメント専用の権限体系を実装
  • 03多様なクラスマネジメント機能 (ライブ / VOD / 出席 / 掲示板) をサポート
  • 04スケジュール状況板の提供および日程ベースのコンテンツ生成

担当した役割

  • 01プロジェクトのセットアップ、実装、アーキテクチャ定義
  • 02Zoom SDK を用いた Live 機能の実装
  • 03Flunti の一部機能を踏襲しつつ改良
  • 04動的な掲示板生成のための page wrapper 実装 (QNA / Notice / FAQ / Common の 4 種)
  • 05出席ダッシュボードの作成およびショートカットページの実装

備考

  • ·各機能は on / off 切り替え可能
  • ·DRM / Non-DRM 動画の双方向対応
Logistics·稼働中

Logispro

WMS / 3PL 物流ソリューション

従来の手動的·受動的な在庫管理を、データドリブンなワークフローへと転換し、在庫水準·商品位置·出荷予定などの情報をリアルタイムに収集·分析して一目で把握できるようにします。

技術スタック

VueTypeScriptSpring Boot

制作の動機

必要な在庫維持コストを削減し、注文充足までの時間を短縮することで、物流全体の効率を引き上げるために作成しました。

コメント

開発者として初めて主導的に担当したプロジェクトです。 FE アーキテクチャ全般を担当し BE は補助として参加、共通関数 · サンプルページ · 機能モジュールの作成およびリファクタリングを担いました。

主な特徴

  • 01依頼企業の要件に合わせたチューニングが可能
  • 02基本的な Warehouse Management フローを内蔵
  • 03三者物流 (3PLA) に対応
  • 04Vue 3 + TypeScript + Spring Boot ベース

担当した役割

  • 01レガシー nexacro を Vue 3 + TypeScript + Spring Boot へマイグレーション
  • 02API 呼び出し / レスポンスの最適化
  • 03フォーム / グリッド / 検索条件など主要機能のモジュール化およびサンプルコード作成
  • 04検索条件の動的生成ロジックをリファクタリング (再利用性 / 保守性の向上)
  • 05WS ベースの通知システム実装 (リアルタイム通知 + メッセージ)
  • 06PDF.js + Fabric.js による図面機能の実装
Design System·稼働中

Design System

デザインシステム + Storybook ドキュメント

非公開
Design System·稼働中

Design System

デザインシステム + Storybook ドキュメント

非公開

Flunti サイトのデザインシステムです。 社内で利用するすべてのプロジェクトはこのデザインシステムを使って実装されます。

制作の動機

プロジェクト数の増加に対してデザインの断片化が目立ち始めていました。 これを防ぐため、基準となるデザインシステムを構築しました。

コメント

Document ページ (SSG)、Storybook / Plugin、CLI などの利便機能まで揃えて仕上げたデザインシステムです。 1 年が経った今もよく使われており、時折コンポーネントが追加されることもあります。

主な特徴

  • 01非常に充実したコンポーネントラインナップ (40+ 種)
  • 02SSG で生成された Document ページ + Storybook によるコンポーネント Preview
  • 03Storybook にはデザイナーとの迅速な協業のため、Notion API を活用した comment plugin を実装
  • 04Document ページ内に Icon をすぐ検索·利用できる専用ページを提供
  • 05デザイントークン値も自動でパースされ、ページ上にそのまま表示

担当した役割

  • 01デザインシステムの core · Document · Storybook のための monorepo 構築 (pnpm workspace)
  • 02MD ファイルベースで SSG 化した静的 Document ページの作成
  • 03GitHub Actions の配備スクリプト作成および配備
  • 04他プロジェクトでの利用 / 更新のための CLI コマンド作成

備考

  • ·CLI サポートおよび shadcn-like install を実装
LLM·稼働中

LLM Document

FE チーム向け LLM ドキュメント

非公開
LLM·稼働中

LLM Document

FE チーム向け LLM ドキュメント

非公開

社内 FE チームが利用するフロントエンドドキュメントです。

制作の動機

継続的な人員減少のなかで AI 活用を最大化する必要があり、AI によるコードの一貫性確保と生産性向上のために用意しました。

コメント

チームメンバーが同じ LLM ドキュメントを参照して一貫したコードを生成できるよう、マークダウンドキュメントを継続的に高度化しています。 PR レビュー / widgets · features コンポーネント生成 / テストコード作成 / PR description 作成など、よく使うコマンドとスキルを合わせて整理し、チーム規約や既存コードを根拠とした規約、デザイントークンガイドまで文書化しています。

主な特徴

  • 01実装 · テスト · レビューなど業務全般で使われる skills / commands を提供
  • 02チーム規約 + 既存コードを根拠とした規約をドキュメント化
  • 03デザイントークンガイドも収録

担当した役割

  • 01プロジェクト Document ページの作成
  • 02skills / commands インストール用 CLI の作成
  • 03上記内容を配備するための GitHub Actions 作成

備考

  • ·チームメンバーと継続的に議論しながら高度化していくドキュメント
Design Tool·稼働中

Design Studio

デザイン + コード同時生成スタジオ

非公開
Design Tool·稼働中

Design Studio

デザイン + コード同時生成スタジオ

非公開

社内デザイナーと FE の協業速度を高め、業務プロセスを短縮するために作ったデザインスタジオです。

制作の動機

従来のフローは「デザイナーの Figma 作業 → FE パブリッシング → ロジック作業」の順序で、Figma → FE パブリッシング工程がボトルネックでした。 ワイヤーフレームベースのデザインシステムを用いたページ生成をデザイナーに提案し、design-studio がこれを自動化することで、ボトルネックがほぼ解消しました。 変更後のフロー: ワイヤーフレーム作成 → design-studio でページ生成 → FE はページを見てパブリッシング完了 → デザイナーは生成されたページを基に Figma に文書化。

コメント

このソリューションを構築した後、デザイナーから「非常に有用だ」というコメントを受けており、自身も日常業務でその有用性を十分に実感しています。

主な特徴

  • 01ワイヤーフレームを与えるだけで Flunti デザインシステム (Design System) に沿ってページを自動生成
  • 02自動 commit コマンド対応
  • 03FE アーキテクチャ (FSD) に合わせて features / widgets 単位のコンポーネント + Mock entities を自動生成し、迅速なパブリッシングを実現

担当した役割

  • 01ページ生成のためのプロンプト作成およびコマンド化
  • 02生成されたページのプレビュー用 Next.js ベース SSG プロジェクトの作成
  • 03ページ配備のための GitHub Actions スクリプト作成

備考

  • ·Claude Code をベースに実装
  • ·デザイナーも自然言語ベースで作業可能
  • ·導入直後にデザイナーからもらったコメントは添付画像を参照
Admin·稼働中

Inner Admin

社内向けフルアクセス管理画面

非公開
Admin·稼働中

Inner Admin

社内向けフルアクセス管理画面

非公開

社内メンバーが Flunti プロダクトを管理する際に使うアドミンです。

制作の動機

システム全体を一箇所で管理したいという社内要望がありました。 当時 BE 人員の退職で一人に作業が集中していた一方、FE は比較的余裕があったため、FE 側で Drizzle を導入し View 層を ORM で直接取得してデータを表示し、Create / Update / Delete のロジックのみ実装された API と組み合わせて、社内メンバーが Flunti システムを操作できるアドミンを実装しました。

コメント

実装過程で AI を積極的に活用し、短期間で作業を仕上げたプロジェクトです。

主な特徴

  • 01View と Action の分離 (ORM での View 参照 / API による更新)
  • 02社内アドミンのみがアクセス可能なよう設計されたページ構成

担当した役割

  • 01全体の実装
  • 02Drizzle の pull 機能を活用した DB schema 生成、および AI を用いた select repository の生成
  • 03各アドミンページの作成

備考

  • ·不定期に更新し、大きなアップデートがある際に合わせて反映
  • ·実装プロセス全般で AI を積極的に活用して作業速度を引き上げ
Blog·稼働中·2022-11: 進行中

BBlog

個人ブログ

記事と Log を表現できるサイトです。 メインページでは Notice と最新 Article を表示し、Article list ではタグフィルタと検索を、Log ではタイムラインで記録を表示します。

技術スタック

Next.js 16React 19TypeScriptTailwind 4Drizzle ORMMySQLbetter-auth

制作の動機

velog · tistory · medium といったプラットフォームもありますが、試したい技術を自由に適用できる場が必要でした。

コメント

4年間スタックを変え続けた痕跡がブランチにそのまま残っているブログです。 長期運用とレガシーマイグレーションを継続しており、現在は Vercel + 別バックエンドの構成でサイトを運営しています。

主な特徴

  • 01Article: マークダウンベースの長文 (MDX + remark/rehype レンダリング)
  • 02Notice: メインページに公知 + 最新 Article を自動表示
  • 03Article list: タグ別フィルタリング + キーワード検索 (タイトル / 本文)
  • 04Log ページ: 短文タイムライン
  • 05コメント / カテゴリ / 画像添付 (自前イメージサーバ経由)
  • 06管理画面ダッシュボード: 統計 / モデレーション / 記事ステータス管理
  • 07Vue → Svelte → Next.js へ 4 年間スタック移行
  • 08AWS Cognito → NextAuth → better-auth と認証を進化
  • 09AWS Lightsail 自前運用 → Vercel + 別 BE (b-hub) に分離 (セキュリティ責任の分離)
  • 10Tailwind v3 → v4 マイグレーションでデザインシステム全体を手動再構成

備考

  • ·Notice は別カテゴリとしてメイン上部に常時固定表示
  • ·Log は時系列タイムラインで表示
  • ·scrollbar-toc · kataru のエディタ / マークダウンモジュールがこのブログへ移植されています
Blog·休止中·2025-08: 進行中

kataru

SaaS型ブログプラットフォーム

velog · medium · tistory のようなブログサービスを構築しました。 Hono をメインに、admin は同じ認証体系で Bun + React で実装。 インフラは Cloudflare Workers + R2 + D1 と少量の Docker インスタンスで運用しています。

技術スタック

Next.js 15HonoBunCloudflareDrizzleMySQL

制作の動機

会社で SaaS を作る楽しさから、個人プロジェクトとしても挑戦してみたくなりました。 velog や medium のような SaaS 型ブログも自作できる自信を得て、Hono でどこまでフルスタックを攻められるか試したかったのです。

コメント

Hono + React SSR + Island でフルスタックを自前構築しました。 Astro から学んだ island を適用する絶好の機会で、実際に成功しました。

主な特徴

  • 01初期は Cloudflare Workers 単一構造 → FE/BE/Admin 3-repo へ分離進化 (管理画面は CSR で別)
  • 02Hono + React SSR + Island アーキテクチャ (Astro から着想)、3 プロセス並列 dev 環境
  • 03Cloudflare Free Tier でコスト 0 円運用、smart_placement で D1 近接リージョン自動配置
  • 04自前の image-convert-server (Lightsail) で Cloudflare R2 の sharp 非対応を回避
  • 05rehype-remark で双方向 md ↔ html エディタ (contentEditable + dnd-kit)
  • 06kataru.dev/<userSubpath> マルチテナント (domain.service + gateway.route で分岐)

備考

  • ·2026 Q4 に再始動予定: スタック再点検 + 速度・最適化を考慮して再構築
  • ·今回はインフラまで正確に実装し、custom domain にも対応できるようにしたい
  • ·エディタ / マークダウンモジュールを BBlog に移植 (BBlog のコード供給源)
Utils·稼働中·2026-02: 進行中

Badge

動的PNGバッジ生成サービス

URL クエリだけでテキスト・色・アイコン・Tailwind クラスを受け取り、PNG バッジを即時生成します。

技術スタック

HonoBunSatoriWASMVercel

制作の動機

shields.io の存在は知っていましたが、いつサービス終了するかわからない外部サービスに依存したくありませんでした。 過去に Next.js の @vercel/og が Satori を使っていたことを思い出し、「自分も Satori で作ってみよう」と動機づけられました。

コメント

最小のコードで最も頻繁に使われるツールです。 README 1 行のバッジが毎日表示される状況で、外部サービスに依存せず自身でコントロールしています。

主な特徴

  • 01Satori (JSX → SVG) + @resvg/resvg-wasm (SVG → PNG) パイプラインを Hono 上に自前で組立
  • 02Vercel 関数で wasm ファイルパスを直接掴んで初期化する環境分岐処理
  • 03URL クエリだけで全てカスタマイズ: Tailwind クラスを URL にそのまま渡せる (tw-to-css)
  • 04内蔵アイコンスラッグ + 任意の favicon を読込 (icojs で .ico 動的デコード)
  • 05韓国語フォント (Noto Sans KR) 内蔵で韓国語バッジ生成可

備考

  • ·単発開発 (1日): 必要な機能だけを作ると決めて実装 (YAGNI)
  • ·将来的に b-hub 統合時、ユーザー別バッジリスト・お気に入り・履歴を追加予定
Utils·稼働中·2023-03: 進行中

Webtoon Bookmarker

NAVERウェブトゥーン ブックマーク Chrome 拡張

NAVER ウェブトゥーンのトップに「ブックマーク」タブを動的注入し、事前登録した作品のみをフィルタします。 v1 リリース後 1 年運用し、v2 として再構築した事例です。

技術スタック

Chrome MV3BunReact 18shadcn/uiTailwind

制作の動機

NAVER ウェブトゥーンを愛読する中で、いつも読んでいる作品をその都度探して開くのが煩雑で、ブックマークページも別途遷移しなければならない不便さがありました。 これを解決するため、Chrome 拡張を作成してメインに新しいタブを差し込み、パースした作品の中からチェックしたものだけを表示する機能を作り、Chrome Extension Store に公開しました。

コメント

MV2 → MV3 マイグレーション、Chakra → shadcn 移行、Bun 自前ビルドパイプラインの 3 つを一度に整理しました。 韓国のウェブトゥーンドメインで実際に利用されている拡張機能です。

主な特徴

  • 01Chrome Manifest V3 + chrome.storage.local: Content Script (DOM 操作) + Popup (React) 構成
  • 02v1 → v2 再構築: Chakra UI → shadcn 移行、Vite/CRXJS → Bun 自前ビルドパイプライン
  • 03Proxy オブジェクトでライブラリなしのリアクティブ状態管理 (Vanilla パターン)
  • 04権限最小化: host_permissions 1 個 (comic.naver.com)、permissions 1 個 (storage)
  • 05Bun ビルド + adm-zip でストア提出用 zip 自動生成、Vite/Webpack 依存ゼロ
  • 06実ユーザー 30 名、1 年 5 ヶ月の無更新でも正常動作 (NAVER マークアップ安定)

備考

  • ·拡張の余地がない完成形: 凍結運用中
  • ·Manifest V2 deprecated に伴い V3 へマイグレーション
  • ·v1 Tistory 6 編シリーズ + v2 BBlog article/19 振り返りで 2 年運用ストーリーを記録
Backend·アーカイブ·2024-01: 進行中

BDMIN_VUE

Vue 3 + Spring Boot 管理画面学習 (B_CMS)

「いくら React が好きでも、実務で頻繁に使う Vue でも個人プロジェクトの記録を残そう」という思いで始めました。 最初の会社のスタックをサイドプロジェクトで整理した事例です。

技術スタック

VueVite 4Spring BootJava 17JWTMySQL

制作の動機

会社で AMS / WMS を作っていた経験があり、その根幹となるユーザー別言語 · タブ · カスタマイズ可能な ADMIN コア機能を、自身のサイドで実装することに集中しました。 自身は React 派ですが、最初の会社が Vue + Spring Boot の環境だったためです。

コメント

2024 年時点の模範的フルスタック構成 (Vite 4 + Vue 3.4 + Spring Boot 3.2 + JWT) を備えました。 React 本拠以外にも会社スタックを深く扱えることを示した事例です。

主な特徴

  • 01Vue 3.4 + Vite 4 + Pinia (persistedstate) + vue-i18n 9 (サーバサイド: DB の Locale エンティティから fetch)
  • 02Spring Boot 3.2.2 + Java 17 + Spring Data JPA + Spring Security + JJWT 0.11 + Redis Reactive
  • 03JWT フィルタの抽象化: AbstAuthProcessFilterImpl で共通部を分離、JwtAuthFilter で拡張 (もう 1 段抽象化)
  • 04タブシステム (keep-alive + Pinia): addCache/getCacheList/removeCache/refreshCurrentTab の 4 関数で同期
  • 05メニュー-ロール動的権限: Menubyrole · RoleByUser の独立エンティティ + 複合キーでロール別メニュー決定
  • 06DaisyUI テーマプリセット + 自作グリッド (CRUD · マスキング · 行スタイル): ag-grid を段階的に置換中

備考

  • ·認証 / 認可の出来が最も心残りで、今後再着手するなら設計から作り直したい
  • ·やり直すなら Nuxt に変更し最適化に注力。言語本拠 (React) 変更と本業多忙で休止
  • ·Tistory #255 (keep-alive feat. vue-router) + #257 (タブ + キャッシュ動的実装) シリーズで記録
Library·稼働中·2025-09: 進行中

scrollbar-toc

スクロールバー sticky 目次 NPM ライブラリ

ページ内の全 h1〜h6 を自動抽出し、スクロールバー隣に比例 sticky なボタンを描画するライブラリです。

技術スタック

TypeScripttsdownBun

制作の動機

ナムウィキのようにスクロールバーに目次が出るのがセンセーショナルでした。 従来の ToC ライブラリはサイドバーにテキストを描きますが、本ライブラリは空いている空間 (スクロールバーの隣) を活用します。

コメント

依存ゼロで React / Vue / Svelte / Vanilla どの環境でも軽量に import できます。 1 日で v1 を publish し、累計 459 ダウンロードを記録しています。

主な特徴

  • 01依存をなくしました
  • 02tsdown (Rolldown ベース) で ESM + CJS + .d.ts のデュアル出力
  • 03IntersectionObserver の代わりに rAF ポーリング + Map トラッキング: Next.js 16 cacheComponents 環境対応
  • 04WeakMap → Map に変更: 参照切れケースで明示的な cleanup を保証
  • 05History API monkey-patch + popstate で SPA ナビゲーション時に一括整理
  • 06GitHub Actions + NPM SLSA Provenance: 検証済みビルドのみ publish

備考

  • ·BBlog で dogfooding: 発見された問題を即座にライブラリへ反映
  • ·MIT ライセンス
React Native·開発中·2025-12: 進行中

snowby

スキー · スノーボード トラッキング RN アプリ

活動を自動検出し、距離・垂直降下・速度・リゾート別ランキングを記録するアプリです。

技術スタック

Expo SDK 54React NativeReact 19NativeWindSQLiteexpo-maps

制作の動機

もともと使っていたアプリ snoww がサービス終了しました。 この機会に勉強も兼ねて、一度自分で作ってみようという気持ちで始めました。

コメント

ML 不使用、ルールベースで綺麗に動作する活動検出を実装しました。 スロープ環境を前提としたオフラインファースト設計で構築しています。

主な特徴

  • 01Expo SDK 54 + RN 0.81 + expo-router 6 + New Architecture、NativeWind 4 + @rn-primitives (shadcn-RN)
  • 02自作のルールベース活動検出: 3 状態 (skiing/lifting/resting) 自動遷移、ML 不使用で平滑化 + 差分
  • 03ノイズフィルタ: speed 3 件移動平均、altitude 5 件差分、accuracy > 50m 破棄、3 秒の遷移遅延
  • 04バックグラウンド位置追跡: BestForNavigation 1 秒/1m、Foreground Service 通知 (Android)、ActivityType.Fitness
  • 05expo-sqlite 4 テーブル (sessions/locations/runs/photos): ローカル優先 + is_synced でサーバ同期
  • 06expo-maps (MapLibre から移行)、クラッシュ復旧、トラッキングシミュレータ、ko/ja/en i18n

備考

  • ·有効 run の基準: 最低 100m 距離、20m 垂直降下、10 秒持続
  • ·現在は未完成の状態: 2026 Q4 に仕上げ、実際にスキー場で検証したうえでストアに公開する予定
AI·稼働中·2026-05: 進行中

trender

韓 · 日 · 英 AI トレンド自動レポート

毎日 AI サイト 9 箇所を巡回する時間が惜しくて作った自動収集 · 要約システムです。 韓 · 日 · 英の各言語でデイリー / ウィークリーレポートを自動生成します。

技術スタック

TurborepoPython 3.12Next.js 16OllamaDrizzleDocker

制作の動機

毎日 AI 関連の話題を探して読むのに費やす時間が惜しいと感じていました。 よく見るサイトを一括で巡回し、デイリー / ウィークリーレポートを自動作成することにしました。

コメント

LLM 1 プロバイダに縛られない Fallback Chain を構成しました。 韓 · 日 · 英の多言語を同時運用して言説の違いを比較でき、自身の毎日 9 サイト巡回時間をゼロにしました。

主な特徴

  • 01Turborepo + Bun workspaces: apps/parser (Python 3.12 + uv) + apps/web (Next.js 16) + packages/db (Drizzle MySQL)
  • 02LLM Fallback Chain 5 種: Ollama Cloud / Ollama Local / omlx (Apple MLX) / OpenRouter / OpenAI
  • 03韓 · 日 · 英 同一期間 · 同一構造のレポート: 言語別の視点の違いを比較可
  • 04cron 自動化: 毎時 RSS、1 時間に 2 回キーワード抽出、毎日 00:30 日次、毎週月曜週次、14 日 / 8 週 backfill
  • 05本文補強 (trafilatura) + cloakbrowser でアンチボット回避、原語のままキーワード抽出 (翻訳禁止プロンプト)
  • 06Docker (Playwright Python + Noto CJK + cron + tini)、運用コスト事実上 0 円 (Ollama free + Vercel + ローカル)

備考

  • ·サンプル: 韓国語 reports/36、日本語 reports/37 を同一期間 · 同一構造で比較可
  • ·self-improving source evolution は試みたがシンプル化 (保存 + 要約のみで十分)
AI·稼働中·2026-01: 進行中

Calendar

CalDAV カレンダー + iOS 自動登録

自身のメインカレンダーとして毎日使用しており、iPhone · MBP · Android すべてに接続しています。 CalDAV 双方向同期と、ブラウザで iOS .mobileconfig を自動生成してワンクリックで登録できます。

技術スタック

Next.js 16React 19React CompilerCalDAVshadcn/uiVercel

制作の動機

Android 端末を導入したのですが、iCloud カレンダーが Android に馴染みませんでした。 iPhone · Mac · Android · Windows どこでも同じカレンダーを使いたく、CalDAV 標準をサポートすればあらゆるアプリでそのまま利用できます。

コメント

自身の生活向上のために作り、統合しました: 全デバイスで同じカレンダー、一度の .mobileconfig ダウンロードで iPhone 自動登録。 現在すべての予定をここで管理しています。

主な特徴

  • 01CalDAV 双方向同期: Apple Calendar / Thunderbird / GNOME Calendar など標準クライアント互換
  • 02iOS .mobileconfig をブラウザで直接生成: plist XML を download、ワンクリックで iOS/macOS に CalDAV 自動登録
  • 03Next.js 16 + React 19 + React Compiler 有効、shadcn + Radix + Tailwind 4
  • 04@dnd-kit ドラッグ/リサイズ: EventLayout/ResizePreview/MovePreview で複数週 span 衝突を回避
  • 05proxy.ts で Vercel WAF を回避: CalDAV の PROPFIND / REPORT など非標準メソッドを caldav.hyns.dev 経由
  • 06Server Action 認証 forward + CSRF (Origin/Host)、Nanum Gothic + M+ 1 Code の CJK フォントを直接ホスト

備考

  • ·CalDAV サーバロジックは b-hub に実装: 標準クライアントが b-hub を直接呼出
  • ·ko / en / jp 多言語、macOS Calendar の UI に着想
AI · Hardware·稼働中·2026-05: 進行中

ESP32 Weather

卓上天気ディスプレイ ファームウェア

毎朝 Siri を呼ぶルーティンを簡素化し、天気を視覚的にはっきり確認するために ESP32 で作った ambient ダッシュボードです。 浴室に設置しており、在宅中は常時稼働しています。

技術スタック

ESP32C++PlatformIOArduinoKMA API

制作の動機

毎朝シャワー後に Siri を呼ぶルーティンを簡素化し、天気を視覚的にはっきり確認するために ESP32 でダッシュボードを作成しました。 ちょうど手元に ESP32 があったため、一度自分で組んでみることにしました。

コメント

組み込みを実際に構築・体験・利用しています。 ファームウェア (C++) → b-hub (TypeScript) → MySQL → KMA のフルスタックの流れを完成させ、Web では当然視していたメモリ・画面バッファ・フォント描画を機械側から再考する契機になりました。

主な特徴

  • 01ESP32-D0WD-V3 + ILI9341 2.8" TFT (320×210) + XPT2046 抵抗膜タッチ: "Cheap Yellow Display"
  • 02State machine: BOOT → WIFI_SETUP → LOCATION_SEARCH → WEATHER ⇄ SETTINGS / DISPLAY_SETTINGS
  • 032 ボル式ハングルキーボードを自前実装 (位置検索用): ライブラリなしで作成、再利用可能に分離
  • 04u8g2 unifont ハングル + drawJamoGlyph() で互換字母をピクセル描画
  • 05自己復旧: 60 秒 heap 監視、KST 00 / 12 時に自発 reboot、fetch all-or-nothing (stale 維持)
  • 06b-hub /weather/* プロキシ: KMA API キー非露出、格子座標変換を委任、weatherApiKey でクォータ管理

備考

  • ·ILI9341 標準ドライバの色反転 / 軸入替バグ: ILI9341_2_DRIVER + setRotation(1) + invertDisplay(1) で回避 (3〜4 時間の試行錯誤)
  • ·WiFi の遅延接続時のバックグラウンド自動再接続を追加予定
Backend·稼働中·2025: 進行中

b-hub

統合バックエンドハブ (8 domains · 40+ tables · 1,704+ tests)

散乱していたバックエンドを 1 つにまとめる決意をしました。 自身の名 Byun の「b」を取って b-hub と名付け、全 Toys の単一統合バックエンドの役割を果たしています。

技術スタック

BunHonoVercelDrizzleMySQLCloudflare R2better-auth

制作の動機

保守が散らかっていました。各 Toys ごとにバックエンドを別々に作るのは N 倍の負担でした。 認証 / デプロイ / DB / 画像処理 / キャッシュを 1 箇所に集約することを決め、BBlog 移行時点 (2025) に同時計画を開始しました。

コメント

Toys 別の散乱を 1 箇所に統合しました。 mail ドメインと自前の Web メールクライアントで Outlook を代替し、毎回インストールしていたものを Web で処理しています。

主な特徴

  • 01Bun on Vercel Functions + Hono 4 + @hono/zod-openapi (OpenAPI 3 + Swagger UI 自動)
  • 028 ドメイン (blog · calendar · weather · mail · drive · spotify · resume · badge)、40+ テーブルにユーザー FK を一貫適用
  • 033-tier ハイブリッドストレージ: R2 hot / Mac Studio middle (予定) / Google Drive cold、lifecycle cron で自動 promote / evict
  • 04RFC 4791 CalDAV サーバを自前実装 (ctag · sync-token · ICS export · subscription token)
  • 05Vercel サイドカー構成: caldav-proxy (DDoS bypass 用 PROPFIND/REPORT) + upload-server (4.5MB ペイロード制限回避)
  • 06API Token 多層認証 (better-auth セッション / apiToken テーブル / ドメイン別 weatherApiKey、IoT 用クォータ分離)

備考

  • ·BBlog · Calendar · ESP32 · 自前メールクライアントが b-hub に依存、Apple Calendar は標準 CalDAV で直接接続
  • ·月 約 30$ の運用コスト (Vercel 単独 + 軽量 Docker サイドカー on Lightsail)