movieApp: A JavaScript repository from waspfreak

The MoveApp (Netflix Clone)

Summary

About
Getting Started
Prerequisites
Documentation
Built Using
Author

About

This project using The Movie Database (TMDb) API and React. Also focus in Web responsiveness and modern coding practices like React Hooks, Styled-Components, Storybook and Jest for Snapshots.

Getting Started

The documentation of the project can be found under Documentation section.

The documentation of TMDb can be found here: TMDb documentation

The documentation of React and Hooks for reference: React and Hooks.

The documentation for Storybook for reference: Storybook

The documentation for Styled-Components for reference Styled-Components

Prerequisites

This project use at least React 16.8, because React introduced Hooks on this release.

For efficiency and organized development I prefer styling React Components with styled-components.

As my package manager i'm using Yarn

I prefer to work with Typescript, but the vast majority of the Web still uses Javascript. So, for compatibility reasons, I will work with Javascript and add PropTypes on this project as it adds the Static Types functionality to Javascript.

Installing locally

git clone this project locally in any folder of your computer, install dependencies and run on the web browser:

Available Scripts

In the project directory, you can run:

`yarn start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`yarn storybook`

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time.

Open http://localhost:6006/ to view it in the browser.

Go to Folder

`yarn test`

Launches the test runner in the interactive watch mode.\

`yarn build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Documentation

API Environment

For getting data from TMDb API efficiently we need to store the URLs in variables/constants. This will avoid repeated URLs typing. You can name your constants the way you want, but try to keep it meaningful:

// THE BASE API URL
const API_URL = "https://api.themoviedb.org/3/";

// GET YOUR KEY FROM TMDB DEVELOPER API
const API_KEY = "put your KEY from TMDb API";

// THE URL WHICH TRIGGERS SEARCH
const SEARCH_BASE_URL = `${API_URL}search/movie?api_key=${API_KEY}&query=`;

// THE URL WHICH TRIGGERS TRENDING NOW  MOVIES
const TRENDING_NOW = `${API_URL}/trending/all/day?api_key=${API_KEY}`;

// THE URL WHICH TRIGGERS NOW_PLAYING MOVIES

const NOW_PLAYING = `${API_URL}movie/now_playing?api_key=${API_KEY}&page=1`;

// THE BASE URL WHICH TRIGGERS IMAGES
const IMAGE_BASE_URL = "http://image.tmdb.org/t/p/";

// THE SIZE OF ALTERNATIVE BACKDROP IMAGES
const BACKDROP_SIZE = "w1280";

// THE SIZE OF MOVIES POSTER IMAGES
const POSTER_SIZE = "w500";

Ratings Star Filter

In RatingsFilter Component we will restrict movies based on vote_average of the TMDb API. To create that functionality we will use a radio input HTML Element which will mimic a star rating system and useState Hook to store the filtered ratings then restrict the results based on the radio id

// VERIFY ANY VALUE CHANGES IN target.id AND UPDATE ratings ACCORDINGLY
  const handleInputChange = (e) => {
    setSelected(e.target.id);
  };
  ...

Search Movies

When user types in Search Bar it will return movies based on what is typed without the necessity to press Enter. This gives a better user experience

const doSearch = (event) => {
  // TRACKS THE USER INPUTS event.target
  const { value } = event.target;
  // SET A DELAY (1s) TO USER SEARCH QUERY AND AVOID ABRUPT RENDERING
  clearTimeout(timeOut.current);
  // STORE INPUTS IN value AND RETURN DATA WITH callback TO Home COMPONENT
  setState(value);

  timeOut.current = setTimeout(() => {
    callback(value);
  }, 500);
};

This will return the movies inside the callback(value).

Styled Components

With styled-components the development turns easier exemple:

<StyledRatingsFilter>
    ...
    <StyledMovieWall>
        <StyledMovieCard>
        {
            ...
        }
        </StyledMovieCard>
    </StyledMovieWall>
</StyledRatingsFilter>

PropTypes

With PropTypes we can enforce static types behavior by forcing types for every props in React. It's almost the same as Static Types in TypeScript:

ProgressBar.propTypes = {
size: PropTypes.number.isRequired,
progress: PropTypes.number.isRequired,
strokeWidth: PropTypes.number.isRequired,
circleOneStroke: PropTypes.string.isRequired,
circleTwoStroke: PropTypes.string.isRequired,
};

Built Using

✍️ Author

Juliana Leon Github

This project was bootstrapped with Create React App.

waspfreak/movieApp