Learning React and ES6 by building a Movie Discovery App.
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
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
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
- Youtube Iframe Video
Film
- Seasons(In TV Shows)
- Actor
- Crew
- Production
- Recommandation
- Similaraty
Axios(API_URL)
BaseUrl: https://api.themoviedb.org/3
Params
api_key: YOUR_SECRET_KEY
language: en-US
GET {{API_URL}}/movie/now_playing
-> Get Now Playing Movies in Array
GET {{API_URL}}/movie/upcoming
-> Get UpComing Movies in Array
GET {{API_URL}}/movie/popular
-> Get Popular Movies in Array
GET {{API_URL}}/movie/{id}?append_to_response=videos
-> Get Movie Detail with Youtube Videos
GET {{API_URL}}/movie/{id}/credits
-> Get Movie Credit Detail in two array(Actor & Crew)
GET {{API_URL}}/movie/${id}/recommendations
-> Get Recommand Movies
GET {{API_URL}}/movie/${id}/similar
-> Get Similar Movies
GET {{API_URL}}/movie/${id}/similar?encodeURIComponent(term)
-> Get Search Movie
GET {{API_URL}}/tv/top_rated
-> Get Top Rated TV Shows in Array
GET {{API_URL}}/tv/popular
-> Get Popular TV shows in Array
GET {{API_URL}}/tv/airing_today
-> Get TV Shows on Airing Today in Array
GET {{API_URL}}/movie/{id}?append_to_response=videos
-> Get TV Show Detail with Youtube Videos
GET {{API_URL}}/tv/{id}/credits
-> Get TV Credit Detail in two array(Actor & Crew)
GET {{API_URL}}/tv/${id}/recommendations
-> Get Recommand TV Shows
GET {{API_URL}}/tv/${id}/similar
-> Get Similar TV Shows
GET {{API_URL}}/tv/${id}/similar?encodeURIComponent(term)
-> Get Search TV Show
아래는 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>
Author: ShigatsuEl
Source Code: https://github.com/ShigatsuEl/shigatsuflix
#react #reactjs #javascript