tv lineup app

マイラインナップアプリ

Ruby on Rails バックエンドと React/Redux フロントエンド。ユーザーはお気に入りの番組を保存し、エピソードをラインナップに追加できます。カレンダー形式でラインナップを表示して、テレビ番組がいつ、どこで放送されるかを確認できます。ユーザーは、トレンド番組や最も視聴されている番組、その週にプレミア公開される番組も確認できます。このプロジェクトは、Flatiron School のソフトウェア エンジニアリング イマーシブ プログラムの最後のアプリとして、私、Matthew Thorry によって独立して作成されました。

バックエンド

Ruby on Rails を使用してアプリのバックエンドを作成しました。 TV データを取得するために、trakt.tv API と TVmaze API という 2 つの異なる API を使用し、フェッチ リクエストはバックエンドから行われます。モデルは、 User 、 Show 、 Episode 、 UserShow 、 UserEpisodeです。 User多くの番組を持ち、番組を通じて多くのエピソードを持つことができます。また、(評価などのため) 多くのuser_showsとuser_episodesを持つこともできます。 CRUD アクションはすべてのモデルで利用できるため、すべてのモデルにコントローラーが必要でした。

フロントエンド

フロントエンドは React と Redux を使用して作成されました。これには、アプリの 4 つのメイン コンテナを表す 4 つのリデューサ (番組、エピソード、検索、エクストラ) を含む 24 を超えるコンポーネントがあります。

番組

API およびバックエンドから番組情報を取得して表示する役割を果たします。 Show Redux 状態には、 myShows (ユーザーの保存された番組)、 onTonight (API からの今日の番組)、 premieres (API から今週プレミア公開される番組)、およびisFetching (ブール値) が含まれます。ショーの主なコンテナは、 ShowContainer 、 PremieresContainer 、およびShowCalendarです。

ShowContainerの子はShowListとShowItem (孫) です。他の子は、兄弟であるSuggestedListを持つShowPageです。

PremieresContainerとShowCalendarは子はありませんが、番組やエピソードの取得、ユーザーの保存済みアイテムの追加/削除などの複数のタスクを担当するため、コンテナーです。

エピソード

API およびバックエンドからエピソード情報を取得して表示する役割を果たします。 Episode Redux 状態には、 myLineup (ユーザーが保存したエピソード)、 showEpisodes (TVmaze API から取得された特定の番組のエピソード)、およびisFetching (ブール値) が含まれます。 EpisodeContainerコンテナーが 1 つあります。 EpisodeContainerの子はEpisodeListとEpisodeItem (孫) です。

ユーザーはエピソードを表示し、 EpisodeItemから特定のエピソードをラインナップに追加できます。

検索

ユーザー入力に基づいて TVmaze API から番組情報を取得して表示する役割を果たします。 Search Redux の状態には、 results (検索の結果) とisFetching (ブール値) が含まれます。コンテナーはSearchContainerで、子 ( SearchResults ) と孫 ( SearchItem ) があります。

ユーザーは、 SearchItemのボタンを使用してSearchResultsから番組を保存できます。

エクストラ

trakt.tv API からの追加情報の取得と表示を担当します。 Extras Redux の状態には、 trending (前日に人気が変化したエピソード)、 watching (最も多くの視聴者がいる番組)、 ratings (評価を含むユーザーの user_shows の配列)、およびisFetching (ブール値) が含まれます。エクストラには、 DashboardContainer 、 TrendingContainer 、 MostWatchedContainerの 3 つのコンテナが含まれています。

DashboardContainerログイン後のランディング ページを管理します。これにはDashboardLineupListとDashboardOnTonightList 2 つの子があり、それぞれにDashboardLineupItemとDashboardOnTonightItem子があります。 DashboardLineupListその日に放送されるユーザーのラインナップ内のエピソードが表示されます。 DashboardOnTonightListユーザーのラインナップには含まれていないが、今日放送され、評価の高いエピソードが表示されます。

TrendingContainer 、trakt.tv API を呼び出して最新のトレンド番組を取得し、クエリの各結果を表示するTrendingItemの親です。

MostWatchedContainer trakt.tv API を呼び出して最も視聴されている番組を取得し、クエリの各結果を表示するMostWatchedItemの親です。ユーザーは、指定した時間 (週、月、年、これまで) に基づいて結果をフィルタリングすることもできます。

謝辞

Flatiron School のクラスメートはいつも最高で、とても親切です。ありがとう！また、いつも私の仕事を素晴らしい目で見てくれてくれた講師のヨハン・カー、リンゼイ・ウェルズ、アンドリュー・コーンにも感謝します。