├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── client ├── package-lock.json ├── package.json ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── index.html │ ├── mstile-150x150.png │ └── site.webmanifest └── src │ ├── App.css │ ├── App.js │ ├── Routes.js │ ├── actions │ ├── browseActions.js │ ├── userActions.js │ └── watchActions.js │ ├── assets │ ├── fonts │ │ └── Montserrat │ │ │ ├── Montserrat-Black.ttf │ │ │ ├── Montserrat-BlackItalic.ttf │ │ │ ├── Montserrat-Bold.ttf │ │ │ ├── Montserrat-BoldItalic.ttf │ │ │ ├── Montserrat-ExtraBold.ttf │ │ │ ├── Montserrat-ExtraBoldItalic.ttf │ │ │ ├── Montserrat-ExtraLight.ttf │ │ │ ├── Montserrat-ExtraLightItalic.ttf │ │ │ ├── Montserrat-Italic.ttf │ │ │ ├── Montserrat-Light.ttf │ │ │ ├── Montserrat-LightItalic.ttf │ │ │ ├── Montserrat-Medium.ttf │ │ │ ├── Montserrat-MediumItalic.ttf │ │ │ ├── Montserrat-Regular.ttf │ │ │ ├── Montserrat-SemiBold.ttf │ │ │ ├── Montserrat-SemiBoldItalic.ttf │ │ │ ├── Montserrat-Thin.ttf │ │ │ ├── Montserrat-ThinItalic.ttf │ │ │ └── OFL.txt │ ├── images │ │ ├── LOGO.psd │ │ ├── google.svg │ │ ├── imdb.png │ │ ├── logo-min.png │ │ ├── logo.png │ │ └── pdp.png │ └── theme.js │ ├── components │ ├── Banner │ │ ├── Banner.js │ │ └── index.js │ ├── Footer │ │ ├── Footer.js │ │ └── index.js │ ├── ImdbRating │ │ ├── index.js │ │ └── style.css │ ├── Loader │ │ ├── Loader.js │ │ └── index.js │ ├── Modal │ │ ├── Modal.js │ │ └── index.js │ ├── MovieCard │ │ ├── index.js │ │ └── style.css │ ├── Navbar │ │ ├── Logo.js │ │ ├── Menu.js │ │ ├── Navbar.js │ │ ├── NotificationsMenu.js │ │ ├── ProfileMenu.js │ │ └── index.js │ ├── PrivateRoute │ │ ├── PrivateRoute.js │ │ └── index.js │ ├── Row │ │ ├── index.js │ │ └── style.css │ ├── ScrollToTop.js │ ├── SearchBar │ │ ├── SearchBar.js │ │ └── index.js │ ├── Slider │ │ ├── Slider.js │ │ ├── index.js │ │ └── style.css │ └── VideoPlayer │ │ ├── VideoPlayer.js │ │ ├── index.js │ │ ├── spinner.scss │ │ └── style.css │ ├── constants │ ├── actionTypes.js │ ├── api.js │ └── routes.js │ ├── containers │ └── MainContainer.js │ ├── index.js │ ├── pages │ ├── Browse │ │ ├── Browse.js │ │ └── index.js │ ├── BrowseMovies │ │ ├── BrowseMovies.js │ │ └── index.js │ ├── BrowseTVShows │ │ ├── BrowseTVShows.js │ │ ├── index.js │ │ └── style.css │ ├── Home │ │ ├── Home.js │ │ └── index.js │ ├── Movie │ │ ├── Cast.js │ │ ├── Movie.js │ │ ├── MovieDetails.js │ │ ├── Trailers.js │ │ └── index.js │ ├── MyList │ │ ├── MyList.js │ │ └── index.js │ ├── NotFound │ │ ├── NotFound.js │ │ └── index.js │ ├── SearchContent │ │ ├── index.js │ │ └── style.css │ ├── SignIn │ │ ├── SignIn.js │ │ └── index.js │ ├── SignUp │ │ ├── Signup.js │ │ └── index.js │ └── TVShow │ │ ├── Cast.js │ │ ├── Episodes.js │ │ ├── Modal.js │ │ ├── TVShow.js │ │ ├── TVShowDetails.js │ │ ├── Trailers.js │ │ └── index.js │ ├── reducers │ ├── browseReducer.js │ ├── index.js │ ├── userReducer.js │ └── watchReducer.js │ ├── requests.js │ └── store │ └── index.js ├── package-lock.json ├── package.json ├── screenshots ├── browse.png ├── connexion.png ├── inscription.png ├── movie.png ├── player.png └── tvshow.png └── server ├── assets └── captions │ ├── 508943Arabic.vtt │ ├── 508943English.vtt │ ├── 508943French.vtt │ ├── 51876Arabic.vtt │ ├── 51876English.vtt │ ├── 51876French.vtt │ ├── 588228Arabic.vtt │ ├── 588228English.vtt │ └── 588228French.vtt ├── config ├── connectDB.js ├── env.js ├── index.js └── passport.js ├── controllers ├── auth.controller.js ├── browse.controller.js ├── movie.controller.js └── tvshow.controller.js ├── index.js ├── middlewares ├── auth.js └── validator.js ├── models ├── movie.model.js └── user.model.js ├── routes ├── auth.routes.js ├── browse.routes.js ├── movie.routes.js └── tvshow.routes.js └── utils ├── captions.utils.js ├── movie.utils.js ├── requests.js └── tvshow.utils.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | **/.env -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mehdi Ben Hadj Ali 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # X-Netflix 2 | X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend. 3 | 4 | ## Built with 5 | 6 | FrontEnd: React.JS, Redux Library, Material UI, CSS 7 | Backend: Node.JS, Express.JS, Passportjs 8 | Database:MongoDB, Mongoose 9 | 10 | 11 | ## UI 12 | 13 | ### Home 14 | 15 | ![Home](screenshots/browse.png) 16 | 17 | ### Movie Page 18 | 19 | ![Home](screenshots/movie.png) 20 | 21 | ### TV Show Page 22 | 23 | ![Home](screenshots/tvshow.png) 24 | 25 | ### Player 26 | 27 | ![Home](screenshots/player.png) 28 | 29 | ### Sign in 30 | 31 | ![Home](screenshots/connexion.png) 32 | 33 | ### Sign up 34 | 35 | ![Home](screenshots/inscription.png) 36 | 37 | 38 |

Installation

39 | 40 | Use the package manager [npm](https://www.npmjs.com/) to install X-Netflix. 41 | Setup the project and install the packages by running: 42 | ```bash 43 | npm run setup 44 | ``` 45 | Run project with command 46 | 47 | ```bash 48 | npm run dev 49 | ``` 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tunflixv2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "proxy": "http://localhost:4444", 6 | "dependencies": { 7 | "@material-ui/core": "^4.11.4", 8 | "@material-ui/icons": "^4.11.2", 9 | "@react-spring/web": "^9.2.3", 10 | "@silvermine/videojs-quality-selector": "^1.2.5", 11 | "@testing-library/jest-dom": "^5.13.0", 12 | "@testing-library/react": "^11.2.7", 13 | "@testing-library/user-event": "^12.8.3", 14 | "@videojs/themes": "^1.0.1", 15 | "axios": "^0.21.1", 16 | "formik": "^2.2.9", 17 | "js-cookie": "^2.2.1", 18 | "node-sass": "^6.0.1", 19 | "normalize.css": "^8.0.1", 20 | "plyr": "^3.6.8", 21 | "react": "^17.0.2", 22 | "react-dom": "^17.0.2", 23 | "react-redux": "^7.2.4", 24 | "react-router-dom": "^5.2.0", 25 | "react-scripts": "4.0.3", 26 | "react-select": "^4.3.1", 27 | "redux": "^4.1.0", 28 | "redux-thunk": "^2.3.0", 29 | "styled-components": "^5.3.0", 30 | "swiper": "^6.7.5", 31 | "video.js": "^7.13.3", 32 | "videojs-contrib-quality-levels": "^2.1.0", 33 | "videojs-hls-quality-selector": "^1.1.4", 34 | "web-vitals": "^1.1.2", 35 | "yup": "^0.32.9" 36 | }, 37 | "scripts": { 38 | "start": "react-scripts start", 39 | "build": "react-scripts build", 40 | "test": "react-scripts test", 41 | "eject": "react-scripts eject" 42 | }, 43 | "eslintConfig": { 44 | "extends": [ 45 | "react-app", 46 | "react-app/jest" 47 | ] 48 | }, 49 | "browserslist": { 50 | "production": [ 51 | ">0.2%", 52 | "not dead", 53 | "not op_mini all" 54 | ], 55 | "development": [ 56 | "last 1 chrome version", 57 | "last 1 firefox version", 58 | "last 1 safari version" 59 | ] 60 | }, 61 | "devDependencies": { 62 | "eslint": "^7.28.0", 63 | "prettier": "^2.3.1" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /client/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /client/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /client/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/apple-touch-icon.png -------------------------------------------------------------------------------- /client/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /client/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/favicon-16x16.png -------------------------------------------------------------------------------- /client/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/favicon-32x32.png -------------------------------------------------------------------------------- /client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/favicon.ico -------------------------------------------------------------------------------- /client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | X-Netflix - Regardez vos films et séries préférés 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /client/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehdibha/Tunflix/ca9b39fc737be792fbb17611a258b939233fff80/client/public/mstile-150x150.png -------------------------------------------------------------------------------- /client/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /client/src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap'); 3 | 4 | a { 5 | text-decoration: none; 6 | cursor:pointer; 7 | } 8 | a:hover{ 9 | text-decoration: underline; 10 | } -------------------------------------------------------------------------------- /client/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import "./App.css"; 4 | import { ThemeProvider } from "@material-ui/styles"; 5 | import theme from "./assets/theme"; 6 | import CssBaseline from "@material-ui/core/CssBaseline"; 7 | import ScrollToTop from "./components/ScrollToTop"; 8 | import { BrowserRouter as Router, Route } from "react-router-dom"; 9 | import { getAuthUser } from "./actions/userActions"; 10 | import Cookies from "js-cookie"; 11 | import Routes from "./Routes"; 12 | import Loader from "./components/Loader"; 13 | 14 | function App() { 15 | const isLoading = useSelector((state) => state.userReducer.isLoading); 16 | const darkMode = useSelector((state) => state.userReducer.darkMode); 17 | const dispatch = useDispatch(); 18 | useEffect(() => { 19 | if (window.location.hash === "#_=_") window.location.hash = ""; 20 | const cookieJwt = Cookies.get("auth-cookie"); 21 | if (cookieJwt) { 22 | Cookies.remove("auth-cookie"); 23 | localStorage.setItem("token", cookieJwt); 24 | } 25 | dispatch(getAuthUser()); 26 | }, [dispatch]); 27 | 28 | return ( 29 | 30 | 31 | 32 | 33 | {isLoading ? : } 34 | 35 | 36 | ); 37 | } 38 | 39 | export default App; 40 | -------------------------------------------------------------------------------- /client/src/Routes.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense, lazy } from "react"; 2 | import Navbar from "./components/Navbar"; 3 | import PrivateRoute from "./components/PrivateRoute"; 4 | import { Switch, Route, useLocation } from "react-router-dom"; 5 | import { HOME, BROWSE, SIGN_IN, SIGN_UP, MOVIES, TV_SHOWS, MY_LIST } from "./constants/routes"; 6 | import { useSelector } from "react-redux"; 7 | import Footer from './components/Footer' 8 | import Home from './pages/Home'; 9 | import Browse from './pages/Browse'; 10 | import SignIn from './pages/SignIn'; 11 | import SignUp from './pages/SignUp'; 12 | import NotFound from './pages/NotFound'; 13 | import BrowseMovies from './pages/BrowseMovies'; 14 | import BrowseTVShows from './pages/BrowseTVShows'; 15 | import MyList from './pages/MyList'; 16 | import SearchContent from './pages/SearchContent'; 17 | import Movie from './pages/Movie'; 18 | import TVShow from './pages/TVShow'; 19 | 20 | 21 | const Routes = () => { 22 | const location = useLocation(); 23 | const isAuth = useSelector((state) => state.userReducer.isAuth); 24 | return ( 25 | <> 26 | {(location.pathname.slice(0, 7) === "/browse" || location.pathname.slice(0, 7) === "/search" || location.pathname.slice(0, 6) === "/movie" || location.pathname.slice(0,3) === "/tv") && isAuth && ( 27 | 28 | )} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |