I've been watching lots of TV shows every week, and often times I have to keep checking if there are new episodes today and whether the online watching site has upload the episodes or not. It came to my mind that maybe I can make myself a website that shows all the information I need.
Design Process:
First, I quickly mocked up a screen in Adobe Illustrator to have a clear view of what it looks and what are the interactions.
Knowing what the interactions will be like, I can start finding resources that can help me achieve that. I used Swiper to build the swiping structure of the website, and used Material Design Lite to set up the card views.
Now I need to fill in the contents. I use Google Feed API to get information from my Episode Calendar RSS feed. With that I can have all the show names, season & episode information, and even the episode title for each day.
After the information filled in, I need to grab some images for the cards and background. I used themoviedb API to get poster images and backdrop images for each shows.
Now that the visual parts are done, I can simply grab the video link for the episodes and embed the video to my website using iframe.
I also added a feature that adds a "NEW" badge to the cards that have updated the videos to the latest episode. I did this by using YQL to crawl update information from the video source website. Another badge is "WATCHED" badge, which I did it by using JQuery-Cookie to remember if I have already opened an episode or not.
The above process took about 8 hours give or take, but the actual time-consuming part is to fix the bugs and fine-tune the detail interactions and transitions. I always feel that it's not good enough and find new ways to do it.
Anyway, the results were great! Now I can just open up the website to see which shows are having new episodes today, I can check if it's updated, and actually watch the video with one click.