Flunti

制作の動機

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

コメント

入社後から継続的に高度化を重ね、最終的に 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) など