MAD9014

# Final Project

# JAMStack Web App

The Final Project for this course combines all the DOM, events, fetch, and History API knowledge that we have covered this semester to build a mobile-first, responsive, JAMStack Web App. Your web app will use The Movie Database API and let users search for movies or tv shows and then see the full cast for the movie or show.

See the notes and video in Module 11.1 on how to use The Movie DataBase API.

Start by creating a Github Repository called tmdb-jamstack and set the main branch as the source for Pages in the repo Settings.

Your finished app will run on Github Pages. If your username was abcd0001, then with the repo name tmdb-jamstack your website homepage URL would be https://abcd0001.github.io/tmdb-jamstack/index.html.

The search for the movie or tv show takes place on the same screen. The user will need a way to indicate whether it is a movie or a tv show that they are searching for. When the search results come back from the fetch call to the API, then you will display a series of cards with details and an image about the show|movie. If the user clicks on a card, it will take them to a second web page, where you will display the cast in a series of cards with images and information.

Both web pages need to have Content-Security-Policy meta tags that limit what is able to be loaded by the browser. Images can only come from self and from TMDB API. Fetch calls can only be made to TMDB API. CSS and fonts can only come from self and Google Fonts. Scripts can only come from self or unsafe-inline.

As the user navigates or runs searches you should be putting the required information into the URL hash.

Here are some example URLs.

https://username.github.io/repo/index.html#/movie/trek
https://username.github.io/repo/index.html#/movie
https://username.github.io/repo/index.html#/tv/star
https://username.github.io/repo/index.html#/tv
https://username.github.io/repo/credits.html#/tv/253/Star%20Trek
https://username.github.io/repo/credits.html#/movie/77/Memento
1
2
3
4
5
6

Notice the information that comes after the # in each url. This is information being passed from one page to the other or triggering a function on the same page. The value of the hash can be taken as a string and split on each /. Then you can determine what to do with the values.

In the examples above, the first value is always tv or movie to provide context. The second value on index.html is a keyword to search for. The second value on the credits.html page is the id of the movie or show. The third value is the title of the movie or show.

// to read the parts of the hash on the home page, you could do this:
let [, type, keyword] = hash.split('/').filter((val) => val);
// for the hash #/movie/hero => type would be `movie` and keyword would be `hero`
//on the credits page
let [, type, id, title] = hash.split('/').filter((val) => val);
1
2
3
4
5

The DOMContentLoaded event and the popstate events will both trigger functions that will read the value in the URL and determine what should be done.

Your script should be written with namespaces and loaded with type="module".

All your fetch calls should use a NetworkError class like the utility one we covered in class. Import the NetworkError class into your main script.

The user should be able to search for a show or movie from either the home or credits pages. When they submit the search form the URL will be updated with the History API using the pushState method if they are on the home page OR an actual navigation from credits to the home page with the information in the hash part of the url.

The layout for the shows and movies should be a single column of cards but the layout of the cards changes depending on the width of the viewport.

There should be something visually different about the homepage (like the colours), when search for a movie versus searching for a tv show.

The layout of the cards on the credits page will be a grid. There should be max and min widths for the cards and the number of cards per row should change based on the width of the viewport.

See the example video to get a better sense for how the app works.

You should have your own design and colour scheme for your web app. Don't try to replicate exactly what is in the demo video.

Demo video coming soon

The urls that you will need for doing your fetches are:

const baseURL = 'https://api.themoviedb.org';
const movieSearchURL = `/3/search/movie?api_key=`;
const tvSearchURL = `/3/search/tv?api_key=`;
const movieCreditsURL = `/3/movie/{movie_id}/credits?api_key=`;
const tvCreditsURL = `/3/tv/{tv_id}/credits?api_key=`;
1
2
3
4
5

When you are loading the images that are returned from the API calls, depending on the type of image, you will need to include a size dimension as part of the URL.

const API = {
  imgBaseURL: `https://image.tmdb.org`,
  backdrop_sizes: ['w300', 'w780', 'w1280', 'original'],
  logo_sizes: ['w45', 'w92', 'w154', 'w185', 'w300', 'w500', 'original'],
  poster_sizes: ['w92', 'w154', 'w185', 'w342', 'w500', 'w780', 'original'],
  profile_sizes: ['w45', 'w185', 'h632', 'original'],
  still_sizes: ['w92', 'w185', 'w300', 'original'],
};
1
2
3
4
5
6
7
8

# Project Checklist

Design

  • Responsive mobile first layout.
  • Show|movie cards change orientation to make better use of available space.
  • Credit cards shown as a grid.
  • Custom accessible colour scheme.
  • Google fonts used.
  • All the colours and font sizes are accessible and readable at all screen sizes.
  • Good design principles are applied.

Security

  • Use Content-Security-Policy <meta> tag to limit what is allowed to be loaded
  • Use NetworkError class to track and handle fetch response problems
  • All errors are reported to the user on the webpage, in the HTML.

Navigation

  • Searches for movies and shows happen on the same page - index.html
  • Search results are shown on index.html
  • The cast for a show or movie is shown on credits.html
  • Details about the search and/or show and/or movie should be passed through the hash value of the url
  • As an alternative to the hash values you can use history.state for most navigation. However, you will still need a way to pass parameters between index.html and credits.html. This will require hash or querystring values.
  • Users need to be able to search for a movie or a tv show from either page
  • The user should be able to click the back and forward buttons in the browser to step through previous searches

Features

  • The user should be able to easily tell if they are searching for a movie or a show.
  • The user should be able to easily tell if they viewing search results for a movie or a show.
  • If the image value for a movie, show, or actor is null then there needs to be a placeholder image in the card.
  • Finished version of the site runs on Github Pages from the main branch.

Code

  • Main script loaded as a module.
  • Namespaces are used to hold all your functions.
  • NetworkError class is imported to be used.
  • History.pushState, History.replaceState, and window.location are used for navigation.
  • Popstate event used to capture navigation done with the back and forward buttons.
  • Search is done with fetch and TMDB API.
  • All the console.log commands are removed or commented out in the final version.
  • No errors appearing in the console while the app runs.
  • All HTML, static and generated, is valid.
  • CSS, fonts, scripts, and images are all in their own folders.

# Submission

Due Date **Week 15** (See BS LMS for exact date) :::

No Deadline Extensions Available for the Final Project

Open BS LMS and go to the Activities > Assignments page.

Go to the Final Project assignment. Submit URL for private GitHub Repo.

Invite prof3ssorSt3v3 to your private repo.

Back to the Assignment List

Last Updated: 12/3/2022, 6:28:00 PM