アニメ検索アプリをつくりました

概要

シーズンやタイトルでアニメを検索できる Web アプリを作成しました。
検索結果は Annict というサイトの人気順で表示されます。
アニメを見る方はぜひ使ってみてください！

• サイトの URL
• ソースコード

作成した目的

• 次のシーズンでは、何のアニメを放送するか知りたかったから
• 特定のアニメが次いつ放送予定か知りたかったから
• GraphQL を使用したかったから

使用技術

フロントエンド

• Next.js 14.2.5
• TypeScript
• ChakraUI
• apollo/client
• GraphQL

外部 API

• Annict API
  • アニメ情報の取得で使用

実行環境

• Vercel

画面イメージ

トップページ

• 現在放送中のアニメの一覧を Annict というサイトの人気順で表示

シーズンでアニメを検索

1. シーズンを選択
2. 検索ボタンをクリック
3. 検索結果を表示

タイトルでアニメを検索

1. 検索バーにタイトルを入力して Enter
2. 検索結果を表示

システム構成図

ざっくり説明すると

• フレームワークは Next.js
• UI ライブラリは Chakra UI
• ホスティングは Vercel
• アニメデータは Annict API から