Skip to content

b13o/pokemon-omikuji

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f469c3d · Jan 26, 2025

History

8 Commits
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025
Jan 26, 2025

Repository files navigation

app-banner

ポケモンおみくじアプリ

概要

このプロジェクトでは、ポケモンおみくじアプリを構築します。

ボタンをクリックすると、ランダムなポケモンと運勢が表示され、そのポケモンの詳細から、ヒントを得ることができます。

学習目標

Next.js App Router の、基本的な機能と使い方について学習します。

合わせて、サーバーコンポーネントとクライアントコンポーネントの使い分け、さまざまなデータフェッチの方法について確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

  • Next.js 15/ App Router
  • TypeScript による型チェック
  • Tailwind CSS によるスタイリング
  • shadcn/ui によるコンポーネントの導入
  • loading.tsx によるローディング制御
  • PokeAPI を用いたポケモンデータの取得

🎯 お題

  • 「ユーザーストーリー」を全て満たす、アプリを構築してください。
  • 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
  • なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

  1. おみくじを引く
    • トップページでボタンをクリックすると、ランダムなポケモンと運勢が表示される
  2. 結果表示
    • ポケモンの画像、名前(日本語)、運勢をカードで表示
  3. 詳細情報
    • ポケモン占いの詳細情報(タイプ、能力値など)を確認できる

追加情報

今回推奨する API は、「PokeAPI」です。

  • この API は、ユーザー登録なしで、無料で使用できます
  • 以下のエンドポイントから、データを取得できます
    • /api/v2/pokemon/{id} - ポケモンの基本情報
    • /api/v2/pokemon-species/{id} - 日本語名と説明文

ユーザーストーリー

  • ユーザーがサイトにアクセスすると、おみくじを引く「Drow Fortune」ボタンが表示されている
  • ボタンをクリックすると、ローディング表示の後に結果が表示される
  • 結果には、運勢(大吉、吉、中吉、末吉、凶)とポケモンの情報が含まれる
  • ポケモンの情報は日本語で表示される
  • ポケモンの画像が表示される
  • 「詳細を見る」をクリックすると、そのポケモンの詳細情報が表示される
  • 詳細ページには、ポケモン占いの詳細が、日本語で表示されている
  • ポケモンの画像が表示されている
  • データ取得中は適切なローディング表示がされる
  • アプリケーションがデプロイされており、誰でもアクセス可能である。

Releases

No releases published

Packages

No packages published