Academy Project: TV Shows

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

Overview

You must make a React app which shows details of all of the episodes of a TV show.

The episode data will come from TV Maze.

About the episode data

Where do I get the episode data from?

Initially, you will manually save data from their API (specifically this link) to a JSON file in your project source.

In later exercises you will be challenged to have your app dynamically fetch the data from the API.

In all cases, you will be working with an array of objects, each of which represents an episode of a TV show.

What does the episode data look like?

Here's an excerpt of this file showing an example of ONE episode from the list.

{
    id: 4952,
    url:
      "http://www.tvmaze.com/episodes/4952/game-of-thrones-1x01-winter-is-coming",
    name: "Winter is Coming",
    season: 1,
    number: 1,
    airdate: "2011-04-17",
    airtime: "21:00",
    airstamp: "2011-04-18T01:00:00+00:00",
    runtime: 60,
    image: {
      medium:
        "http://static.tvmaze.com/uploads/images/medium_landscape/1/2668.jpg",
      original:
        "http://static.tvmaze.com/uploads/images/original_untouched/1/2668.jpg"
    },
    summary:
      "<p>Lord Eddard Stark, ruler of the North, is summoned to court by his old friend, King Robert Baratheon, to serve as the King's Hand. Eddard reluctantly agrees after learning of a possible threat to the King's life. Eddard's bastard son Jon Snow must make a painful decision about his own future, while in the distant east Viserys Targaryen plots to reclaim his father's throne, usurped by Robert, by selling his sister in marriage.</p>",
    _links: {
      self: {
        href: "http://api.tvmaze.com/episodes/4952"
      }
    }
  }

Setup

Create a new React app called tv-shows by using the Academy simplified CRA starter app.

Guide to React project creation setup (with TypeScript)

Set up continuous deployment of your app to Netlify as academy-yourgithubusername-tv-shows.netlify.app. Netlify deployment guide for React apps

Setup - get the episode data:

Download the episode data for the show "Game Of Thrones" from TV Maze API using this URL: https://api.tvmaze.com/shows/82/episodes
Save the file as episodes.json in your project's src directory
If your JSON data is all on one long line, you can run the editor command format document* to make it more readable. (*from the vscode command palette, ctrl-shift-p / cmd-shift-p).
Edit your project's tsconfig.json and ensure you have the following property inside the section called compilerOptions: "resolveJsonModule": true
Import the JSON data into a variable at the top of your App.tsx as follows:

import episodes from './episodes.json'

Check the import was successful by adding the following after the import and checking the browser's console when the app loads.

console.log(`Imported ${episodes.length} episode(s)`);
console.log(`First episode's name is ${episode[0].name}`);

Once you've built a relevant React component to display the list of episodes, pass the episodes array to it as a prop.
Use the following type when passing around an episode. Note: It includes some intentional imperfections which you may need to address later in the exercise.

interface IEpisode {
  id: number;
  url: string;
  name: string;
  season: number;
  number: number;
  type: string;
  airdate: string;
  airtime: string;
  airstamp: string;
  runtime: number;
  image: {
    medium: string;
    original: string;
  };
  summary: string;
  _links: { self: { href: string } };
}

If you have to pass around a list of such episodes the type will be IEpisode[].

Rules about the episode data

You MUST NOT edit the static episode data. If you find that the data is unsuitable (e.g. fields are missing, or have unwanted characters), you should improve your own code so that it can deal with such issues at run-time.

Why? If your app is later extended to allow the downloading of episode data for any one of hundreds of possible shows, frequently updated, tidying the data by hand will NOT be a feasible solution! It's important to learn how to write code that can handle inconsistencies in data.

Project Levels

This project is broken into various levels:

ss-kya/mark-react-proj--tv-shows