Create a simple movie viewer web app, where you can view a movie's overview, cast and cast details.
You can view an example by searching in google (mobile view) for any movie; You can also refer to the included screenshots and the following gif for design and layout ideas:
https://media.giphy.com/media/3ohc18FZeUvdUNjNgA/giphy.gif
You can use the open movie database api for this exercise to load a movie's data: https://www.omdbapi.com/
App features:
Dropdown menu for share and send feedback actions (not required to implement the share and send feedback actions)Tabs for overview and cast contentAn image slider for the movie imagesSticky tabs bar: it should always be at the top of the page as you scrollAnimations: active tab switching animation, cast list to cast details page loading animationFor cast details page, you can display static information (doesn't have to load the data from the omdb api)No JS/CSS frameworks or libraries used
Note: this isn't as beautiful as I would've liked, the animations aren't exactly the smoothest things and there's some gotchas/bugs around, but theyre quite minor and have the overall functionality. This web app has 2 views, desktop/mobile. The mobile version behaves a bit more like the google gif, the desktop version is my own layout and doesn't have the cast overview section..but has a cast popup for more details about them. The page can be viewed here: http://yasminefadel.com/movie-viewer-test/