
OUTPUT QUEST 叡智の継承者
- Next.js
- TypeScript
- Tailwind CSS
- shadcn/ui
- Motion
- Howler.js
- Clerk
- Prisma
- Supabase
- zod
- Vercel AI SDK
- react-markdown
- Vercel
- Design
- Coding
概要
私が開発したWebアプリです。ゲーミフィケーションを取り入れた "RPG風学習支援Webアプリ" で、Zennで記事を投稿することでアプリ内の「勇者」が成長し、アイテムの入手、称号の獲得、仲間との出会いがあなたを待っています。アウトプットを通じて学習意欲や知的好奇心を高め、楽しみながら自己成長を促すことを目的に開発しました。
このWebアプリはNext.js + CSS Modules + Tailwind CSS + TypeScriptで開発し、デプロイはVercelで行いました。
トップページ:ゲームのオープニングを彷彿とさせる演出により、冒険のはじまりを視覚的に表現しました。
ダッシュボード:勇者の冒険の拠点。勇者の成長度合いを示すレベル、Zennでの投稿数、勇者の仲間に加わったキャラや入手したアイテムを確認でき、Xへのシェアが可能です。
学びの書:Zennの記事を「これまでの学び」として記録する場所。Zennで投稿した記事が一覧表示され、学びの記録として振り返ることができます。記事はアプリ内ではカード型UIで表示され、クリックすることでZennの記事ページにアクセスできます。
記事探索:AIが勇者の仲間の「賢者」として、次に書く記事に最適なテーマを提案。賢者(AI)は、あなたのZenn記事を探索し、過去の投稿から傾向を探ることで、あなたの成長に最適な「学びのタネ」を見つけ出します。
つよさ:勇者の成長度合いを示すレベル、レベルアップ報酬で獲得した「称号」の確認、勇者の「装備アイテム」の確認、これまでの学びの軌跡が残る「冒険ログ」の確認ができます。
称号リスト:勇者がレベルアップ報酬で獲得した称号を一覧で確認できます。
そうび一覧:勇者の装備アイテムを一覧で確認できます。
冒険ログ:学びの軌跡が残る「冒険ログ」。これまでの学びの軌跡を時系列で確認できます。
なかま:勇者の仲間に加わったキャラクターを確認できます。1人1人のキャラクターの詳細情報も確認できます。
アイテム:勇者がレベルアップ報酬で入手したアイテムを確認できます。1つ1つのアイテムの詳細情報も確認できます。
連携:Clerk認証によるログイン、Zennのアカウント連携を管理できます。ログインとZenn連携をすることで、Zennの投稿データがアプリ内のUIに反映されます。アプリはログイン無しでも利用できます。
Zenn連携について:OUTPUT QUESTとZennアカウントを連携させることで得られるメリットや、ゲストユーザーとしてアプリを手軽に体験する方法について解説します。あなたに合った方法で、OUTPUT QUESTの世界を体験できます。
OUTPUT QUESTとは ?:OUTPUT QUESTの世界観と使い方、アウトプットを通じて成長する「RPG風学習支援Webアプリ」の始め方を解説します。アプリの概要、コンセプト、主要機能について紹介します。
利用規約:OUTPUT QUESTの利用規約を確認できます。
プライバシーポリシー:OUTPUT QUESTのプライバシーポリシーを確認できます。
このWebアプリは転職活動用のポートフォリオとして開発したものであり、意図した環境でご確認いただくため、noindexとnofollowを設定し、検索エンジンのインデックスから除外しています。