生成AIの Claude Code を利用して、10分ほどで簡単に作ってみました。
TMDBという映画検索サイトがあり、そこで使われているデータベースをAPIとして提供してくれており、それを利用することで自前のデータベースを必要とせずに作ることができました。
無料で使えるAPIにも役立つものが多いので、皆さんも色々探してみてください❗
動画はこちら
https://www.youtube.com/watch?v=pFUgDq4Xl04
ソースコード
https://github.com/ryukyuhub/movie-search-app
プロジェクト構造
src/
├── components/
│ ├── SearchBar.tsx # 検索バーコンポーネント
│ ├── MovieCard.tsx # 映画カードコンポーネント
│ └── MovieList.tsx # 映画一覧コンポーネント
├── pages/
│ ├── Home.tsx # ホームページ
│ └── MovieDetail.tsx # 映画詳細ページ
├── services/
│ └── api.ts # API通信ロジック
├── types/
│ └── movie.ts # TypeScript型定義
└── App.tsx # メインアプリケーション