From 292852ffdf9dba2cff33ff1e01a246e28284e983 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 7 Aug 2020 12:50:33 -0400 Subject: [PATCH 1/5] changed carousel component to a functional component --- .firebase/hosting.ZGlzdA.cache | 13 ++ .firebaserc | 5 + firebase.json | 16 ++ src/containers/DisplayMovieRow.js | 171 ++++++++---------- .../sass/components/_movieShowcase.scss | 1 - 5 files changed, 110 insertions(+), 96 deletions(-) create mode 100644 .firebase/hosting.ZGlzdA.cache create mode 100644 .firebaserc create mode 100644 firebase.json diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache new file mode 100644 index 0000000..be41959 --- /dev/null +++ b/.firebase/hosting.ZGlzdA.cache @@ -0,0 +1,13 @@ +index.html,1596741018384,3d6b40018584f7c06d40114b891d30af59937f16c0dceb4a140db1f823418e20 +main.css,1596741018384,c2e259b7b0f0d56ed711b2d6f4b6b592e4301a1afe87b06d14d5ca3bfd239897 +static/images/add.svg,1596741018385,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c +static/images/bell-logo.svg,1596741018385,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56 +static/images/bell.svg,1596741018385,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4 +static/images/cancel-music.svg,1596741018386,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39 +static/images/drop-down-arrow.svg,1596741018385,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743 +static/images/search-icon.svg,1596741018385,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a +static/images/play-button.svg,1596741018385,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251 +8562b6565f5ae1db5e4af40d85b4ed2d.png,1596741018383,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 +static/images/Netflix_Logo_RGB.png,1596741018385,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 +bundle.js,1596741018384,733d73858d2dfa40c45bd27b9a220e6173b0fdddd779fa670f9724fc7b49957d +static/images/header-bg.jpg,1596741018385,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40 diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 0000000..f6af2db --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "netflix-clone-9a0b9" + } +} diff --git a/firebase.json b/firebase.json new file mode 100644 index 0000000..2c33c29 --- /dev/null +++ b/firebase.json @@ -0,0 +1,16 @@ +{ + "hosting": { + "public": "dist", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js index cb51c75..609efd9 100644 --- a/src/containers/DisplayMovieRow.js +++ b/src/containers/DisplayMovieRow.js @@ -9,101 +9,82 @@ import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'; // install Swiper components SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); -export default class DisplayMovieRow extends Component { - constructor(props) { - super(props); - this.state = { - value: 0, - width: window.innerWidth - }; +const DisplayMovieRow = (props) => { + let netflixUrl = false; + if ( + props.url === + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) { + netflixUrl = true; } - - componentDidMount() { - window.addEventListener("resize", this.handleResize); - } - - componentWillUnMount() { - window.addEventListener("resize", this.handleResize); - } - - handleResize = (e) => { - this.setState({ width: window.innerWidth }); - }; - - onSlideChange = (value) => { - this.setState({ value }) - } - - render() { - const { width } = this.state; - let netflixUrl = false; - if ( - this.props.url === - `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` - ) { - netflixUrl = true; - } - - return ( - <> -

{this.props.title}

- - { - this.props.movies.map((movie, idx) => { - let movieImageUrl = - 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path; - if ( - this.props.url === - `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` - ) { - movieImageUrl = - 'https://image.tmdb.org/t/p/original/' + movie.poster_path; - } - if (movie.poster_path && movie.backdrop_path !== null) { - return ( - this.props.selectMovieHandler(movie)} - key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")} - > - - - ) - } - }) + return ( + <> +

{props.title}

+ + {props.movies.map((movie, idx) => { + let movieImageUrl = + 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path; + if ( + props.url === + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) { + movieImageUrl = + 'https://image.tmdb.org/t/p/original/' + movie.poster_path; } - - - ); - } -} + if (movie.poster_path && movie.backdrop_path !== null) { + return ( + props.selectMovieHandler(movie)} + key={idx} + className={ + 'movieShowcase__container--movie' + + (netflixUrl ? '__netflix' : '') + } + > + + + ); + } + })} + + + ); +}; + +export default DisplayMovieRow; diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 1fd7fa2..b48412e 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -40,7 +40,6 @@ div.swiper-button-next { } } - .movieShowcase { background-color: $color-background; grid-column: 2 / 13; From 6d53e2d2f315c6d59fef7c954b82e54a561f2fb8 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 7 Aug 2020 13:47:09 -0400 Subject: [PATCH 2/5] removed unused import statements --- README.md | 1 + src/containers/DisplayMovieRow.js | 179 ++++++++++-------- src/containers/Home.js | 3 - src/containers/Navbar.js | 5 +- src/index.html | 4 - src/index.js | 6 +- .../sass/components/_movieShowcase.scss | 37 ++-- 7 files changed, 124 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index d15acc4..5278bc9 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ This project is a simplified front end clone of Netflix. It was created with Rea - Redux & React - Sass (grid & flexbox) - Media queries +- Swiper JS ### Runing Project Locally - Install dependencies: run `npm install` in root project diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js index 609efd9..d0835fb 100644 --- a/src/containers/DisplayMovieRow.js +++ b/src/containers/DisplayMovieRow.js @@ -1,90 +1,107 @@ import React, { Component } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; -// Import Swiper styles -import 'swiper/swiper.scss'; -import 'swiper/components/navigation/navigation.scss'; -import 'swiper/components/pagination/pagination.scss'; -import 'swiper/components/scrollbar/scrollbar.scss'; import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'; // install Swiper components SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); -const DisplayMovieRow = (props) => { - let netflixUrl = false; - if ( - props.url === - `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` - ) { - netflixUrl = true; +export default class DisplayMovieRow extends Component { + constructor(props) { + super(props); + this.state = { + width: window.innerWidth, + }; } - return ( - <> -

{props.title}

- - {props.movies.map((movie, idx) => { - let movieImageUrl = - 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path; - if ( - props.url === - `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` - ) { - movieImageUrl = - 'https://image.tmdb.org/t/p/original/' + movie.poster_path; - } - if (movie.poster_path && movie.backdrop_path !== null) { - return ( - props.selectMovieHandler(movie)} - key={idx} - className={ - 'movieShowcase__container--movie' + - (netflixUrl ? '__netflix' : '') - } - > - - - ); - } - })} - - - ); -}; + componentDidMount() { + window.addEventListener("resize", this.handleResize); + } -export default DisplayMovieRow; + componentWillUnMount() { + window.addEventListener("resize", this.handleResize); + } + + handleResize = (e) => { + this.setState({ width: window.innerWidth }); + }; + + render() { + const { width } = this.state; + let netflixUrl = false; + if ( + this.props.url === + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) { + netflixUrl = true; + } + + return ( + <> +

{this.props.title}

+ = 1378 ? 4 : + width >= 998 ? 3 : + width >= 625 ? 2 : 2 + } + breakpoints={{ + 1378: { + slidesPerView: 5, + slidesPerGroup: 5, + }, + 998: { + slidesPerView: 4, + slidesPerGroup: 4, + }, + 625: { + slidesPerView: 3, + slidesPerGroup: 3, + }, + 0: { + slidesPerView: 2, + slidesPerGroup: 2, + }, + }} + preventClicksPropagation={true} + preventClicks={true} + scrollbar={{ draggable: false, hide: true }} + slideToClickedSlide={false} + pagination={{ clickable: true }} + > + {this.props.movies.map((movie, idx) => { + let movieImageUrl = + 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path; + if ( + this.props.url === + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) { + movieImageUrl = + 'https://image.tmdb.org/t/p/original/' + movie.poster_path; + } + if (movie.poster_path && movie.backdrop_path !== null) { + return ( + this.props.selectMovieHandler(movie)} + key={idx} + className={ + 'movieShowcase__container--movie' + + (netflixUrl ? '__netflix' : '') + } + > + + + ); + } + })} + + + ); + } +} diff --git a/src/containers/Home.js b/src/containers/Home.js index 0ad2a0a..152b20a 100644 --- a/src/containers/Home.js +++ b/src/containers/Home.js @@ -1,9 +1,6 @@ import React, { Component } from 'react'; -import axios from "../axios-movies"; -import Navbar from './Navbar'; import MainContent from './MainContent'; -import Movie from '../components/Movie/Movie'; import Modal from '../components/UI/Modal'; import MovieDetails from '../components/Movie/MovieDetails'; diff --git a/src/containers/Navbar.js b/src/containers/Navbar.js index 3997ccc..3efef59 100644 --- a/src/containers/Navbar.js +++ b/src/containers/Navbar.js @@ -2,9 +2,8 @@ import React, { Component } from 'react'; import { NavLink } from 'react-router-dom'; import _ from 'lodash'; import { withRouter } from 'react-router-dom'; -import axios from '../axios-movies'; -import Movie from '../components/Movie/Movie'; +import axios from '../axios-movies'; import SearchLogo from '../static/images/search-icon.svg'; import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'; import BellLogo from '../static/images/bell-logo.svg'; @@ -31,7 +30,7 @@ class Navbar extends Component { } /** changes the scrolling state depending on the Y-position */ - handleScroll = (event) => { + handleScroll = () => { if (window.scrollY === 0) { this.setState({ scrolling: false }); } diff --git a/src/index.html b/src/index.html index b0fe964..0d117d9 100644 --- a/src/index.html +++ b/src/index.html @@ -5,10 +5,6 @@ - - Netflix Clone diff --git a/src/index.js b/src/index.js index b639dfe..15193c5 100644 --- a/src/index.js +++ b/src/index.js @@ -7,13 +7,15 @@ import promise from 'redux-promise'; import '@babel/polyfill'; import App from './containers/App'; +import 'swiper/swiper-bundle.min.css'; +// import 'swiper/components/navigation/navigation.scss'; +// import 'swiper/components/pagination/pagination.scss'; +// import 'swiper/components/scrollbar/scrollbar.scss'; // Import main sass file to apply global styles import './static/sass/style.scss'; const createStoreWithMiddleware = applyMiddleware(promise)(createStore); -// TODO -// - implement carousel const app = ( diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index b48412e..f5cbd1d 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -1,41 +1,42 @@ // Override swiper styles .swiper-pagination { - top: 0; - height: 2rem; - text-align: right; - padding-right: 4rem; + top: 0 !important; + height: 2rem !important; + text-align: right !important; + padding-right: 4rem !important; } .swiper-pagination-bullet { - background-color: rgb(255, 255, 255); + background-color: rgb(255, 255, 255) !important; } .swiper-container-horizontal>.swiper-pagination-bullets { - bottom: 0; - left: 0; - width: 100%; + bottom: 0 !important; + left: 0 !important; + width: 100% !important; } div.swiper-button-prev, div.swiper-button-next { - transition: all .3s; + transition: all .3s !important; color: rgb(255, 255, 255); &:hover { - transform: scale(1.2); - transition: all .3s; + transform: scale(1.2) !important; + transition: all .3s !important; } } .swiper-wrapper:hover .swiper-slide { - opacity: .3; + opacity: .3 !important; + transition: all 450ms !important; &:hover { - transform: scale(1.3); - opacity: 1; + transform: scale(1.3) !important; + opacity: 1 !important; @include responsive(tab_port) { - transform: scale(1.2); + transform: scale(1.2) !important; } } } @@ -78,14 +79,14 @@ div.swiper-button-next { &:hover &--movie__netflix { &:hover { - transform: scale(1.1); + transform: scale(1.1) !important; @include responsive(tab_port) { - transform: scale(1.05); + transform: scale(1.05) !important; } @include responsive(phone) { - transform: scale(1.05); + transform: scale(1.05) !important; } } } From 78ac993948c33f7290bfa32a4f60c3bf1990f322 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 7 Aug 2020 13:57:14 -0400 Subject: [PATCH 3/5] fixed hover styles bug --- .firebase/hosting.ZGlzdA.cache | 26 +++++++++---------- README.md | 2 +- .../sass/components/_movieShowcase.scss | 11 ++++---- 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache index be41959..ec34674 100644 --- a/.firebase/hosting.ZGlzdA.cache +++ b/.firebase/hosting.ZGlzdA.cache @@ -1,13 +1,13 @@ -index.html,1596741018384,3d6b40018584f7c06d40114b891d30af59937f16c0dceb4a140db1f823418e20 -main.css,1596741018384,c2e259b7b0f0d56ed711b2d6f4b6b592e4301a1afe87b06d14d5ca3bfd239897 -static/images/add.svg,1596741018385,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c -static/images/bell-logo.svg,1596741018385,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56 -static/images/bell.svg,1596741018385,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4 -static/images/cancel-music.svg,1596741018386,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39 -static/images/drop-down-arrow.svg,1596741018385,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743 -static/images/search-icon.svg,1596741018385,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a -static/images/play-button.svg,1596741018385,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251 -8562b6565f5ae1db5e4af40d85b4ed2d.png,1596741018383,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 -static/images/Netflix_Logo_RGB.png,1596741018385,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 -bundle.js,1596741018384,733d73858d2dfa40c45bd27b9a220e6173b0fdddd779fa670f9724fc7b49957d -static/images/header-bg.jpg,1596741018385,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40 +index.html,1596822462872,294686b5824777966e74b788a74f613225bd2a74f6e7eca9b7b98b3bd6e4ae60 +main.css,1596822462871,bb87e22e8a8cbfda6e9e3da3fadf11070e07b8e7292fd0cac412bfa57f0571a3 +static/images/add.svg,1596822462875,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c +static/images/bell-logo.svg,1596822462872,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56 +static/images/bell.svg,1596822462873,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4 +static/images/cancel-music.svg,1596822462872,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39 +static/images/drop-down-arrow.svg,1596822462873,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743 +static/images/play-button.svg,1596822462872,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251 +static/images/search-icon.svg,1596822462873,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a +8562b6565f5ae1db5e4af40d85b4ed2d.png,1596822462871,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 +static/images/Netflix_Logo_RGB.png,1596822462872,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 +bundle.js,1596822462871,033e3afff30e48c0cc6b812ab7b48ad066cbc65e6442c1f10109e6a55a0e103b +static/images/header-bg.jpg,1596822462873,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40 diff --git a/README.md b/README.md index 5278bc9..6eb27b9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Netflix Clone -- Demo: http://netflix-react-clone.surge.sh/ +- Demo: https://netflix-clone-9a0b9.web.app/ This project is a simplified front end clone of Netflix. It was created with React and CSS (Grid and Flexbox). It uses [The MovieDB Api](https://www.themoviedb.org/documentation/api) to search for movies and display details. Feel free to contribute! diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index f5cbd1d..74d5168 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -18,18 +18,21 @@ div.swiper-button-prev, div.swiper-button-next { - transition: all .3s !important; + transition: all 450ms !important; color: rgb(255, 255, 255); &:hover { transform: scale(1.2) !important; - transition: all .3s !important; + transition: all 450ms !important; } } +.swiper-slide { + transition: all 450ms !important; +} + .swiper-wrapper:hover .swiper-slide { opacity: .3 !important; - transition: all 450ms !important; &:hover { transform: scale(1.3) !important; @@ -55,8 +58,6 @@ div.swiper-button-next { } &__container { - transition: transform 450ms; - @include responsive(phone) { width: 98vw; } From eb839e3cce7a544273c5f971e2567ee6608cc830 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 7 Aug 2020 14:03:20 -0400 Subject: [PATCH 4/5] updated demo link --- .firebase/hosting.ZGlzdA.cache | 26 +++++++++++++------------- README.md | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache index ec34674..bf71cc2 100644 --- a/.firebase/hosting.ZGlzdA.cache +++ b/.firebase/hosting.ZGlzdA.cache @@ -1,13 +1,13 @@ -index.html,1596822462872,294686b5824777966e74b788a74f613225bd2a74f6e7eca9b7b98b3bd6e4ae60 -main.css,1596822462871,bb87e22e8a8cbfda6e9e3da3fadf11070e07b8e7292fd0cac412bfa57f0571a3 -static/images/add.svg,1596822462875,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c -static/images/bell-logo.svg,1596822462872,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56 -static/images/bell.svg,1596822462873,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4 -static/images/cancel-music.svg,1596822462872,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39 -static/images/drop-down-arrow.svg,1596822462873,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743 -static/images/play-button.svg,1596822462872,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251 -static/images/search-icon.svg,1596822462873,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a -8562b6565f5ae1db5e4af40d85b4ed2d.png,1596822462871,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 -static/images/Netflix_Logo_RGB.png,1596822462872,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 -bundle.js,1596822462871,033e3afff30e48c0cc6b812ab7b48ad066cbc65e6442c1f10109e6a55a0e103b -static/images/header-bg.jpg,1596822462873,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40 +index.html,1596823315374,294686b5824777966e74b788a74f613225bd2a74f6e7eca9b7b98b3bd6e4ae60 +main.css,1596823315373,1fe11d275cdaeefa9ac00b547cc17a7559f641d94302b061941c58441778dc90 +static/images/add.svg,1596823315374,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c +static/images/bell-logo.svg,1596823315374,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56 +static/images/bell.svg,1596823315375,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4 +static/images/cancel-music.svg,1596823315375,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39 +static/images/drop-down-arrow.svg,1596823315374,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743 +static/images/play-button.svg,1596823315375,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251 +static/images/search-icon.svg,1596823315375,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a +8562b6565f5ae1db5e4af40d85b4ed2d.png,1596823315373,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 +static/images/Netflix_Logo_RGB.png,1596823315375,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1 +bundle.js,1596823315373,033e3afff30e48c0cc6b812ab7b48ad066cbc65e6442c1f10109e6a55a0e103b +static/images/header-bg.jpg,1596823315376,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40 diff --git a/README.md b/README.md index 6eb27b9..bcd7352 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Netflix Clone -- Demo: https://netflix-clone-9a0b9.web.app/ +- Demo: http://netflix-clone-react.surge.sh/ This project is a simplified front end clone of Netflix. It was created with React and CSS (Grid and Flexbox). It uses [The MovieDB Api](https://www.themoviedb.org/documentation/api) to search for movies and display details. Feel free to contribute! From 054eb1ed28066bfe0c9fe8f77aeab69aafb00461 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 7 Aug 2020 14:03:31 -0400 Subject: [PATCH 5/5] updated gitignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index f26bccb..08fbcf0 100644 --- a/.gitignore +++ b/.gitignore @@ -10,4 +10,6 @@ dist/ # Logs logs *.log -npm-debug.log* \ No newline at end of file +npm-debug.log* + +.firebase \ No newline at end of file