• When a movie’s details are displayed, none of the other movies will be visible it should just be that movie’s details
• When a movie’s details are displayed, the user should have a way to return to the main view of all movies
• Display single backdrop image
• Display specific movie overview for the individual card
• Display specific average rating
• Display release date

Acceptance Criteria: The user successfully hovers their cursor over the movie image, clicks it and is directed to another page with the details of the movie displayed.

• Should display a message on the page if an incorrect URL is entered
• Should have an image to supplement the message
• Should have a 'Back to Home' button

As a user, when I navigate to a movie card and click on it, I:

• Should see the URL update to include the movie id
• Should see the movie's backdrop picture if available
• Should see additional information about the movie: budget, revenue, overview, genre, etc.

• Fix bug causing flash if letters typed in URL
• Fix failing test that would sometimes have an 'undefined' URL
• Remove commented out/unused code

• Create a 'Watch Trailers' button in the movie details page
• Create another page that lists the embedded trailers
• Create a class component
• Create a fetch call to get the trailer data
• Create a function to clean trailer data
• Set cleaned data to state

Acceptance Criteria: When the user successfully hovers over the 'Watch Trailer' button, clicks it and is directed to another page that either displays the available trailers, or an apologetic message if no trailers exist.

• App
• Header
• Movie cards container
• Movie card
• Trailers
• Error

• Display an apologetic message to the user that the server/website is down
• Use conditional rendering to determine what should display

Acceptance Criteria: When the server returns an error, the user will be directed to another page indicating an error has occurred.

• Should remove broken/non-existent links
• Should not display duplicate trailers

Use Figma to build out designs

• Home page (all movies displayed)
• Individual movie page
• Error page
• Login page?
• Extension: trailers

• The user can click the browser forward & back arrows to navigate
• Application views and user flows are fully tested
• Asynchronous functions are stubbed
• Implement 'Router' functionality to create different pages

Acceptance Criteria: The user successfully hovers over a movie image, clicks it and is directed to the movie details page with the updated url in the address bar.

• Should be able to visit the main page and the user will see the application name & fun tagline
• Should display movie details for the individual movie selected
• Should return to the home page by clicking the home button

• Should display the movie title and tagline
• Should display the trailers for the movie
• Should display a home button
• Should display a 'Back to Movie Details' button

• Should successfully fetch data
• Should display a modal for error handling

• Display a Rotten Tomatillos title in the header
• Display fun tagline in header
• Display movie images using the poster path in a grid layout
• Display movie title
• Display average rating

Acceptance Criteria: The user successfully navigates to http://localhost:3000 and views a page containing all movie cards

• Should be able to visit the main page and the user will see the application name & fun tagline
• Should display the poster image passed
• Should display the movie title
• Should have an alt text for the image
• Should display the release date
• Should have a clickable poster image
• Should display the average rating
• Should not display the backdrop image
• Should display 3 movie cards
• Should display the movies sorted by release date (newest to oldest)

• Should be able to visit the main page and the user will see the application name & fun tagline
• Should display movie details for the individual movie selected
• Should return to the home page by clicking the home button

• App
• Nav bar
• Movie cards container
• Movie card
• Footer

• Should be able to visit the main page and the user will see the application name & fun tagline
• Should display an error modal when the URL is incorrect
• Should have a refresh button in the error modal
• Should display message for 500 error
• Should be able to click the refresh button

• Refactor apiCalls.js to a single function that accepts url path parameters
• Refactor cleaning function for readability
• Refactor testing suites for readability

• Should direct the user to an error page
• Should have the title and tagline at the top
• Should have an error message displayed on the page
• Should have an image to supplement the message
• Should allow the user to navigate back to the home page

Acceptance Criteria: The user types in a url that does not exist in the application and is redirected to another page indicating the page does not exist.