🎥 What's it all about? This application leverages the power of React and taps into the free API to bring you up-to-date details about movies, actors, and reviews. Whether you're a movie buff or just looking for your next favorite film, this project has got you covered!
The project is structured as follows:
src/: The source code of the React application.components/: Reusable UI components.Appbar.js: The top-level application bar.Button.js: A button component.Container.js: A container component for layout structure.Navigation.js: Navigation component.Searchbar.js: Search bar component.PageTitle.js: Page title component.MovieList.js: Component for displaying a list of movies.MovieInfo/: Components related to movie information.MovieInfoDetails.js: Component for displaying detailed movie information.
pages/: React components representing different pages of the application.HomePage.js: Home page with trending movies.MoviesPage.js: Page for searching and displaying movies.MovieDetailsPage.js: Page for displaying detailed information about a specific movie.Cast.js: Component for displaying information about the cast.Reviews.js: Component for displaying movie reviews.FullMovieInfo.js: Component for displaying full movie information.
services/: Functions for interacting with the themoviedb.org API. -api.js: API functions for fetching movie data.
- Use this React Homework Template as a starting point for your program.
- Create a repository named
goit-react-hw-05-movies. - Provide a link to the source files and working pages of each project on GitHub Pages.
- Components store the minimal necessary set of data in their state; the rest is computed.
- No errors or warnings appear in the console during the execution of the assignment code.
- Each component has a separate folder with a React component file and a styles file.
- Everything a component expects as props is passed to it during the call.
- Component names are clear and descriptive.
- JS code is clean and understandable, using Prettier.
- Styling is done with CSS modules or Styled Components.
- Use the themoviedb.org API for the backend. Register (you can enter any data) and obtain an API key.
- The following endpoints will be used in this task:
/trending/get-trending: List of today's most popular movies to create a collection on the main page./search/search-movies: Movie search by keyword on the movies page./movies/get-movie-details: Request for full information about a movie for the movie details page./movies/get-movie-credits: Request for information about the cast for the movie details page./movies/get-movie-reviews: Request for reviews for the movie details page.
- The application should have the following routes. If a user enters a
nonexistent route, they should be redirected to the home page.
/: Home component, home page with a list of popular movies./movies: Movies component, page for searching movies by keyword./movies/:movieId: MovieDetails component, page with detailed information about a movie./movies/:movieId/cast: Cast component, information about the cast. Rendered on the MovieDetails page./movies/:movieId/reviews: Reviews component, information about reviews. Rendered on the MovieDetails page.