Ruby on Rails-Backend mit React/Redux-Frontend. Benutzer können ihre Lieblingssendungen speichern und Episoden zu ihrem Programm hinzufügen. Sie können ihr Programm im Kalenderformat anzeigen, um zu sehen, wann und wo ihre Fernsehsendungen ausgestrahlt werden. Benutzer können auch angesagte und meistgesehene Sendungen sowie Sendungen sehen, die in dieser Woche Premiere haben. Dieses Projekt wurde unabhängig von mir, Matthew Thorry, als meine letzte App an der Flatiron School für ihr Software Engineering Immersive Program erstellt.
Ich habe das Backend meiner App mit Ruby on Rails erstellt. Ich habe zwei verschiedene APIs verwendet, um die TV-Daten abzurufen: die trakt.tv-API und die TVmaze-API, und Abrufanfragen erfolgen über das Backend. Die Modelle sind User , Show , Episode , UserShow , UserEpisode . Ein User kann viele Shows und viele Episoden über Shows haben. Sie können auch viele user_shows und user_episodes haben (für Bewertungen usw.). Alle Modelle benötigten einen Controller, da CRUD-Aktionen für alle Modelle verfügbar sind.
Das Frontend wurde mit React und Redux erstellt. Sie besteht aus über zwei Dutzend Komponenten mit vier Reduzierstücken (Sendungen, Episoden, Suche, Extras), die die vier Hauptbehälter der App darstellen.
Verantwortlich für das Abrufen und Anzeigen von Showinformationen von den APIs und dem Backend. Der Show Redux-Status umfasst myShows (gespeicherte Shows des Benutzers), onTonight (heutige Shows über die API), premieres (Shows, die diese Woche über die API Premiere haben) und isFetching (boolean). Die Hauptcontainer für Shows sind ShowContainer , PremieresContainer und ShowCalendar .
Die untergeordneten Elemente von ShowContainer sind ShowList und ShowItem (Enkelkind); andere Kinder sind ShowPage mit Geschwister SuggestedList .
PremieresContainer und ShowCalendar haben keine untergeordneten Elemente, sondern sind Container, da sie für mehrere Aufgaben verantwortlich sind, darunter das Abrufen von Shows oder Episoden und das Hinzufügen/Entfernen der gespeicherten Elemente eines Benutzers.
Verantwortlich für das Abrufen und Anzeigen von Episodeninformationen von den APIs und dem Backend. Der Episode Redux-Status umfasst myLineup (gespeicherte Episoden des Benutzers), showEpisodes (Episoden für eine bestimmte Show, abgerufen von der TVmaze-API) und isFetching (boolean). Es gibt einen Container, EpisodeContainer . Die untergeordneten Elemente von EpisodeContainer sind EpisodeList und EpisodeItem (Enkelkind).
Benutzer können über EpisodeItem Episoden anzeigen und bestimmte Episoden zu ihrer Aufstellung hinzufügen.
Verantwortlich für das Abrufen und Anzeigen von Sendungsinformationen von der TVmaze-API basierend auf Benutzereingaben. Der Search Redux-Status umfasst results (Suchergebnisse) und isFetching (boolean). Der Container ist SearchContainer , der ein untergeordnetes Element ( SearchResults ) und ein Enkelelement ( SearchItem ) hat.
Benutzer können Shows aus den SearchResults über eine Schaltfläche im SearchItem speichern.
Verantwortlich für das Abrufen und Anzeigen zusätzlicher Informationen von der trakt.tv-API. Der Status „Extras Redux“ umfasst trending (Folgen, deren Beliebtheit sich am letzten Tag geändert hat), watching (Sendungen mit den meisten Zuschauern), ratings (Array der user_shows des Benutzers, die Bewertungen enthalten) und isFetching (boolean). Zu den Extras gehören drei Container: DashboardContainer , TrendingContainer und MostWatchedContainer .
DashboardContainer verwaltet die Landingpage nach der Anmeldung. Es hat zwei untergeordnete Elemente, DashboardLineupList und DashboardOnTonightList , die jeweils ein untergeordnetes Element haben, DashboardLineupItem und DashboardOnTonightItem . DashboardLineupList zeigt die Episoden in der Aufstellung eines Benutzers an, die am aktuellen Tag ausgestrahlt werden. DashboardOnTonightList zeigt Episoden an, die nicht im Programm eines Benutzers stehen, aber heute ausgestrahlt werden und hoch bewertet sind.
TrendingContainer ruft die trakt.tv-API auf, um die neuesten Trendsendungen abzurufen, und ist das übergeordnete Element von TrendingItem , das jedes Ergebnis der Abfrage anzeigt.
MostWatchedContainer ruft die trakt.tv-API auf, um die meistgesehenen Sendungen abzurufen, und ist das übergeordnete Element von MostWatchedItem , das jedes Ergebnis der Abfrage anzeigt. Ein Benutzer kann Ergebnisse auch basierend auf bestimmten Zeiten (Woche, Monat, Jahr, jemals) filtern.
Meine Klassenkameraden an der Flatiron School sind immer die Besten und Hilfsbereitsten, also vielen Dank! Vielen Dank auch an meine Dozenten Johann Kerr, Lindsey Wells und Andrew Cohn, die immer ein toller zweiter Blick für meine Arbeit waren.