Make it Netflix-like with 100% ReactJS

ShigatsuFlix

Learning React and ES6 by building a Movie Discovery App.

Demo

ShigatsuFlix with React

Preview

Preview1

Preview2

Preview3

Preview4

Preview5

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

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>

Download Details:

Author: ShigatsuEl

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

#react #reactjs #javascript

Make it Netflix-like with 100% ReactJS
4.80 GEEK