OUTPUT QUEST 叡智の継承者

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を設定し、検索エンジンのインデックスから除外しています。