Moview is a movie searching app created with React. view demo
- Look up movies by their title.
- Get more info from the movie's Wikipedia page by clicking on the movie's title.
- If there is no Wikipedia info found, it shows Tmdb overview in a modal window.
- Shows links to the movie's Tmdb and Wikipedia website. This product uses the TMDb API but is not endorsed or certified by TMDb.
- Get inspired by searching for related movies.
- App: Moview app logo is shown on initial state, before a Search method has been fired. One can search for movie titles, and once those are loaded, to related movies. A spinner is shown while data is being fetched from the API. If no movies found during search, displays an error message.
- ButtonPrimary: Wraps Button component from Material UI in custom theme provided in utils directory.
- SearchBar: Input search field and logos. Search for a string (a movie title) after pressing the Enter key.
- MovieCard: Shows movie poster image, title, release year, original language and rating.
Shows a placeholder image if no poster image found.
All data fetched from TMdb API in the component.
If no string is in the Search
input
, prevents from re-rendering. - MovieGrid: Wraps MovieCard into a Material UI Grid layout.
- MovieInfo: Opens modal window with movie information after clicking the movie title.
Has 3 buttons: Wikipedia,TMDb, and Close button.
Initally movie extract is fetched from Wikipedia, if not found, it looks for equivalent TMdb overview.
Show if the information is fetched from Wikipedia or TMDb in a
sub
tag. If no information found, gives an error message.
- Implement better search for Wikipedia: first run an open search and then query for the title.
- Outsource search expression strings to a config file and import to make the MovieCard component reusable.
- Add a search button to the SearchBar, so a user can search by clicking on it, not only using the enter key.
- Use Router and history to be able to go back after clicking 'Related'.
- Write tests with Jest and enzyme.