Display list of movies

[grasipacheco]

Value proposition

As the user I want to see a list of movie covers so that I can get an overview about new movies

Description

Acceptance criteria

• [ ] The App is optimized for mobile version
• [ ] a list of movie cards is displayed
• [ ] every MovieCard contains: a poster the movie title the director
• [ ] If there is an issue loading the movie data from the source, an error message is displayed to the user
• [ ] the list scrolls vertically

Tasks

• [ ] Create the feature branch movie-list
• [ ] Fetch a list of current movies with SWR in pages/index.js
• [ ] Create the component called MovieCard to render a list
• [ ] the MovieCard should accept three props: image, title and director
• [ ] Render the MovieCard component in pages/index.js

[F-Kirchhoff]

Here is my review for this user story:

• please remove the bulletpoint in the description
• the movie cards in the wireframe should have more "negative space" so its more pleasing. Please remember, that your final design should not diverge too much from your wireframe, if you add an oval poster image in the wireframe, the final image should be oval as well (please don't use an oval image, it is not very space efficient).
• the movie title and movie directors are in the same line, this can lead to problems if both names are very long
• please use a typical screen ratio for a smarthone and not a rectangular screen size for the wireframe
• the acceptance criteria don't contain "should" or "can" (this was my mistake)
• if you want that an error message is displayed for the user, please provide a wireframe for this szenario
• I would recommend you not to create a "MovieList" component yet, since it has no real benefit yet. Instead it adds an additional component layer. But keep in mind that you can refactor this code into a List component at a later stage in your project, when it becomes necessary or useful (i.e. you want to render a second list of movies).