My First Redux App! With a Rails Backend

I’ve been learning how to code for several months now (not a long time, I know) but as my final project for my program at Flatiron School I used React & Redux for the frontend and Ruby on Rails for the backend.

This was definitely a scary endeavor as it was my first major solo project and I was going to be using Redux which I had never used before to create an app. However, it definitely paid off! I’m a total Redux believer now!!

The purpose of my app is to be able to save all their favorite shows and see when/where they air. As we are living in the second “Golden Age of Television”, there is a plethora of amazing television out there. However, I cannot keep it all straight. I can never remember when a show is on, what channel/network/website/whatever, or if it’s new this week. This is where MyLineup comes in!

Here you can view the README file for my app and see its repo.

Backend

I created the backend of my app (GitHub repo) using Ruby on Rails. Because the backend is only responsible for database related queries, it was fairly simple to set up. I also used two different APIs in order to get the TV data: trakt.tv API and TVmaze API. For performance monitoring, I utilized NewRelic to optimize the backend.

For models I have: User, Show, Episode, UserShow, UserEpisode.

As you might have guessed for a User:

class User < ApplicationRecord
  has_many :user_shows
  has_many :shows, through: :user_shows
  has_many :user_episodes
  has_many :episodes, through: :user_episodes
  has_secure_password
end

And Show:

class Show < ApplicationRecord
  has_many :user_shows, dependent: :destroy
  has_many :users, through: :user_shows
  has_many :episodes
end

Episode:

class Episode < ApplicationRecord
  has_many :user_episodes, dependent: :destroy
  has_many :users, through: :user_episodes
  belongs_to :show
end

UserShow and UserEpisode are the join table of User and Show/Episode:

class UserShow < ApplicationRecord
  belongs_to :user
  belongs_to :show
end
class UserEpisode < ApplicationRecord
  belongs_to :user
  belongs_to :episode
end

And I created those models to Users can rate their shows as well as so when a User removes a show or episode, it does not delete the item from the database.

Each model also required its own controller because each model can be CRUDed by the User. The Shows controller had the most responsibilities because it handled CRUD actions for shows as well as fetch requests to external APIs.

Frontend

As mentioned, I created the frontend using React (which I knew well) and Redux (which I’d learned about a few days prior to starting). I felt comfortable with the component and state structure of React but was confused by Redux however I wanted to give it a try anyway because that’s the kinda guy I am! And I have to say I’m pretty darn happy about Redux. (Frontend repo here). For performance monitoring, I utilized Chrome Performance Dev Tools.

Dashboard

Upon login, the user is directed to their dashboard which displays their ‘Lineup’ for the night as well as other suggested shows to watch this evening.

My Lineup pulls from ‘myLineup’ in the Redux store and displays episodes that air today. Other Shows to Watch pulls from the TVmaze API which gives every single show that airs today. In order to make the list more useful, I filtered for shows that have a rating greater than 8 and are not already on the User’s Lineup.

this.props.onTonight.filter(episode => episode.show.rating.average > 8 && !ids.includes(episode.id))

I had to make the Dashboard (and a few other components) stateful, even though this goes against the Redux single source of truth, but it was for a good cause! This allowed me to paginate the results so a user can scroll through the episodes. I sliced the filtered results and saved 5 at a time to the state to be displayed. When a user clicks ‘Older’, I simply display the previous 5 items in the filtered results. Shoutout to Lindsey Wells for helping me with that one!

My Lineup

Arguably the most important part of my project (at least for me) is the calendar which displays a user’s lineup. This tells you exactly when and where all your shows air! (see here)

I wish I had time for all this television!

Here I used React Big Calendar in order to display all a user’s shows. RBC was not terribly user-friendly, but I was able to make all a user’s episodes in their lineup show up on the calendar, so I call that a win! I also used Moment.js in order to format and set times.

A user can see their shows for the whole week or just today. They can move forward and backwards in time. They can also see it as an agenda which displays all saved episodes for the next month (in case you really want to plan around your TV schedule).

A user can also remove shows from their lineup or read more information about an episode from the calendar via a modal popup.

At the bottom on the page, a user can see more suggested shows on tonight which they can add directly to their lineup via a modal popup.

Premieres

The premieres calendar is a fun visual which shows a User all the shows that are premiering that week.

Again, this can be viewed in a week or day format. I again filtered through the premieres results from the trakt.tv API and only displayed shows that have a high rating. I also differentiated between those that are just ‘episode 1’ and those that are ‘season 1, episode 1’ so a user can see which shows are returning (like Total Divas) and which shows are premiering for the first time (like S.W.A.T.).

Users can again add shows and see more show information via a modal popup.

Trending/Most Watched

These are fun features from the trakt.tv API. Here I display the trending shows of the moment (updated by the API hourly) and the Most Watched shows which a user can filter based on time.

I used Semantic UI for the user interface

Search

The search makes a call to the TVmaze API and displays results to a User. A User can add a show and then are redirected to their list of shows

Shows/Show Page

Finally, the Shows and Show pages. The Shows page displays all of the TV shows a user has saved. When a User clicks on a show, they are directed to that show’s specific page.

This page displays informationa bout the specific show the User has selected, all of the show’s episodes (this utilizes the paginate functionality discussed earlier), and suggested shows which are related to the one currently viewed.

The suggested shows here are pulled from the trakt.tv API. Only shows a User does not already have are displayed.

The star ratings are the rating the User gave. All other stats are from the TVmaze API.

And that’s my app! I had a blast making it and would actually like to expand some features! Specifically making Episode show pages that show which Users have also saved that to their Lineup and maybe make it more social. Time will tell!

More information:

mthorry/tv-lineup-app

My Lineup

If you enjoyed the article, I’d love for you to let me know by giving a clap! You can also see my code on GitHub or learn more about me professionally on LinkedIn