Skip to content

Latest commit

 

History

History
79 lines (57 loc) · 6.13 KB

README.md

File metadata and controls

79 lines (57 loc) · 6.13 KB
Raw

Movie Search

application interface preview

An application to find information about your favorite movies.

Application uses external TMDB API.

To see a preview of the initial idea, use this link. This implementation was based on that example.

themoviedb.org API

The themoviedb.org API was used for the backend. API requires the use of API key so you need to register and get API key (you can enter any data during registration process).

The following endpoints were used in this work:

Link to the API documentation.

Routes

The app has the following routes:

  • '/' - home page with a list of popular movies. Component HomePage.
  • /movies - page with movie search by keyword. Component MoviesPage.
  • /movies/:movieId - page with detailed information about the movie. Component MovieDetailsPage.
  • /movies/:movieId/cast - information about the cast. Component Cast. Rendered on the page MovieDetailsPage.
  • /movies/:movieId/reviews - information about reviews. Component Reviews. Rendered on the page MovieDetailsPage.
  • If a user has accessed a non-existent route, it must be redirected to the home page.

Code Splitting

The asynchronous JS code loading for the application routes was added using React.lazy() and <Suspense>.

Live page

The live page for this repository can be viewed at GitHub Pages.

Local build and run

  1. Make sure you have an LTS version of Node.js installed on your computer. Download and install if needed.
  2. Install the project's base dependencies with the npm install command.
  3. Create .env.local file in the project root and add following environment variables (follows provided .env.example file as a helping guide):
    1. (required) Add TMDB API key to REACT_APP_TMDB_API_KEY variable
    2. (optional) Change REACT_APP_ROUTING_BASENAME variable (location within your application, when your application is served from a sub-directory on the server) when deploying to GitHub to match your case.
    3. (optional) Change REACT_APP_FUNC_SHOW_LESS variable. Change is to true for "show more / show less" folding functionality for unlimited folds/unfoldes or to false for "show more" functionality only when all respective elements may be unfolded once and after that button disappear.
  4. Start web server by running the npm start command.
  5. Go to localhost:3000 (port may vary) in your browser. This page will automatically reload after saving changes to the project files.

Valuable information for the successful deploy

  1. In repository settings: GitHub Actions should have Read and write permissions as well as checked Allow GitHub Actions to create and approve pull requests in Workflow permissions. Pages should deployed from gh-pages branch.
  2. All deploy rules are described in deploy.yml file.
  3. For correct operation of deployed app change homepage value in package.json (should match your repo GitHub URL, e.g. https://<profile-name>.github.io/<repository-name>/)
  4. All environmental variables and secrets should be set inside your repository Settings > Secrets and variables > Actions section:
    1. REACT_APP_TMDB_API_KEY should be set as a repository secret and should match obtained TMDB API key API key.
    2. REACT_APP_ROUTING_BASENAME should be set as a repository variable and match your repository name (as your application will be served from a sub-directory on the server that matches your repository name) or other depending on your deploy conditions.
    3. REACT_APP_FUNC_SHOW_LESS should be set as repository variable. Change is to true for "show more / show less" folding functionality for unlimited folds/unfoldes or to false for "show more" functionality only when all respective elements may be unfolded once and after that button disappear.

Task Acceptance Criteria

React project template is used as a starting point for the application.

  • The goit-react-hw-05-movies repository is created.
  • When submitting homework, there are two links: to the source files and the live page using GitHub Pages.
  • The component state stores the minimum required set of data, the rest is calculated.
  • There are no errors or warnings in the console when running application code.
  • Each component has a separate folder with the React-component file and styles file.
  • The propTypes are described for all components.
  • Everything that a component expects in the form of a prop is passed to it when it is called.
  • Component names are clear and descriptive.
  • JS-code is clean and clear, Prettier is used
  • Styling is done by using CSS modules or Styled Components.