OUTPUT QUEST ~叡智の継承者~
使用技術：
- Next.js
- TypeScript
- Tailwind CSS
- shadcn/ui
- Motion
- Howler.js
担当：
- Design
- Coding
概要
私が開発したWebアプリです。RPG風のゲーミフィケーションを取り入れた学習支援アプリで、Zennで記事を投稿することでアプリ内の「勇者」が成長していきます。アウトプットを通じて学習意欲を高め、楽しみながら自己成長を促すことを目的に開発しました。
このサイトはNext.js + CSS Modules + Tailwind CSS + TypeScriptで制作し、デプロイはVercelで行いました。
トップページ：ゲームのオープニングを彷彿とさせる演出で、視覚的な出迎えを実現しました。
ダッシュボードページ：勇者の成長度合いを示すレベル、Zennでの投稿数、レベルアップ報酬で獲得したアイテムや勇者のなかまを確認できます。
投稿リストページ：Zennで投稿した記事を取得して、アプリ内で「投稿リスト」として記事を閲覧できます。
つよさページ：レベルアップ報酬で獲得した「称号」の確認、勇者の装備アイテムの確認、学びの記録を時系列で確認できる「冒険ログ」の確認ができます。
なかまページ：勇者のなかまになったキャラクターを閲覧できます。
アイテムページ：レベルアップ報酬で獲得したアイテムを閲覧できます。
アバウトページ：アプリの概要、コンセプト、主要機能について紹介しています。
本サイトは転職活動用のポートフォリオとして制作しており、意図した環境で作品を見ていただくため、noindexとnofollowを設定し、検索エンジンのインデックスから除外しています。