devandres-tech / netflix-clone

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.

Netflix Clone

• Demo: https://netflix-clone-ebon-nu.vercel.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 to search for movies and display details. Feel free to contribute!

TODO's

• Implement Not Found page styles
• Implement navigation header links functionality
• Update modal to current styling
• Update carousel to current styling
• Create movie page
• Create user account page
• Migrate to Typescript
• Implement dynamic code splitting with dynamic imports
• Setup storybook
• Implement internationalization with react-i18next
• Exclude storybook files from test coverage

Tools used

• Webpack v5
• Axios
• Redux & React
• Sass (grid & flexbox)
• Media queries
• Swiper JS

Runing Project Locally

• Install dependencies: run npm install in root project
• Get API key from here
• Create .env file in root project and add: API_KEY=YOUR_API_KEY_HERE
• Run project: npm run dev

User Stories

• User can search for movies and TV shows on TMDb
• User can the see upcoming and trending movies. Data updates weekly
• User can click on a movie and a modal should pop up. It should display the title, release date, overview, and runtime.
• The webpage adapts to any screen size.

Video Walktrough

Please feel free to create a pull request and submit any issues! Currently looking for backend developers. If you would to contribute to support a backend, reach out, all ideas are welcomed!

netflix-clone's Issues

Fraudulent website error fix

I wrote how I helped an acquaintance of mine to resolve this error in this issue: https://github.com/GuildaDosDesenvolvedores/contribuicao/issues/1

installation tutorial

Congratulations on the project. wanted to ask if you can provide tutorial to install.

I need help with putting the website on Netlify

I need help with putting the website on Netlify. Anyone can help me?

Scrollbar styling

Awesome project, But I noticed the horizontal scrollbars aren't having their styles applied.

Issue in running npm run dev

D:\Project\watchit>npm run dev

I'm getting this error while running the command npm run dev in cmd. Can someone help me out with this?

> webpack-dev-server --mode development --config webpack.config.js --open

internal/modules/cjs/loader.js:573
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-optimist'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
    at Function.Module._load (internal/modules/cjs/loader.js:497:25)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (D:\Project\watchit\node_modules\webpack-dev-server\bin\webpack-dev-server.js:24:1)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --mode development --config webpack.config.js --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jispu\AppData\Roaming\npm-cache\_logs\2020-11-17T18_45_28_528Z-debug.log```

Issue with npm run dev

Being a beginner in web pack, I'm confused with this error. Please let me know if this is an issue with the required version or something else. Thanks!

[email protected] dev /Users/abenezerayana/Downloads/Netflix-Clone-master-2

webpack-dev-server --mode development --config webpack.config.js --open

internal/modules/cjs/loader.js:968
throw err;
^

Error: Cannot find module 'webpack/bin/config-yargs'

Rename hoc/Aux.js

Under windows the name aux for file is forbidden.

https://stackoverflow.com/questions/36225708/cannot-create-a-directory-named-aux-or-starting-by-aux-on-windows-8-1

Horizontal Scroll Bars still visible on Chrome

LICENSE is missing

Please add the Licence of this repo

bug report: please fix demo website

site is not available.

TypeError: Cannot convert undefined or null to object when running npm run dev on MAC

may I ask if anyone could help me solve the error when I tried to type 'npm run dev'?
Can the code be run on web environment? thanks!

Support for backend

I am thinking of making this project a full stack web app. We could build a backend with NodeJS and MongoDB (suggestions are welcome). If you are interested chime in some ideas!

Cannot start project due to compilation error

Hi,
i downloaded the project and tried to start it using the following commands using

-npm install
-npm start

I used an Ubuntu variant and Visual Studio Code with up-to-date npm installation as a system setup.

An error occured with npm start. Do I need any arguments or need any code changes to run it on my system?

cglaeser@docker:~/dev/Netflix-Clone/Netflix-Clone$ npm start

`cglaeser@docker:~/dev/Netflix-Clone/Netflix-Clone$ npm start

[email protected] start /home/cglaeser/dev/Netflix-Clone/Netflix-Clone
webpack-dev-server --open --mode development

clean-webpack-plugin: /home/cglaeser/dev/Netflix-Clone/Netflix-Clone/dist has been removed.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/cglaeser/dev/Netflix-Clone/Netflix-Clone
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 62388ed7497c76af9e42
Version: webpack 4.32.2
Time: 3743ms
Built at: 05/28/2019 10:29:45 PM
Asset Size Chunks Chunk Names
./index.html 483 bytes [emitted]
8562b6565f5ae1db5e4af40d85b4ed2d.png 16.1 KiB [emitted]
bundle.js 2.19 MiB main [emitted] main
main.css 15.9 KiB main [emitted] main
static/images/Netflix_Logo_RGB.png 16.1 KiB [emitted]
static/images/add.svg 1.09 KiB [emitted]
static/images/bell-logo.svg 1.21 KiB [emitted]
static/images/bell.svg 1.1 KiB [emitted]
static/images/cancel-music.svg 1 KiB [emitted]
static/images/drop-down-arrow.svg 761 bytes [emitted]
static/images/header-bg.jpg 2.88 MiB [emitted]
static/images/play-button.svg 824 bytes [emitted]
static/images/search-icon.svg 1.2 KiB [emitted]
Entrypoint main = main.css bundle.js
[0] multi (webpack)-dev-server/client?http://localhost ./src/index.js 40 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react-redux/es/index.js] 270 bytes {main} [built]
[./node_modules/react-router-dom/es/index.js] 1010 bytes {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/redux-promise/lib/index.js] 1.67 KiB {main} [built]
[./node_modules/redux/es/redux.js] 22.6 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 9.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./src/index.js] 692 bytes {main} [built]
+ 158 hidden modules

ERROR in ./src/components/MovieGenre.js
Module not found: Error: Can't resolve '../components/movie/MovieDetails' in '/home/cglaeser/dev/Netflix-Clone/Netflix-Clone/src/components'
@ ./src/components/MovieGenre.js 23:0-60 85:29-41
@ ./src/getMovie.js
@ ./src/containers/NetflixOriginals.js
@ ./src/containers/MainContent.js
@ ./src/containers/Layout.js
@ ./src/containers/App.js
@ ./src/index.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = ./index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 597 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/static/sass/style.scss:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./src/static/sass/style.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/static/sass/style.scss 16.6 KiB {mini-css-extract-plugin} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {mini-css-extract-plugin} [built]
ℹ ｢wdm｣: Failed to compile.`