Level 400

For level 400, you should work in the repo of your partner from level 200.

Before writing any new code, look at their level 300 implementation.

Compare their implementation to yours. Think:

1. How is it different?
2. What do you prefer about your implementation?
3. What do you prefer about their implementation?
4. What did you learn that you didn’t know before?

They should do the same with your repository.

Have a discussion about your answers to these questions. In class, together you should give a 3 minute talk about your conclusions.

Refactoring

Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.

Have your partner review any changes you have, and make sure they understand them.

Adding new functionality

Level 400 is about expanding beyond one TV show.

Until now, your site has only showed information about the episode of one TV show.

But TVmaze has information about lots of TV shows, all in the same format.

We want to display any of them.

Requirements

1. Add a select element to your page so the user can choose a show.
2. When the user first loads the page, make a fetch request to https://api.tvmaze.com/shows (documentation) to get a list of available shows, and add an entry to the drop-down per show.
3. When a user selects a show, display the episodes for that show, just like the earlier levels of this project.

You will need to perform a fetch to get the episode list. 4. Make sure that your search and episode selector controls still work correctly when you change shows. 5. Your select must list shows in alphabetical order, case-insensitive. 6. During one user’s visit to your website, you should never fetch any URL more than once.

Screenshot of minimal version

Note: Provided your project meets the above requirements, it can look however you want.

Here is one example layout.

Level 500

For level 500, you must switch back to your original codebase.

You must have merged someone else’s level 400 implementation.

Once again, compare their implementation to yours. Think:

1. How is it different?
2. What do you prefer about your implementation?
3. What do you prefer about their implementation?
4. What did you learn that you didn’t know before?

Have a discussion about your answers to these questions. In class, together give a 3 minute talk about your conclusions. Do this in small groups so you don’t spend hours doing this.

Refactoring

Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.

Have your partner review any changes you have, and make sure they understand them.

Adding new functionality

Level 500 is about adding a front-page which lets users select (and find) shows from your shows list.

Requirements

1. When your app starts, present a listing of all shows (“shows listing”)
   1. For each show, you must display at least name, image, summary, genres, status, rating, and runtime.
2. When a show name is clicked, your app should:
   1. Fetch and present episodes from that show (enabling episode search and selection as before)
   2. Hide the “shows listing” view
3. Add a navigation link to enable the user to return to the “shows listing”
   1. When this is clicked, the episodes listing should be hidden
4. Provide a free-text show search through show names, genres, and summary texts
5. Ensure that your episode search and episode selector controls still work correctly when you switch from shows listing to episodes listing and back
6. During one user’s visit to your website, you should never fetch any URL more than once.

Screenshot of minimal version

Note: Provided your project meets the above requirements, it can look however you want.

Here is one example layout.

Extra options

Do not do any of these until you have completed level 500!

Here are some ideas for consideration for further work:

1. Add cast listing to your show listing, http://api.tvmaze.com/shows/1?embed=cast
2. Add cast listing to your episode listing, http://api.tvmaze.com/shows/1?embed=cast
3. Allow clicking a cast member to present a view of all shows the person has appeared in http://api.tvmaze.com/people/1/castcredits

• Linking those back into your episodes view of each show.

4. Truncate long summaries and provide a “… read more…” control to reveal more.
5. Allow the user to choose to have the show list sorted by rating (highest rated shows first)
6. Have your search support start-of-word search, or other search types.
7. Make the browser’s back and forward buttons navigate through your changed views (see History.pushState()).
8. Allow user to mark “favourite” shows
9. Allow user to store notes on each episode
10. Use local storage to cache the above, and perhaps also to cache episode lists
11. Paginate through results with a “load more” button - don’t load 100s of episodes at a time.
12. Experiment with infinite scroll
13. Responsive design
14. Style your page to fit the theme of the show (colours, typography, background images, etc). Commit to one show to do this.