Make it Netflix-like with 100% ReactJS

ShigatsuFlix

Learning React and ES6 by building a Movie Discovery App.

Demo

ShigatsuFlix with React

Preview

Tech Stack

Frontend	Technology	Description
01	React	CRA
02	Styled Components	Replace CSS
03	React Router	react-router-dom
04	Container & Presenter	Pattern
05	Axios	TMDB API

No Backend

Directory Structure

public
|-- loading.gif
|-- noPosterSmall.png
src
|-- Components
|   |-- App.js
|   |-- Card.js
|   |-- GlobalStyles.js
|   |-- Header.js
|   |-- Loader.js
|   |-- Message.js
|   |-- Poster.js
|   |-- Router.js
|   |-- Section.js
|   |-- Slide.js
|   |-- Tab.js
|-- Routes
|   |-- Detail
|   |   |-- DetailContainer.js
|   |   |-- DetailPresenter.js
|   |   |-- index.js
|   |-- Home
|   |   |-- HomeContainer.js
|   |   |-- HomePresenter.js
|   |   |-- index.js
|   |-- Movie
|   |   |-- index.js
|   |   |-- MovieContainer.js
|   |   |-- MoviePresenter.js
|   |-- Search
|   |   |-- index.js
|   |   |-- SearchContainer.js
|   |   |-- SearchPresenter.js
|   |-- TV
|   |   |-- index.js
|   |   |-- TVContainer.js
|   |   |-- TVPresenter.js
|-- Styles
|   |-- Theme.js
|-- app.js
|-- index.js

Screens

• Home

  Slide a Movie Cards 1️⃣Now Playing Movies 2️⃣Top Rated TV Shows

• Movie

  Three Sections 1️⃣Now Playing 2️⃣Up Coming 3️⃣Popular

• TV

  Three Sections 1️⃣Top Rated 2️⃣Popular 3️⃣Airing Today

• Search

  You can search Movies or TV Shows

• Detail

  Two Tabs 1️⃣Trailer 2️⃣Film

  • Trailer

    1. Youtube Iframe Video

  • Film

    1. Seasons(In TV Shows)
    2. Actor
    3. Crew
    4. Production
    5. Recommandation
    6. Similaraty

API List

• Movie

  • ✅Now Playing

  • ✅Up Coming

  • ✅Popular

  • ✅Movie Detail

  • ✅Credit Detail

  • ✅Recommandation

  • ✅Similarity

  • ✅Search

• TV

  • ✅Top Rated

  • ✅Popular

  • ✅Airing Today

  • ✅Show Detail

  • ✅Credit Detail

  • ✅Recommandation

  • ✅Similarity

  • ✅Search

• Youtube

  • ✅Iframe

API

• Axios(API_URL)

  • BaseUrl: https://api.themoviedb.org/3

  • Params

    • api_key: YOUR_SECRET_KEY

    • language: en-US

Movie

Now Playing

GET {{API_URL}}/movie/now_playing

-> Get Now Playing Movies in Array

Up Coming

GET {{API_URL}}/movie/upcoming

-> Get UpComing Movies in Array

Popular Movie

GET {{API_URL}}/movie/popular

-> Get Popular Movies in Array

Movie Detail

GET {{API_URL}}/movie/{id}?append_to_response=videos

-> Get Movie Detail with Youtube Videos

Movie Credit Detail

GET {{API_URL}}/movie/{id}/credits

-> Get Movie Credit Detail in two array(Actor & Crew)

Movie Recommandation

GET {{API_URL}}/movie/${id}/recommendations

-> Get Recommand Movies

Similarity Movie

GET {{API_URL}}/movie/${id}/similar

-> Get Similar Movies

Search Movie

GET {{API_URL}}/movie/${id}/similar?encodeURIComponent(term)

-> Get Search Movie

TV

Top Rated

GET {{API_URL}}/tv/top_rated

-> Get Top Rated TV Shows in Array

Popular TV

GET {{API_URL}}/tv/popular

-> Get Popular TV shows in Array

Airing Today

GET {{API_URL}}/tv/airing_today

-> Get TV Shows on Airing Today in Array

Show Detail

GET {{API_URL}}/movie/{id}?append_to_response=videos

-> Get TV Show Detail with Youtube Videos

TV Credit Detail

GET {{API_URL}}/tv/{id}/credits

-> Get TV Credit Detail in two array(Actor & Crew)

Recommandation TV

GET {{API_URL}}/tv/${id}/recommendations

-> Get Recommand TV Shows

Similarity TV

GET {{API_URL}}/tv/${id}/similar

-> Get Similar TV Shows

Search TV

GET {{API_URL}}/tv/${id}/similar?encodeURIComponent(term)

-> Get Search TV Show

Youtube

Iframe

아래는 Youtube Iframe API를 가져오는 스크립트이다. 나의 상황에 맞게 커스터마이즈하여 비디오를 제어하였다.

<script>
     if (!window.YT) {
        // If not, load the script asynchronously
        const tag = document.createElement("script");
        tag.src = "https://www.youtube.com/iframe_api";

        // onYouTubeIframeAPIReady will load the video after the script is loaded
        window.onYouTubeIframeAPIReady = this.loadVideo;

        const firstScriptTag = document.getElementsByTagName("script")[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      } else {
        // If script is already there, load the video directly
        await this.loadVideo();
      }

    const loadVideo = async () => {
      let player;
      try {
        // the Player object is created uniquely based on the "player" id
        player = await new window.YT.Player("player", {
          // 기본적으로 너비와 높이를 설정하지 않아도 640 x 360으로 준다.
          videoId: Your Watch Video ID,
          playerVars: { origin: "https://shigatsuflix.netlify.app" },
          events: {
            onReady: Something do it!
          },
        }),
      } catch (error) {
        console.log(error);
      }
  };
    </script>

• Youtube Iframe API

Download Details:

Author: ShigatsuEl

Source Code: https://github.com/ShigatsuEl/shigatsuflix

#react #reactjs #javascript