Skip to content

orsolyalukacs/moview

Repository files navigation

Moview

Moview is a movie searching app created with React. view demo

Features

  • 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. tmdb logo

Extra feature

  • Get inspired by searching for related movies.

Components & how they work

  • 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.

Improvements to be made:

  • 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.

About

A movie searching app. 🎥

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published